前言
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储等
1、语义化标签
所谓语义标签就是看到标签我就能明白这是什么意思。以前制作网页布局基本使用div来做。div就是一个普通的块级标签，对搜索引擎来说没有任何的语义。
| 标签 | 描述 |
| <hrader></header> | 定义了文档的头部区域 |
| <footer></footer> | 定义了文档的尾部区域 |
| <nav></nav> | 定义文档的导航 |
| <section></section> | 定义文档中的节（section、区段） |
| <article></article> | 定义页面独立的内容区域 |
| <aside></aside> | 定义页面的侧边栏内容 |
| <detailes></detailes> | 用于描述文档或文档某个部分的细节 |
| <summary></summary> | 标签包含 details 元素的标题 |
| <dialog></dialog> | 定义对话框，比如提示框 |
使用语义化标签有利于SEO（Search Engine Optimization 搜索引擎优化），和搜索引擎建立良好的沟通，有助于爬虫爬取更多有效的信息。因为爬虫依赖于标签来确定上下文和各个关键字的权重。也能方便团队开发和维护，增加代码可读性，遵循标准，减少差异化。
2、增强型表单
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
新增5个表单元素
| 标签 | 内容 |
| <progress></progress> | 进度条，展示连接/下载进度 |
| <meter></meter> | 刻度值，用于某些计量，例如温度、重量等 |
| <keygen></keygen> | 提供一种验证用户的可靠方法生成一个公钥和私钥 |
| <output></output> | 用于不同类型的输出比如计算或脚本输出 |
| <datalist></datalist> | 用户会在他们输入数据时看到定义域选项的下拉列表 |
新增多个表单输入类型
| 输入类型 | 描述 |
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 选择一个日期和时间 (无时区) |
| | 包含 e-mail 地址的输入域 |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
新增表单属性
| 属性 | 描述 |
| placehoder | 输入框默认提示文字 |
| required | 要求输入的内容是否可为空 |
| pattern | 描述一个正则表达式验证输入的值 |
| min/max | 设置元素最小/最大值 |
| step | 为输入域规定合法的数字间隔 |
| height/wdith | 用于image类型<input>标签图像高度/宽度 |
| autofocus | 规定在页面加载时，域自动获得焦点 |
| multiple | 规定<input>元素中可选择多个值 |
3、视频和音频
html5提供了音频和视频文件的标准，既使用<audio>元素。
<audio controls>
<source src="" type="audio">
</audio><video controls>
<source src="" type="video">
</video>4、Canvas绘图
<canvas>元素负责在页面中设定一个区域，然后就可以通过 Javascript 动态地在这个区域中绘制图形。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>5、SVG绘图
什么是svg
SVG 是一种使用 XML 描述 2D 图形的语言，在放大或改变尺寸的情况下其图形质量不会有损失，当svg对象的属性发生变换时，浏览器会重新渲染该图形。
与canvas的区别
- canvas可以随时绘制2D图形（用JavaScript）
- svg是基于XML的，意味着可以操作DOM，渲染速度较慢
- 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
- Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘
svg用法
<svg version="相关版本号，比如1.1">
<circle cx = "100" cy = "50"stroke="red" stroke-width="5" fill="black"/>
<!--
cx:圆心的(x轴)横坐标
cy:圆心的(y轴)纵坐标
r:圆心的半径
stroke：外边线条的颜色
stroke-width：外边线条的宽度
fill：圆填充的颜色
-->
</svg>6、地理位置
地理位置能够识别你的定位，并且与别人共享地理信息。
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
} //定位失败的回调
)7、拖放Api
设置元素为可拖放
<img draggable = "true">拖拽对象的方法
- setData(format,data)
将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据
- getData(format)
从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。
- clearData([format])
从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据
- addElement(element)
添加自定义图标。
- setDragImage(element,x,y)
设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
拖拽的属性
- none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
- move：把拖动的元素移动到放置目标。
- copy：把拖动的元素复制到放置目标。
- link：放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。
8、Web Worker
什么是web work
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
优点
为js创建多线程环境。js在主线程执行，new一个子线程在后台执行。worker完成计算的任务返回给主线程，UI交互流畅，不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰，独立执行。
9、Web Storage
什么是web storage
Web 存储更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。
localStorage和sessionStorage的区别
- 相同点
（1）数据都保存在浏览器客户端。
（2）同源，即同域名，同端口，同协议。
（3）操作方法相同。
- 不同点
（1）生命周期不同。localStorage是永久保存，除非用户手动清除数据。sessionStorage是临时保存（存在于进入页面浏览至关闭浏览器的时间）。
（2）作用域不同。浏览器有很多种，所以无法共享用户数据，也就是不同源的页面无法共享数据。
localStorage信息可以在相同浏览器中同源的不同页面，不同标签，不同窗口中共用。sessionStorage不可以在不同页面，不同标签，不同窗口中共用，即使是同源。
用法
存储
// 第一种方式，标准方法
sessionStorage.setItem('email','xxx@qq.com');
// 第二种方式，直接当成普通对象属性赋值。
sessionStorage.blog = 'http://xxxxxx';
获取
// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;移除键值对
// 移除之后，再获取值，将会得到 undefined
// 根据key，移除键值对
sessionStorage.removeItem('email');
清空sessionStorage
// 全部清除
sessionStorage.clear();
localStorage与sessionStorage用法类似，就不过多赘述。
10、WebSocket
概念
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
相较于传统短轮询和长轮询的优点
- 较少的控制开销：在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小；
- 更强的实时性：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少；
- 保持连接状态：与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息；
- 更好的二进制支持：WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容；
- 可以支持扩展：WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。
