参考链接
HTML5 新特性
4.Canvas 图形
5.SVG绘图
5.5 Canvas vs SVG：
- 1.SVG：
- 2.Canvas：
6.拖放API
7.地理定位
8.Web Worker
9.Web Storage
10.Web Socket

参考链接

HTML5 新特性

1.语义化标签

2.增强型表单包括属性以及元素

新的 input type：email、 url、 number、 tel、 search、 range、 color、 date、 month、 week

新的表单元素：datalist、progress、meter、output

表单元素的新属性：autocomplete、autofocus、placeholder、multiple、form、required、maxlength、minlength、min、max、step、pattern

3.新增视频 `<video>` 和音频 `<audio>` 标签

阮一峰：多媒体标签

`<video>`

<video> 标签是一个块级元素，用于放置视频。

如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示 **<video>** 内部的子元素。

<video src="example.mp4" controls>
    <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

src：视频文件的网址。
controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。

HTML 标准没有规定浏览器需要支持哪些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，可以使用<source>标签，放置同一个视频的多种格式。

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

`<audio>`

<audio> 标签是一个块级元素，用于放置音频，用法与 <video> 标签基本一致。

<audio controls>
    <source src="foo.mp3" type="audio/mp3">
    <source src="foo.ogg" type="audio/ogg">
    <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p>
</audio>

4.Canvas 图形

阮一峰：Canvas API

HTML5 的 <canvas> 元素使用 JavaScript 在网页上绘制 2D 图像
画布是一个矩形区域，可以控制其每一像素
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

注意：<canvas> 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

5.SVG绘图

阮一峰：SVG 图像

什么是SVG:
（1）SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

（2）SVG 用于定义用于网络的基于矢量的图形

（3）SVG 使用 XML 格式定义图形

（4）SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

（5）SVG 是万维网联盟的标准

SVG 的优势：
（1）SVG 图像可通过文本编辑器来创建和修改

（2）SVG 图像可被搜索、索引、脚本化或压缩

（3）SVG 是可伸缩的

（4）SVG 图像可在任何的分辨率下被高质量地打印

（5）SVG 可在图像质量不下降的情况下被放大

5.5 Canvas vs SVG：

1.SVG：

（1）SVG 是一种使用 XML 描述 2D 图形的语言

（2）SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器

（3）在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

2.Canvas：

（1）Canvas 通过 JavaScript 来绘制 2D 图形

（2）Canvas 是逐像素进行渲染的。

（3）在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

6.拖放API

阮一峰：拖拉事件

拖放的过程分为源对象和目标对象。源对象是指即将拖动的元素，而目标对象则是指拖动之后要放置的目标位置。

图片、链接、选中的文字可以直接拖拉，网页中元素节点默认不可拖拉，将该节点的 draggable 设置为 true 则可拖拉。

注意，一旦某个元素节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。

7.地理定位

阮一峰：Geolocation API

需要获得用户的同意才能定位。

navigator.geolocation {
    getCurrentPosition:  fn  // 用于获取当前的位置数据
    watchPosition: fn  // 注册监听器，监视用户位置的改变
    clearWatch: fn  // 清除 watchPosition() 注册的位置监视器
}　　　
navigator.geolocation.getCurrentPosition(
    function(pos){ // 定位成功的回调
        console.log('用户定位数据获取成功')
        console.log(arguments);
        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('用户定位数据获取失败');
        console.log(err);
    }
)

8.Web Worker

阮一峰：Web Worker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务可以交由 Worker 线程执行，主线程（通常负责 UI 交互）能够保持流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

9.Web Storage

阮一峰：Storage 接口

cookie、localStorage、sessionStorage 区别

生命周期的区别

cookie：可设置失效时间，未设置则默认关闭浏览器后失效
localStorage：除非被手动清除，否则永久保存在浏览器
sessionStorage：仅在当前会话网页下有效，关闭页面或浏览器就会被清除

存储容量的区别

cookie：可存 4KB 左右
localStorage 和 sessionStorage：可存 5MB 左右

与服务端通信的区别

cookie：每次与服务器端通信都会携带在 HTTP 报文头部中，若使用 cookie 保存过多信息会带来性能的问题
localStorage 和 sessionStorage：仅保存在客户端中，不参与和服务器的通信

易用性不同

cookie：原生的 cookie 接口不友好，需要程序员自己封装
localStorage 和 sessionStorage：原生接口可用接受，也可以再次封装

10.Web Socket

阮一峰：WebSocket

websocket和HTTP的区别。

相同点

HTTP和Websocket都是基于TCP的应用层协议。

不同点

websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。
websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。

联系

websocket建立握手时需要基于HTTP进行传输，建立连接之后呢便不再需要HTTP协议了。

HTML5 新特性

参考链接

HTML5 新特性

1.语义化标签

2.增强型表单包括属性以及元素

3.新增视频 <video> 和音频 <audio> 标签

<video>

<audio>

4.Canvas 图形

5.SVG绘图

5.5 Canvas vs SVG：

1.SVG：

2.Canvas：

6.拖放API

7.地理定位

8.Web Worker

9.Web Storage

10.Web Socket

3.新增视频 `<video>` 和音频 `<audio>` 标签

`<video>`

`<audio>`