HTML5 新特性

一、语义化标签

1. <header> 标签通常放在页面或页面某个区域的顶部，用来设置页眉；
2. <nav> 标签可以用来定义导航链接的集合，点击链接可以跳转到其他页面；
3. <article> 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读；
4. <section> 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段，<section>标签和 <article>标签可以互相嵌套；
5. <aside> 标签用来表示除页面主要内容之外的内容，比如侧边栏；

6. <footer>标签位于页面或页面某个区域的底部，用来设置页脚，通常包含版权信息，联系方式
   ...等。

   
   11555850-a6fc197dc0d66ecd.gif

二、表单输入型控件 和 表单属性，如：

一、输入型控件

1. type="number" 数字
2. type="url" 网站
3. type="email" 邮箱
4. type="range" 滑动条
5. type="color" 颜色选择器
6. type="date" 时间选择器

二、表单属性

1. placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
2. required 属性，是一个 boolean 属性。要求填写的输入域不能为空
3. pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
4. min 和 max 属性，设置元素最小值与最大值。
5. step 属性，为输入域规定合法的数字间隔。
6. height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
7. autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
8. multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。

三、媒体元素

1. <audio> 音频标签
2. <video> 视频标签

四、Canvas绘图

HTML5添加的最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。

五、Web Storage

1. sessionStorage对象存储某个特定会话的数据，该数据只保持到浏览器关闭。因为sessionStorage绑定于某个服务器会话，所以文件在本地运行时是不可用的。
2. localStorage对象在HTML5规范中作为持久保存客户端数据的方案，目的是跨越会话存储对象，但有特定的访问限制。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。

六、Web Sockets

Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。

七、地理位置

通过地理定位(geolocation)API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前用户必须同意共享其地理位置信息。

八、DOM扩展

HTML5增加的getElementByClassName()方法是最受人欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法。

九、原生拖放

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。