html5 学习笔记
一、ie8及以下对html5相关语义标签的支持
<!-[if lt IE9]>
<script src="html5.js"></script>
<![endif]->
二、表单
1,form属性,实现form与其中的标签分离
<form id="login" action="login.php" method="get"></form>
<input form="login" type="text" name="user" id="">
<input form="login" type="submit" value="提交">
2,formaction ,实现不同的动作提交到不同的后台处理
formmethod ,不同的提交方式
placeholder,提示字符
<form id="login" action="login.php" method="get"></form>
<input form="login" placeholder="请输入用户名" type="text" name="user" id="">
<input form="login" formaction="del.php" formmethod="get" type="submit" name="dosubmit" value="删除">
<input form="login" formaction="pass.php" formmethod="post" type="submit" name="dosubmit" value="通过">
<input form="login" formaction="notpass.php" formmethod="get" type="submit" name="dosubmit" value="不通过">
3,autofocus 自动获得焦点
这里可以贴一下js 的实现代码
<script>
var username = document.getElementById('username');
username.focus();
</script>
4,autocomplete 根据输入记录自动补全
autocomplete="on" autocomplete="off"
5,list ,提示列表
<input form="login" list="listtest" autofocus autocomplete="on" id="username" placeholder="请输入用户名" type="text" name="user" id="">
<datalist id="listtest">
<option>this is one</option>
<option>this is two</option>
<option>this is three</option>
<option>this is four</option>
</datalist>
三、改良的input元素种类(可以简单的使用这些元素来实现js的功能)
1,<input type="search" name="" id="">
2, tel 属性
<input type="tel" name="" id=""> 没有特殊的校验规则
<input type="tel" title="只能输入十位数字" pattern="^\d{10}$">可以添加正则属性
3,url 专门用来输入url
<input type="url" name="" id="">
4,email
<input type="email" required> 该字段是必须的
5,时间属性
Datetime: <input type="datetime" name="" id=""><br>
Date: <input type="date" name="" id=""><br>
month: <input type="month" value="2015-02"><br>
week: <input type="week" name="" value="2015-W10"><br>
time: <input type="time" name="" id=""><br>
Datetime-local: <input type="datetime-local" name="" id=""><br>
6,number 限制输入数字
小提示乱入:
在input 中加入 formnovalidate 属性可设置不验证
<input type="number" name="num" max="20" min="0" step="3">
7,range 与number类似
<input type="range" onchange="document.getElementById('num').value = this.value" name="num" max="20" min="0" step="3" value="0"><br>
<output id="num">0</output>
8,color 颜色选择器
9,multiple 选择多个文件
<input type="file" name="pic" multiple accept="image/*"> 仅仅支持上传图片
四、html5 中新增加的标签
1, <mark></mark> 黄色背景强调
2,<wbr> 软换行
3,进度条,可以使用 js 控制它们的 value 值
<progress min="0" max="100" value="20" id="pro"></progress>
<meter min="0" max="100" low="30" high="80" id="pro"></meter>
4,canvas 通过js 画图
5,details 详细信息
<details>
<summary>
标题
</summary>
内容
内容
内容
</details>
6,ruby 拼音注释
<ruby>
妹子<rp>(</rp><rt>meizi</rt><rp>)</rp>
</ruby>
五、html5 废除的元素
<font></font>
<u></u>
等元素
六、html5 新增的元素和废除的元素
1,<base>
<base target="_blank" href="http://www.yangguang520.cn">
<a href="index.php">云课堂</a>
2,有序列表倒转
<ol reversed>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
3,async 设置 js 异步加载
html5 学习笔记的更多相关文章
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5学习笔记(一):HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- Html5学习笔记(1)
1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
随机推荐
- iOS现有工程 集成 Cordova/Ionic
首先, 新建 Cordova 项目就不说了, 步骤: http://ionicframework.com/getting-started/ , cordova生成的项目用cdv_project称呼, ...
- Java format 简单应用
一.前言 String.format 作为文本处理工具,为我们提供强大而丰富的字符串格式化功能,为了不止步于简单调用 String.format("Hello %s", " ...
- 灵动标签内sql语句调用
本节来介绍帝国cms中,灵动标签中如何写数据库调用我们所要的信息.方便一些没有学习过数据库的朋友 转载请注明出处:谢寒的博客 灵动标签默认的语法 [e:loop={栏目ID/专题ID,显示条数,操作类 ...
- PowerPoint2003/2007幻灯片常用快捷键大全
熟习掌握PowerPoint快捷键不仅可以对我们在制作幻灯片的时候更加熟练节省时间.而且在我们演示PPT文稿的时候,也不需要停下演讲去调试菜单工具来切换下一张,我们只需要轻轻的按一下键盘即可轻松切换P ...
- 在Livemedia的基础上开发自己的流媒体客户端
一.背景 二.Livemedia框架介绍 1.总体框架 2.客户端框架 2.1 客户端openRTSP流程 2.2增加一种新的媒体 2.2.1增加媒体的format 2.2.2 新媒体需要考虑的问题 ...
- [转载]Android 知识图谱
from: http://blog.csdn.net/xyz_lmn/article/details/41411355
- Qt 4.6: A Quick Start to Qt Designer
Qt 4.6: A Quick Start to Qt Designer A Quick Start to Qt Designer Using Qt Designer involves four ba ...
- selenium - Headless Browser and scraping - solutions - Stack Overflow
yum install pygtk2-devel selenium - Headless Browser and scraping - solutions - Stack Overflow Hea ...
- ArcGIS 10 许可配置
问题描述:在配置ArcGIS许可时,出现了许可检查通过,而无法启动arcmap的问题. 许可诊断结果如下: -------- Diagnostics -------- FLEXnet diagnost ...
- Android JNI入门第四篇——Android.mk文件分析
ndroid.mk文件是在使用NDK编译C代码时必须的文件,Android.mk文件中描述了哪些C文件将被编译且指明了如何编译.掌握Android.mk文件的编写主要是掌握其里头将要使用的一些关键字, ...