html5新特性總結

新增元素

語義化更好的標籤元素

1. 結構元素：article、aside、header、hgroup、footer、figure、section、nav
2. 其餘元素：video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog、

廢除的元素

純表現元素、部分瀏覽器支持的元素和對可用性產生負面影響的元素

1. 純表現元素：basefont、big、center、font、s、strike、tt、u 用css代替
2. 部分瀏覽器支持的元素：applet、bgsound、blink、marquee
3. 對可用性產生負面影響的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架

新增的API

1. Canvas：首先獲取canvas元素的上下文對象，而後使用該上下文對象中的繪圖功能進行繪製。

   <canvas id="canvas"></canvas>
   <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //設置顏色，默認爲black context.fillStyle = "red"; context.fillRect(0,0,100,100); //默認爲black context.strokeStyle = "blue"; context.strokeRect(120,0,100,100); </script>
   複製代碼

2. SVG：SVG是html5的另外一項圖形功能，是一種標準的矢量圖形，是一種文件格式，有本身的API。

   <svg height=100 width=100>
   	<circle cx=50 cy=50 r=50/>
   </svg>
   複製代碼

3. 音頻和視頻：2大好處,一是做爲瀏覽器原生支持的功能，新的audio和video元素無需安裝；二是媒體元素向web頁面提供了通用、集成和可腳本化控制的API。

   <video src="video.webm" controls>
   	<object data="videoplayer.swf" type="application/x-shockwave-flash">
         <param name="movie" value="video.swf" />
         Your browser does not support HTML5 video.
     </object>
   </video>
   複製代碼

   瀏覽器支持性檢測：用js動態建立，檢測特定函數是否存在。

   var hasVideo = !!(document.createElement('video').canPlayType);
   複製代碼

4. Geolocation：能夠請求用戶共享他們的位置。位置信息來源IP地址、三維座標、GPS、從RFID、Wifi和藍牙到Wifi的MAC地址、GSM或CDMA手機的ID、用戶自定義數據

   navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);
   //更新位置信息
   function updateLocation(position){
     //緯度
     var latitude = position.coords.latitude.
     //經度
     var longitude = position.coords.longitude.
     //準確度
     var accuracy = position.coords.accuracy.
     //時間戳
     var timestamp = position.coords.timestamp.
     }
   //處理錯誤信息
   function handleLocationError(error){
     console.log(error);
   }
   //監聽位置更新
   var watchId=navigator.geolocation.watchPostion(updateLocation,handleLocationError);
   //再也不接收位置更新
   navigator.geolocation.clearWatch(watchId);
   複製代碼

5. Communication：跨文檔消息通訊，能夠確保iframe、標籤頁、窗口間安全地進行跨源通訊。

   //發送消息
   window.postMessage('hello,world','http://www.example.com');
   //接收消息
   window.addEventListener('message',messageHandler,true);
   function messageHandler(e){
     switch(e.origin){
       case 'friend.example.com':
         //處理消息
         processMessage(e.data);
       break;
       default:
       break;
     }
   }
   複製代碼

6. XMLHttpRequest Level2：改進了跨源XMLHttpRequest和進度事件，XMLHttpRequest Level2經過CORS實現了跨源XMLHttpRequest。跨源HTTP請求包含一個Origin頭部，它爲服務器提供HTTP請求的源信息。

7. WebSockets：要鏈接遠程主機，只需新建一個WebSocket實例，提供但願鏈接的對端URL。

8. Forms：新表單元素tel、email、url、search、range、number 將來的表單元素color、datetime、datetime-local、time、date、week、month

9. 新表單特性和函數：placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required

10. 拖放API：draggable屬性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer對象

<div id="draggable" draggable="true">Draggable Div</div>
<script> var draggableElement = document.getElementById("draggable"); draggableElement.addEventListener('dragstart',function(event){ console.log("拖動開始！"); event.dataTransfer.setData('text','hello world!'); }) </script>
複製代碼

11. Web Workers API：Web Workers可讓Web應用程序具有後臺處理能力，對多線程的支持性很是好。可是在Web Workers中執行的腳本不能訪問該頁面的window對象，也就是Web Workers不能直接訪問Web頁面和DOM API。雖然Web Workers不會致使瀏覽器UI中止響應，可是仍然會消耗CPU週期，致使系統反應速度變慢。

12. Web Storage API：sessionStorage(保存在session中，瀏覽器關閉，數據消失)、localStorage(保存在客戶端本地，除非手動刪除，不然一直保存)

    //sessionStorage和localStorage方法一致
    //保存數據
    localStorage.setItem(key,value);
    //讀取數據
    localStorage.getItem(key);
    //刪除單個數據
    localStorage.removeItem(key);
    //刪除全部數據
    localStorage.clear();
    //獲得某個索引的key
    localStorage.key(index);
    複製代碼

    ​