HTML5新特性

★ 新增语义化标签

<header>：头部标签 	
<nav>：导航标签 
<article>：内容标签 	
<section>：定义文档某个区域标签
<aside>：侧边栏标签 
<footer>：尾部标签

语义化标签优点：

● 代码格式清晰，易于阅读，利于开发和维护
● 即使在没有CSS的支持下，浏览器依然能够呈现出良好的内容结构。提高了用户体验。
● 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
● 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重。

★ 新增多媒体标签

<video>：视频标签
<audio>：音频标签

★ 新增input类型

type="email" 必须为Email类型
type="url" 必须为url类型
type="date" 必须是日期类型
type="time" 必须是时间类型
type="month" 必须是月类型
type="week" 必须是周类型
type="number" 必须是数字类型
type="tel" 手机号
type="search" 搜索框
type="color" 颜色选择表单

★ 新增表单属性

属性			值			说明
required	 required	  表示其内容不能为空，必填
placeholder	 提示文本	   提示信息，存在默认值不显示
autofocus	 autofocus	  自动聚焦属性，页面加载完成后自动聚焦指定表单
autocomplete autocomplete off/on
multiple	 multiple	  可多选文件提交

★ 新增Canvas绘图和SVG绘图

▲ canvas可以使用javascript在网页绘制2D图形，有两个可选的属性width、height
▲ SVG是一种使用XML描述2D图形的语言，我们可以为某个元素附加Javascript事件处理

区别：
1. SVG是用来描述XML中2D图形的语言，canvas则是借助Javascript动态描绘2D图形
2. SVG可支持事件处理程序而canvas不支持
3. SVG属性改变时，浏览器可以重新呈现它，适用于矢量图，而canvas不可以，更适合视频游戏等
4. canvas可以很好地绘制像素，用于保存结果为png或gif，可做API容器
5. canvas取决于分辨率，SVG与分辨率无关
6. SVG具有更好的文本渲染，而canvas不能很好的渲染，渲染中的SVG可能比canvas慢，特别是应用了大量的DOM
7. 画布更适合渲染较小的区域，SVG渲染更好的更大区域

★ 新增地理定位

getCurrentPosition() 获取用户的位置

★ 新增拖放API（拖放是一种常见的特性，即捉取对象以后拖到另一个位置。）

拖动生命周期		属性名			描述
拖动开始	   ondragstart     在拖动开始时执行脚本
拖动过程中	     ondrag		  只要脚本在被拖动就运行脚本
拖动过程中	  ondragenter     当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	  ondragover	  只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中     ondragleave     当元素离开合法的防止目标时
拖动结束	    ondrop		   将被拖动元素放在目标元素内时运行脚本
拖动结束	   ondraped		   在拖动操作结束时运行脚本

★ 新增Web Worker

Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行

★ 新增WebStorage

• Web Storage 是H5 引入的一个帮助解决cookie存储本地缓存的重要功能
• webstorage 中有5M容量，cookie只有4k

sessionStorage

• session正式依赖与实现的客户端状态保持；
• sessionStorage将数据保存在session中，浏览器关闭数据就消失。

localStorage

• localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。

不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

★ 新增WebSocket

• WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制；
• 握手阶段采用HTTP协议，在服务端与客户端初次握手时，将HTTP协议升级成WebSocket协议当链接成功时就可以在双工模式下来回传递信息；
• 没有同源限制，客户端可以与任意服务器通信；
• 协议标识符为wx（如果加密为wxs）；
• 除了协议定义外还有JS定义，只需要链接远程主机，并建立一个WebSocket实例链接到对端的URL即可。