HTML5 新特性

1、语义化标签

标签语义化的作用

• 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
• 同时利于被搜索引擎解析，有利于 SEO。有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 便于团队开发和维护，语义化更具可读性

标签	说明
header	表示文档的头部区域
footer	表示文档的尾部区域
nav	表示文档的导航部分
section	表示文档的某一节
article	表示文章
main	表示文档的主要内容区域

2、增强型表单

可以通过 input 的 type属性 指定类型是number|date|url|search|range|email，同时还添加了 placeholder 和 required 等表单属性。

3、媒体元素

新增了 audio 和 video 两个媒体相关的标签，可以让开发人员不必以来任何插件就能在网页中嵌入浏览器的音频和视频内容。

4、canvas 绘图

canvas 绘图指的是在页面中设定一个区域，然后通过 JS 动态的在这个区域绘制图形。

5、svg 绘图

在 JavaScript/svg 相关知识点查看

6、地理定位

使用 getCurrentPosition()方法来获取用户的位置，从而实现地理位置的定位。

7、拖放 API

通过给标签元素设置属性 draggable 值为 true，能够实现对目标元素的拖动。

8、Web Worker

Web Worker 通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行，worker 线程运行结束之后会把结果返回给主线程，worker 线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说 JS 具备了多线程的能力，而实浏览器作为宿主环境提供了一个 JS 多线程运行的环境。

9、Web Storage

cookie、localStorage、sessionStorage 区别

TIP

Cookie 是网站为了辨别用户身份，进行会话跟踪而存储在用户本地终端上的数据。

• 存储的数据只能是字符串格式；
• 在同一域名下，存储文件的大小一般为 4KB，数量为 50 条；
• 时效性，在一定时间后，cookie 会被销毁，最短的有效期为当浏览器关闭时，cookie 就被销毁；
• 安全性，采用同源策略，即同协议，同域名，同端口，在此条件下，才能进行读取。

生命周期

• cookie：可以设置失效时间，如果没有设置则是默认关闭浏览器后失效。
• localStorage：除非手动清除，否则永久保存。
• sessionStorge：仅在当前会话网页有效，关闭页面标签或浏览器就会被清除。

存储容量差别

• cookie 存储数据大概在 4kb 左右
• sessionStorage|localStorage 可以保存 5M 左右信息。

与服务器端通信

• cookie：每次与服务端通信都会携带在 HTTP 头中，如果使用 cookie 保存过多会带来性能问题。
• sessionStorage|localStorage：仅仅存在与客户端中，不参与和服务器通信。

易用性

• cookie：原生接口不友好，需要自行封装
• sessionStorage|localStorage：原生的可以使用，也可再次封装

10、WebSocket

TIP

websocket 和 HTTP 的区别?

• 相同点：HTTP 和 Websocket 都是基于 TCP 的应用层协议。
• 不同点：websocket 是双向通信协议，模拟 socket 协议，可以双向发送和接受消息，HTTP 是单向的，意思是说通信只能由客户端发起。 websocket 是需要浏览器和服务器通过握手建立连接，但是 HTTP 是浏览器向服务器发送连接，服务器预先不知道这个连接。
• 联系：websocket 建立握手时需要基于 HTTP 进行传输，建立连接之后呢便不再需要 HTTP 协议了。