1. 语义化标签
header：定义文档的页眉（头部）；
footer：定义文档或节的页脚（底部）；
nav：定义导航链接的部分；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；
2. 媒体标签
（1） audio：音频
<audio src='' controls autoplay loop='true'></audio>
属性：
controls 控制面板
autoplay 自动播放
loop=‘true’ 循环播放
（2）video视频
<video src='' poster='imgs/aa.jpg' controls></video>
属性：
poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
controls 控制面板
width
height
（3）source标签
因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
3. 表单
表单类型：
email ：能够验证当前输入的邮箱地址是否合法
url ： 验证URL
number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ： 提供了一个颜色拾取器
time ： 时分秒
data ： 日期选择年月日
datatime ： 时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件
表单属性：
placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete：自动完成功能
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
属性值：
on | 默认。规定启用自动完成功能。
off | 规定禁用自动完成功能。
使用这个属性需要有两个前提：
1、表单必须提交过
2、必须有name属性。
required：要求输入框不能为空，必须有值才能够提交。
pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
multiple：可以选择多个文件或者多个邮箱
form=" form表单的ID"
表单事件：
oninput：每当input里的输入框内容发生变化都会触发此事件。
oninvalid：当验证不通过时触发此事件。
4. 进度条、度量器
progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少。
meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
high/low：规定被视作高/低的范围
max/min：规定最大/小值
value：规定当前度量值
设置规则：min < low < high < max
5. DOM查询操作
（1）document.querySelector()
（2）document.querySelectorAll()
它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)
6. Web存储
HTML5 提供了两种在客户端存储数据的新方法：
（1）localStorage(本地存储) - 没有时间限制的数据存储。(将数据保存在客户端本地的硬件设备)
（2）sessionStorage(会话存储) - 针对一个 session 的数据存储。
所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。详细请看
7. history API
（1）back()，forward()和go(n)方法
history.back() -> 返回
history.forward() -> 前进
history.go(n) -> 跳转到n个页面以前/以后，填入正数n相当于循环调用n次forward，负数-n相当于循环调用n次back。
（2）HTML5新方法：
- history.pushState();
- history.replaceState();
这两个方法也是单页面应用实现的实质之一，它们均不会造成页面的刷新， 且都不能跨域。 而它们的功能可以从名字中看出，分别是在history栈中创建新的访问记录和修改当前的访问记录。
pushState()和replaceState()参数一样，参数说明如下：
1、state：存储JSON字符串，可以用在popstate事件中。
2、title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替
3、url：任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。
两个方法的主要区别就是：pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。如果你还对这个有迷惑，就用一些示例来证明这个区别。
比较结果如下图：
尽管当我们使用pushState()和replaceState()进行处理时，期待popstate事件被触发。但实际上，情况并不是这样。相反，当你浏览会话历史记录时，不管你是点击前进或者后退按钮，还是使用history.go和history.back方法，popstate都会被触发。下面对popstate有介绍。
（3）location.href
这个location对象中的属性会直接导致刷新页面，需要与以上的两个方法进行区分。
（4） window.onpopstate，window.onhashchange
这两个全局方法被创建用以监听访问的变化。
区别：
- window.onpopstate：只有在页面发生刷新的情况下，也就是历史记录发生改变时触发。所以调用history.pushState()或者history.replaceState()，不会触发popstate()事件。
- window.onhashchange：在url的锚点（由于“#”后面的内容不会被识别，修改它页面不会发生跳转，因此称为锚点）也就是hash值变化时才会调用。常用于构建单页面的应用。
8. 其他
（1）拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
<img draggable="true" />
（2）画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
（3）SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准。
（4）地理定位：Geolocation（地理定位）用于定位用户的位置。‘
9. 总结
（1）新增语义化标签：nav、header、footer、aside、section、article
（2）音频、视频标签：audio、video
（3）input标签新增属性：placeholder、autocomplete、autofocus、required
（3）DOM查询操作：document.querySelector()
（5）数据存储：localStorage、sessionStorage
（6）history API：go、forward、back、pushstate、replacestate
（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
10. 移除的元素
（1）纯表现的元素：basefont，big，center，font, s，strike，tt，u;
（2）对可用性产生负面影响的元素：frame，frameset，noframes；
