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塊

   原理代碼都是一些正則匹配，就不惡心大家了～～