H5新特性总结

Web前端最新的官方标准无疑就是es6和H5了，es6之前已经说过了（多是一些语法糖），现在来总结一下H5给我们来了哪些新“朋友”吧~

1.video/radio  视频/音频

2.canvas 绘画

3.geolocation 定位

4.WebSocket 前后端双向通讯

5.localStorage/sessionStorage代替cookie本地存储

6.文件拖拽（drag事件+dataTransfer+FileReader）

7.WebWorker js多线程,提高性能

8.WebSQL 前端数据库(已被官方弃用)

9.manifest 离线缓存

---

同时也新增了一些标签，常用的有：header、nav、section、aside、footer

为了使得IE6-8兼容H5的新标签：

我们会引入如下代码：

<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->

说明一下：

html5shiv.js是用来使得IE6-8能够识别H5标签，其原理很简单，就是用创建自定义标签的方法来使得IE可以识别H5标签。

自定义标签在一般的高级浏览器可以直接写入HTML中，例如：

<myLabel>
    内容内容内容～～～～
</myLabel>

但是IE6~8只能通过js的createElement:

document.createElement('myLabel');

//实际上htmlshiv.js的核心就是这个,随便列几个H5标签
var e = "article, aside, audio, canvas, footer, nav, section, video".split(', ');
for(var i=0;i=e.length,i++){
    document.createElement(e[i]);
}

  response.js是用来兼容css3的media的：

　原理其实很简单：发ajax请求css代码，然后分析所有media query的min-width和max-width的语法，当window.resize时候引入对应的css块

原理代码都是一些正则匹配，就不恶心大家了～～