新增特性：
1.新增语义化标签
2.新增多媒体标签
3.增加表单类型
4.新增canvas等绘制标签
5.增加了新的API
带来的好处：
1.提高用户体验；
2.可以替代flash等多媒体元素
3.SEO优化
4.对移动端很友好
（缺点：新的标准并不能被浏览器完全支持）
常用的标签：
b .................... 文本粗体，没有表示重要的意思
i .................... 文本斜体，没有表示重要的意思
dd .................... 可以同detailsy与figure一同使用，定义包含文本，dialog亦可使用
dt .................... 可以同details与figrue一同使用，汇总细节，dialog也可用
hr .................... 表示主题结束，而不是水平线，虽然显示相同
menu .................... 重新定义用户界面的菜单，配合commond或者menuitem使用
small .................... 表示小字体，例如打印注释或则法律条款
strong .................... 表示重要性而不是强调符号
结构标签（块状元素）
article .................... 标记定义一篇文章
header .................... 标记定义一个页面或一个区域的头部
nav .................... 标记定义导航链接
section .................... 标记定义一个区域
aisde .................... 标记定义页面内容的侧边栏
hgroup .................... 标记定义文件中一个区块的相关信息
figure .................... 标记定义一组媒体内容以及他们的标题
figcaption .................... 标记定义figure元素的标题
footer .................... 标记定义一个页面或一个区域的底部
dialog .................... 标记定义一个对话框（会话框）类似微信
多媒体标签
video .................... 标记定义一个视屏
audio .................... 标记定义音频内容
source .................... 标记定义媒体资源
embed .................... 标记定义外部的可交互的内容或插件，比如flash
绘图标签：
canvas \ svg
其它标签
meter ....................实时状态显示：气压、气温。 例：<meter value="0.3"></meter>30%
progress....................任务过程：安装、 加载。 例：<progress></progress>
datalist.................... 为input标记定义一个下拉列表，配合option
details....................标记定义一个元素的详细内容，配合summary
summary....................标签为<details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。
标签 备注
menu ....................命令列表（目前所有的主流浏览器都不支持）
menuitem....................menu命令列表的标签（只有FireFox9.0+支持）
command....................menu标记定义一个命令按钮（只有IE9支持）
ruby................... 标记定义注释或音标
rp ...................告诉那些不支持ruby的元素的浏览器如何去显示
et................... 标记定义对rubyd 注释内容文本
mark................... 标记定义有标记的文本（黄色选中状态）
output ...................标记定义一些输出类型，计算表单结果配合oninput事件
keygen................... 标记定义表单里生成的键值（加密信息传送）
time................... 标记定义一个日期/时间，目前所有主流的浏览器都不支持
语义化标签兼容性
对于不支持HTML5语法的浏览器（如：IE8及以下版本浏览器），要想使用这些新标签，需要JavaScript创建该标签。具体做法如下（以<header>标签为例）：
在CSS中设置标签样式为块级
header { display: block; }
通过JavaScript的DOM方式创建该标签
document.createElement('header');
由于HTML5新增的标签很多,我们可以通过简单引用html5shiv.js文件解决这个问题
表单相关:
自带格式验证 <input type="email"> 邮箱 <input type="number"> 数字 <input type="url"> 地址 <input type="range"> 滑块 <input type="color"> 颜色 <input type="time"> 时间 ...... <form autocomplete="on" novalidate></form> <!-- autocomplete: on表示开启智能提示；off表示关闭智能提示 novalidate: 关闭智能验证 --> <form action="" method="get" id="fm"> <input type="text" value="" autofocus placeholder="请输入名字" required> <input type="submit" value="提交"> </form> <input type="text" name="name" form="fm"> <!-- autofocus: 自动获取焦点 placeholder: 文本框提示信息 required: 该属性出现，当前的表单元素必须有验证 form: 该属性出现在表单标签中，值设置为form标签的ID值，该标签可以提交 --> <input type="text" value="" list="url_list"> <datalist id="url_list"> <option value="https://www.baidu.com">百度</option> <option value="https://www.google.com">谷歌</option> <option value="https://www.youku.com">优酷</option> <option value="https://www.qq.com">腾讯</option> </datalist>
自定义属性
<div id="div1" data-name="名字" data-age="20" data-user-sex="男"></div> HTML5通过 "data-属性名" 的方式创建自定义属性。 JavaScript 通过dataset对象获取自定义属性。 注：获取dataset中的属性名需要改成驼峰式命名，如 user-sex 改为 userSex var d1 = document.getElementById('div1') var dt = dv1.dataset; var str = '' str = dt.name + ',' + dt.age + ',' + dt.userSex; dv.innerText = str;
未完待续 ......
