新增標簽

1、embed

embed標簽是html5新增的標簽，用來嵌入內(nèi)容，比如插件等，常用于視頻文件的播放(為外部應用程序定義容器)。

這篇文章介紹了embed的常用屬性，基本都是定義播放器的一些設(shè)置的，自動播放loop、開始時間starttime等：

http://www.cnblogs.com/lgx5/p/5714494.html

注：一些視頻文件swf的大小只有幾KB，但是視頻本身是比較大的，自己的理解是視頻網(wǎng)站只是將視頻的地址封裝進了swf文件，然后鏈接到真正的視頻地址進行播放。

2、artical section aside

都是block塊級元素。

artical一般是指獨立的一篇文章，一般不與頁面上的其他內(nèi)容有關(guān)聯(lián)，一般用于新聞文章、論壇的帖子、用戶評論等，可以獨立被外部引用，里面包含自己的頭、尾、內(nèi)容。

section類似于div，但是更語義化，將內(nèi)容分塊，一般section都包含標題。

aside側(cè)邊欄，一般用于定義文章artical的引用、注解等部分。

3、progress

進度條

............................懶得寫了，見jsfiddle實例....................................

其他新增內(nèi)容

1、本地存儲 localStorage sessionStorage

支持setItem getItem removeItem clear等方法，而且支持點操作符和[]訪問某字段。clear清除所有的數(shù)據(jù)項。

與cookie的對比：

cookie是為http請求服務的，與服務器進行交互；

localStorage sessionStorage是為本地數(shù)據(jù)存儲而服務的，localStorage是永久本地存儲，sessionStorage是會話級別的，會話關(guān)閉即失效；

cookie有大小限制及跨域限制，且每次請求都會被攜帶；

2、web worker

通過創(chuàng)建子線程，解決js單線程會阻塞的問題。

我的理解就是把一些耗費性能的計算等操作，分離出來到一個單獨的js中，通過創(chuàng)建new Worker()對象，創(chuàng)建當前線程的一個子線程，不影響主線程上的DOM操作等，等計算結(jié)束，子線程通知到主線程，進行內(nèi)容更新及子線程銷毀等操作。

子線程的執(zhí)行上下文不是window，所以無法獲取window等對象，無法操作DOM，但可以通過postMessage方法與主進程進行互相通信，通過監(jiān)聽worker.onmessage方法獲取傳遞的數(shù)據(jù)，主進程可以通過worker.terminate() 關(guān)閉子進程。worker對象一經(jīng)銷毀，則無法重新啟動，需要重新新建Worker對象來啟動。

3、geolocation支持用戶地理位置的獲取

經(jīng)用戶同意才被允許獲取。用于導航，可以監(jiān)控用戶地理位置的移動等。

navigator.geolocation.getCurrentPosition(success(position), error());

//第一個函數(shù)正確返回地理位置：經(jīng)緯度、海拔等,position.coords.latitude position.coords.longitude

//錯誤處理函數(shù)

//監(jiān)控用戶位置的變化

navigator.geolocation.watchPosition clearWatch()

4、websocket

基于TCP協(xié)議，雙向的全雙工通信，服務端和客戶端可以相互推送消息。除了IE外，其他瀏覽器基本支持了WebSocket()接口(不同于ajax，websocket允許跨域通信)。相關(guān)的API如下：

send + onopen + onmessage + onerror + onclose等。相關(guān)的庫有socket.io，一般用于聊天應用等。

5、canvas

定義畫布，一個矩形框，但是真正的圖像繪制需要用js來完成。

相關(guān)的繪制方法有：fillRect() arc moveTo lineTo drawImage等。

6、postMessage

解決跨域、跨窗口消息傳遞問題。原理是：html5新增的API，不管同不同源，都可以向其他window對象發(fā)送消息。postMessage只管消息的發(fā)送，而不用等待消息處理完成，僅僅是將消息插入到對應窗口的消息隊列中即可(不阻塞程序)。

// 調(diào)用postmessage的window對象為要接收消息的那個window對象

// origin指明要接收消息的window對象所在的域，不需指明時，可以設(shè)置 *

window.top.postMessage(data, origin);

//要接收消息的window對象注冊message事件

window.addEventListener('message', function(e){

//e.data e.source e.origin

})

7、history API

實現(xiàn)無刷新跳轉(zhuǎn)，減少網(wǎng)絡請求、改進用戶體驗等。

history.pushState(data, title, url)

history.replaceState(data, title, url)

window.onPopState(event)

8、FileReader定義異步讀取本地文件的API，詳見：

9、Mutation observer 監(jiān)控DOM元素的變化，防止xss攻擊。

// Firefox和Chrome早期版本中帶有前綴

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// 選擇目標節(jié)點

var target = document.querySelector('#some-id');

// 創(chuàng)建觀察者對象

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {

console.log(mutation.type);

});

});

// 配置觀察選項:

var config = { attributes: true, childList: true, characterData: true }

// 傳入目標節(jié)點和觀察選項

observer.observe(target, config);

// 隨后,你還可以停止觀察

observer.disconnect();

總結(jié)

以上是生活随笔為你收集整理的html标签api,html5新增标签+API介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。