HTML5新特性

（一）  语义化标签

 header,footer,section,article,aside,date,address等等

1.优化代码结构，增强代码的可读性，便于团队维护和开发

2.便于搜索引擎对页面上各部分权重的判断

3.方便其他设备的解析（移动端、阅读器等等）

（二）  Input输入框类型

email、url、number、color、date等等

（三）  表单元素和表单属性

<datalist>：数据列表、<progress>：进度条、<meter>：刻度尺、   <output>：输出内容等等

 属性：placeholder：占位提示文字，mutiple：是否允许多个输入，autofocus：自动获得焦点等等

（四）  视频和音频标签                 

vidoe、audio

WEB中可用的绘图技术：

(1)Canvas绘图：H5原生技术，基于网页画布绘制2D位图绘图技术，善于表现细腻颜色

(2)SVG绘图：H5借鉴技术，基于SVG绘图空间绘制2D矢量图绘图技术，缩放不会失真

(3)WebGL绘图：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js

（五）Canvas绘图         

1.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

2.画布是一个矩形区域，您可以控制其每一像素

3.canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

（六）SVG绘图         

Scalable Vector Graphic，可缩放向量图

纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

Canvas与SVG的不同：

(1)Canvas是位图；SVG是矢量图

(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；

(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

位图：由像素点构成，放大会失真，色彩丰富
矢量图：由几何特征绘制，放大缩小不失真，色彩较少

（七）地理定位

  通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。

（八）拖放API       

    H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。

    H5之后可以对元素的拖放进行设置。

（九） WebStorage   

    Web项目存储数据常用的方案：

   (1)服务器端存储

   1.数据库存储，如商品、用户等核心数据

   2.Session，如用户的登录信息

  (2)客户端存储

  3.Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制

  4.H5 WebStorage存储，如用户偏好、访问历史等安全要求的数据易使用且容量大

（十） Web Worker       

javascript 是单线程的语言，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成，web worker是一个独立于主线程之外的辅助线程，该线程可以加载和运行JS文件。无法访问Window对象和Document对象，和主线程之间的通信也只能通过异步通讯实现。     

背景：Chrome浏览器中发起资源请求的有6个线程；但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。

 问题：若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密)，会发生什么？——执行耗时JS任务过程中，会暂停页面中一切内容的渲染以及事件的处理。

解决方案：H5新特性——Web Worker

Worker的本质：就是一个执行指定任务的独立线程；且该线程可以与UI主线程进行消息数据传递。

（十一）Web Socket

1.WebSocket 是 建立在 TCP 连接上进行全双工通讯协议。
2.WebSocket 允许服务端主动向客户端推送数据。
3.在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

1.全双工，客户端与服务端可以同时相互通信，就如同打电话一样，两边可以同时说话。
2.允许服务端主动向客户端发数据，在以往的通信中是客户端向服务端发送请求，服务端再回复给客户端，一切起源只能是客户端的request，服务端无法主动发送信息给客户端；在websocket中，则可以服务端主动给客户端发送信息。
3.持久性，当服务端跟客户端通信连接成功(即建立起一个管道),这个管道将会一直存在，随时可以传送数据，无需在request。