H5常用总结

第一课 HTML5结构

• HTML5 是新一代的 HTML
• DTD声明改变 < !DOCTYPE html>
• 新的结构标签
• 注意的地方 ie8 不兼容
  

常用的一些新的结构标签

增加标签：
1、结构标签
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。

多媒体交互标签

特殊样式标签

兼容不好标签

兼容性不是很好的标签
补充说明

small 这个元素表示边栏评论，如附属细则 cite这个元素可用于显示作品标题（图书、电影、诗歌等）
adress这个元素显示article或整个文档的合同信息，且位于footer这个元素之中
time显示人和机器可读的日期和时间，而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值

删除的HTML标签

纯表现的元素：
basefont
big
center
font
s
strike
tt
u
对可用性产生负面影响的元素：
frame
frameset
noframes
产生混淆的元素：
acronym
applet
isindex
dir
重新定义的HTML标签
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，ialog也可用
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr>表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号

崭新新的页面布局

传统的布局

H5布局

第二课 HTML5智能表单

HTML4.01 form表单复习

input表单type属性值

type="text" 单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交
type="file" 上传文件
type="reset" 重置

HTML5智能表单

autocomplet autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 标签，以及以下类型的 标签：text, search, url,
telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项： autofocus 属性 autofocus
属性规定在页面加载时，域自动地获得焦点。 注释：autofocus 属性适用于所有 标签的类型。 form 属性 form
属性规定输入域所属的一个或多个表单。 注释：form 属性适用于所有 标签的类型。 form 属性必须引用所属表单的 id：
表单重写属性 表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。 表单重写属性有：
formaction - 重写表单的 action 属性 formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的 标签：submit 和 image。 list 属性 list 属性规定输入域的
datalist。datalist 是输入域的选项列表。 注释：list 属性适用于以下类型的 标签：text,
search, url, telephone, email, date pickers, number, range 以及 color。
min、max 和 step 属性 min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max
属性规定输入域所允许的最大值。 min 属性规定输入域所允许的最小值。 step 属性为输入域规定合法的数字间隔（如果
step=“3”，则合法的数是 -3,0,3,6 等）。 注释：min、max 和 step 属性适用于以下类型的
标签：date pickers、number 以及 range。 下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为
3（即合法的值为 0、3、6 和 9） multiple 属性 multiple 属性规定输入域中可选择多个值。 注释：multiple
属性适用于以下类型的 标签：email 和 file。 novalidate 属性 novalidate
属性规定在提交表单时不应该验证 form 或 input 域。 注释：novalidate 属性适用于 以及以下类型的
标签：text, search, url, telephone, email, password, date
pickers, range 以及 color. pattern 属性 pattern 属性规定用于验证 input
域的模式（pattern）。 模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释：pattern 属性适用于以下类型的 标签：text, search, url, telephone, email
以及 password。 下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）： placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。 注释：placeholder 属性适用于以下类型的
标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失： required 属性 required
属性规定必须在提交之前填写输入域（不能为空）。 注释：required 属性适用于以下类型的 标签：text,
search, url, telephone, email, password, date pickers, number,
checkbox, radio 以及 file。

2、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器；
a.date：选取日、月、年
b.month：选取月、年
c.week：选取周和年
d.time：选取时间（小时和分钟）
e.datetime：选取时间、日、月、年（UTC时间）
f.datetime-local：选取时间、日、月、年（本地时间）
（6）search：搜索常规的文本域；
（7）color：颜色

3、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

4、其他功能标签
（1）mark：标注（像荧光笔做笔记）
（2）progress：进度条；<progress max="最大进度条的值" value="当前进度条的值">
（3）time：数据标签，给搜索引擎使用；发布日期<time datetime="2014-12-25T09:00">9：00</time>更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time>
（4）ruby和rt：对某一个字进行注释；<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby>
（5）wbr：软换行，页面宽度到需要换行时换行；
（6）canvas：使用JS代码做内容进行图像绘制；
（7）command：按钮；
（8）deteils ：展开菜单；
（9）dateilst：文本域下拉提示；
（10）keygen:加密；
input表单type属性值：
type = "email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="datetime" 显示完整日期 含时区
type="datetime-local" 显示完整日期 不含时区
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range" 生成一个滑动条
type="search" 具有搜索意义的表单results="n"属性
type="color" 生成一个颜色选择表单
type="tel" 显示电话号码

Input 类型 - Date Pickers（日期选择器）

**HTML5 拥有多个可供选取日期和时间的新输入类型：
date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间（小时和分钟）
以下两个没有作用
datetime 选取时间、日、月、年（UTC 时间）
datetime-local 选取时间、日、月、年（本地时间）

HTML5新增表单属性

required: required内容不能为空
placeholder: 表单提示信息
autofocus:自动聚焦
pattern: 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete:是否保存用户输入值
默认为on，关闭提示选择off
formaction: 在submit里定义提交地址
datalist: 输入框选择列表配合list使用 list值为datalist的id值
output: 计算或脚本输出

表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都返回true,一种验证失败返回false
oText.addEventListener("invalid",fn1,false)
ev.preventDefault(): 阻止默认事件
valueMissing: 当输入值为空的时候，返回true
typeMismatch: 控件值与预期不吻合，返回true
patternMismatch: 输入值不满足pattern正则，返回true
cusomError
setCustomValidity()

新增defer和async

新增的属性：

对于js进行添加的属性。

如果没有以上两个属性的话，执行顺序为先加载（下载）第一个src，然后在执行其onload，然后在向下依次同步执行defer属性在h5之前就已经有了，输入延迟加载（推迟执行），它会先加载（下载）src中文件内容，然后等页面全部加载完成后，再加载onload中js.async属性属于异步加载，它会在加载src后，立即执行onload,同时还会继续加载页面以上执行顺序，alert显示会先显示b然后再显示a

网页中标签中加入小图标的样式代码

有序列表ol:新增start（列表起始值），