H5新特性有哪些？怎么理解语义化

H5新增了很多新的特性，这也成了我们面试的时候面试官喜欢问的一个问题，那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性，下面我们就来讲一下

H5十大新特性

1、语义化标签，为我们提供了更好的页面结构，比如<header><section><nav><aside>,这些标签可以让我们更直观的知道你要表达的是什么，再更进一步讲是让浏览器更好，更直观的去解析你的页面

2、增强型表单（表单新增属性）

placeholder(我们常用的表单占位符)，step(为输入域规定合法的数字间隔)，

max(设置表单最大输入值),min（设置表单最小输入值）,autofocus（表单加载完后自动获取焦点）,multiple（文件上传控件，设置之后可允许多文件上传），required(设置之后文本框必须有数据输入才能提交)，pattern(正则表达式的校验)，例如

<input  max="100" min="1" step="2" autofocus="autofocus" multiple  required pattern="/d+"/>

还有很多，这里就不一一细写了

3、视频和音频：<video><audio>

4、canvas绘图，canvas对我们的动画效果实现的作用是非常大的，它用于生成图像，他本身就是一个画布，我们真正操控的是他的API，在上面生成图像。它的底层是一个个像素，基本上是一个用以用javascript操作的位图，他与svg的区别在于，canvas是脚本调用各种方法生成图像，SVG则是一个xml文件，通过各种子元素生成图像，canvas的具体操作实现这里就不累赘了

5、SVG，是一种可伸缩的矢量图，这也就对应出了它另外一个特性，就是无论你怎么改变它的尺寸或者放大缩小都不会影响到他的图形质量

6、Geolocation API用于获取用户的地理位置，下面贴上W3C的一个例子

7、拖放API（Drag）在元素标签内设置draggable属性为true，元素即可拖动，规定元素被拖动时发生了什么？和放到何处需要我们做函数处理，同时这里也会涉及到浏览器默认事件处理的问题

8、webworker，是一种运行在后台的javascript脚本，不会影响页面性能，比如我们的一个计数，统计用户登录次数，一些统计场景，但是这样会很消耗CPU,还有就是IE浏览器不支持，由于他是外部文件，无法访问到javascript的window对象，document对象，parent对象

9、webstorage,包含两种机制

1、sessionStorage会话存储，窗口关闭数据不存在，窗口之间不共享，大小限制5K

2、localStorage持久性存储，除非手动删除，浏览器窗口共享，大小限制5K

方法：

setItem()添加

getItem()获取

clear()清除所有

removeItem()删除指定项

10、websocket

websocket是H5提供的一种在单个TCP连接上进行的双工通讯的协议。在websocket中浏览器跟服务器中需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输