有關(guān)HTML5中的語法元素相信大家已經(jīng)看到過不少介紹了，但是關(guān)于HTML5的APIs的介紹就不那么常見了，而HTML5規(guī)范主要就是由這些APIs構(gòu)成的。

51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解

HTML5的標(biāo)準(zhǔn)有兩個(gè)版本，一個(gè)是由W3C發(fā)布的，另一個(gè)則是由WHATWG發(fā)布的。WHATWG現(xiàn)有的HTML5標(biāo)準(zhǔn)中補(bǔ)充了一些W3C標(biāo)準(zhǔn)中沒有的APIs（這些APIs其實(shí)W3C也有涉及，只是被單獨(dú)列在一個(gè)補(bǔ)充標(biāo)準(zhǔn)中了）。

除了規(guī)范中介紹的APIs以外，還有一些相關(guān)的APIs也遵循了HTML5的標(biāo)準(zhǔn)，并也聲稱自己是HTML5的API。有些APIs已經(jīng)被采用了一段時(shí)間了，但是仍然沒有被明確列入規(guī)范之中，而有些HTML5則著手準(zhǔn)備對(duì)其進(jìn)行改進(jìn)。

這篇文章并不準(zhǔn)備從代碼的角度去介紹這些APIs，而是會(huì)分析他們的用途以及進(jìn)展情況。還會(huì)給出一些參考信息方便讀者更加深入地了解自己感興趣的內(nèi)容。

HTML5標(biāo)準(zhǔn)中的APIs

首先看看W3C的HTML5規(guī)范中的APIs。

多媒體API

多媒體API是HTML5的多媒體元素中的一部分，其中包括 視頻 和 音頻 元素。這些元素本身實(shí)現(xiàn)起來并不復(fù)雜，但是這些APIs可以使用JavaScript方法，這是很多人不太了解的。其中包括play() 、pause()、load()  以及canPlayType() 這些方法。許多方法不僅可以使用多媒體類型屬性，還可以使用許多其他的屬性（例如poster 屬性），這些方法在視頻元素中尤其常見。通過在API中使用合適的事件和屬性，開發(fā)者能夠?qū)崿F(xiàn)多媒體的自定義控制。

想要了解更多信息，可以看看下面的文章。
 

• Media Elements, W3C 
   
• Everything you need to know about HTML5 video and audio, dev.opera, Simon Pieters 
   
• HTML5 audio and video: what you must know, NetTuts (a chapter from Introducing HTML5), Bruce Lawson and Remy Sharp 
   

文本軌跡 API

文本軌跡 API（原文為text tracks API）常常和多媒體API一起配合使用。這個(gè)API可以與視頻 和音頻 元素的text tracks（例如副標(biāo)題或是字幕）交互。你可以獲取一個(gè)多媒體元素的文本軌跡長(zhǎng)度或是數(shù)量，或者是它的文本軌跡（副標(biāo)題、字幕、描述、章節(jié)以及元數(shù)據(jù)）、類型 （kind）、語言 （language）、狀態(tài) （readyState）、模式 （mode）和標(biāo)簽 （label）。

當(dāng)瀏覽器使用本地字幕時(shí)，這個(gè)API就派上用場(chǎng)了，WebVTT就是一個(gè)很好的例子。你還可以快速瀏覽以下這些資源：
 

• Text Track API, W3C 
   
• Web Media Text Tracks Community Group 
   
• Media Multiple Text Tracks API Wiki, W3C 
   
• The YouTube Caption API, Speech Recognition, and WebVTT Captions for HTML5, Google I/O 2011, Naomi Black, Cynthia Boedihardjo, and Jeffrey Posnick 
   
• Captionator.js Polyfill 
   
• WebVTT and video subtitles, Ian Devlin 
   
• Video subtitling and WebVTT, HTML5 Doctor, Tom Leadbetter 
   

拖放功能

拖放API一直受到很多關(guān)注。它最初是隨著Microsoft的IE5推出的，現(xiàn)在Firefox、Safari 和Chrome都已經(jīng)支持這一功能了。那么這個(gè)API究竟是做什么的呢？

就像它的名字所說的，這個(gè)API在瀏覽器中實(shí)現(xiàn)本地的拖放功能。只需要將一個(gè)可拖放 屬性設(shè)置為true ，用戶就可以移動(dòng)瀏覽器中任意一個(gè)元素了。你還可以在目標(biāo)區(qū)域加入一些事件句柄，用來告訴瀏覽器哪些區(qū)域能夠放置用戶拖放的元素。

如果不局限在瀏覽器內(nèi)部使用這一功能，這個(gè)API的作用將更加凸顯。使用拖放API，用戶可以將桌面上的一副圖像直接拖入瀏覽器中，或是將瀏覽器中的一個(gè)新建圖標(biāo)拖到桌面上，并且能夠自動(dòng)加載相應(yīng)的內(nèi)容信息形成一個(gè)新的應(yīng)用程序快捷方式。

下面的文章更加深入地介紹了這一拖放功能。
 

• Drag and drop API, W3C 
   
• Native, Drag and Drop, HTML5 Doctor, Remy Sharp 
   
• Drag and Drop, MDN 
• The drag and drop API, HTML5 Laboratory, Ian Devlin 
   

離線Web Apps/Apps緩存

隨著native apps（包括移動(dòng)和桌面版本）和web apps的界限變得越來越模糊，應(yīng)用程序支持離線訪問已經(jīng)成為大勢(shì)所趨。離線Web應(yīng)用程序（Offline Web Applications）規(guī)范詳細(xì)介紹了這一技術(shù)，即應(yīng)用程序緩存功能。

應(yīng)用程序緩存功能是通過一個(gè)簡(jiǎn)單的列表文件實(shí)現(xiàn)的，該文件列出了應(yīng)用程序離線工作所需的文件。這樣發(fā)布者就能夠確保他們的網(wǎng)站可以支持離線訪問了。這個(gè)列表文件能夠引導(dǎo)瀏覽器保留一份文件的副本，這樣用戶下次就可以脫機(jī)訪問這些內(nèi)容了。當(dāng)用戶沒有接入網(wǎng)絡(luò)時(shí)，瀏覽器就將本地的副本顯示給用戶。理論上講，即使是在地鐵或是其他網(wǎng)絡(luò)不佳的環(huán)境下，你也能完成郵件編寫工作了，甚至還可以玩web版的“憤怒的小鳥”。

現(xiàn)在瀏覽器已經(jīng)對(duì)這一功能有了很好的支持，尤其是在移動(dòng)領(lǐng)域（Firefox、Safari、Chrome、Opera、iPhone和Android），你現(xiàn)在就可以使用這一功能了。下面是一些相關(guān)的資料：
 

• Offline Web Applications, W3C 
   
•  
   
• Running your web applications offline with HTML5 AppCache, dev.opera, Shwetank Dixit 
   
• Go offline with application cache, HTML5 Doctor, Mike Robinson 
   
• Offline Browsing in HTML5 with ApplicationCache, Sitepoint, Malcolm Sheridan 
   
• Get off(line), Web Directions, John Allsopp 

UI

和離線功能一樣，UI也是HTML5核心標(biāo)準(zhǔn)的一部分。其中有些功能有必要在這里提一提，比如contenteditable屬性，在創(chuàng)建web apps就非常有用。IE瀏覽器從5.5版本推出以后就一直支持這一屬性，還有其他五大主流瀏覽器都支持這一屬性。將該屬性設(shè)置為true表示相應(yīng)的元素是可編輯的。發(fā)布者可以在本地存儲(chǔ)中加入這一屬性，從而跟蹤文檔的變化。

想了解更多信息，可以查看最新的標(biāo)準(zhǔn) ，但是其中有些部分已經(jīng)被劃分給HTML Editing APIs 了。

歷史

瀏覽器的后退按鈕是一個(gè)使用非常頻繁的工具。HTML5的歷史API（History API）可以幫助開發(fā)者管理用戶的瀏覽器會(huì)話的歷史狀態(tài)。

以前的歷史API只是幫用戶回到之前的頁(yè)面或是之后的頁(yè)面，以及檢查歷史信息的長(zhǎng)度。而HTML5則加入了增刪用戶歷史信息的方法，可以保存部分?jǐn)?shù)據(jù)用于重構(gòu)一個(gè)頁(yè)面狀態(tài)，或是更新URL時(shí)無需刷新頁(yè)面。這個(gè)API使用起來非常簡(jiǎn)單，并且可以用它來開發(fā)非常復(fù)雜的應(yīng)用程序。
 

關(guān)于歷史API的更多信息：
 

•  History API, W3C 
   
• Manipulating History for Fun & Profit, Dive into HTML5, Mark Pilgrim 
   
• Introducing the HTML5 History API, dev.opera, Mike Taylor & Chris Mills 
   
• Manipulating the browser history, MDN 
   

MIME類型和協(xié)議處理程序注冊(cè)

這個(gè)API允許網(wǎng)站將自己注冊(cè)成為一些方案的處理程序。下面是一個(gè)使用了registerProtocolHandler方法的例子：一個(gè)在線電話消息服務(wù)可以將自己注冊(cè)成一個(gè)SMS方案的處理程序，這樣當(dāng)用戶點(diǎn)擊這個(gè)鏈接以后，就能訪問它的Web網(wǎng)站（W3C HTML協(xié)議 ）了。

SMS 、TEL 和IRC 這類方案被列入白名單。網(wǎng)站還可以使用registerContentHandler方法將自己注冊(cè)為特定內(nèi)容的處理程序。

想要了解MIME類型和協(xié)議處理程序注冊(cè)方法，可以先看看HTML5規(guī)范 。

WHATWG規(guī)范中的APIs

現(xiàn)在，已經(jīng)介紹過W3C和WHATWG兩個(gè)版本HTML5協(xié)議中共有的一些標(biāo)準(zhǔn)了。接著將介紹一些附加的APIs，這些APIs被WHATWG收錄在正式的協(xié)議文檔中，而W3C則將他們細(xì)分為一些更加易于管理的協(xié)議。這兩個(gè)版本中的APIs用途和主要內(nèi)容都是相同的。

• Canvas 2D 環(huán)境 —— 可以用來在瀏覽器中繪圖。如果不使用2D Context API，canvas 將無法繪圖。它就像是刷子、調(diào)色板和顏料，將所有這些繪圖工具都集成在了一起。這個(gè)API是非常常用的，幾乎所有的canvas文章中都有它的不同方法和事件的介紹。這里還有更加詳細(xì)的介紹：WHATWG Canvas Element, 2D Context  以及W3C HTML Canvas 2D Context Spec 。
• 跨文檔和通道的消息通訊 ——跨文檔通訊定義了一種在文檔之間通訊的方法，它不受源區(qū)域的限制。同樣的，通道消息傳遞使用了獨(dú)立的代碼實(shí)現(xiàn)直接通訊。更多介紹：WHATWG HTML, Cross document messaging 、WHATWG HTML Cross channel messaging 以及W3C HTML5 Web Messaging spec 。
• Microdata ——在文檔中新增了一個(gè)語義層，方便搜索引擎、瀏覽器等可以提取網(wǎng)頁(yè)信息并提高瀏覽器的服務(wù)質(zhì)量。更多介紹： WHATWG HTML, Microdata 以及W3C Microdata spec 。
• Web Workers ——這是一個(gè)在后臺(tái)運(yùn)行的JavaScript調(diào)用API。它能夠在不影響前端界面的情況下長(zhǎng)期運(yùn)行任務(wù)，從而避免任務(wù)執(zhí)行造成的頁(yè)面響應(yīng)延遲。更多介紹： WHATWG HTML, Web Workers 和W3C Web Workers Spec 。
• Web 存儲(chǔ) ——有點(diǎn)類似于cookies。更多介紹： WHATWG HTML, Web Storage 和W3C Web Storage spec 。
• Web Sockets ——允許頁(yè)面使用WebSocket協(xié)議在瀏覽器和服務(wù)器間發(fā)送兩路消息。更多介紹： WHATWG Web Sockets 和W3C Web Socket API 。
• Server sent events 服務(wù)器端發(fā)送事件  ——允許服務(wù)器以DOM事件的形式向?yàn)g覽器發(fā)送推送通知。 更多介紹： WHATWG HTML, Server-sent events 和W3C Server-Sent Events 。

遵循HTML5規(guī)范的APIs

由于篇幅限制，這里不會(huì)將所有與HTML5相關(guān)的APIs都列舉出來。其中一些常常被誤以為是HTML5標(biāo)準(zhǔn)APIs的內(nèi)容有地理位置 （Geolocation）、索引數(shù)據(jù)庫(kù)（Indexed DB）、選擇器（Selectors），以及文件系統(tǒng)API（Filesystem API）。
 

W3C成員Mike Smith 編著了一個(gè)全方位介紹web平臺(tái)和瀏覽器技術(shù) 的綜合列表，非常值得一讀。

演示示例和瀏覽器的支持情況

文章之前提到了部分APIs目前得到瀏覽器支持的情況，但是瀏覽器對(duì)APIs的支持是在不斷變化的，想要了解最新的進(jìn)展，可以查看caniuse 。如果你發(fā)現(xiàn)有些APIs目前瀏覽器尚不支持，也不必灰心。這里還有一個(gè)補(bǔ)充功能用來幫助你模擬本地行為?？梢圆榭?a >HTML5 Cross Browser Polyfills 了解這一功能。

你還可以看看Remy Sharp 的 HTML5 Demos ，通過查看這些源碼進(jìn)一步了解文章介紹的APIs。

總結(jié)

這里只是粗略地介紹了一下這些非常有用而且功能強(qiáng)大的APIs。如果想要更加深入地了解這些APIs的細(xì)節(jié)，你需要通過代碼去學(xué)習(xí)，這將給你帶來不一樣的體驗(yàn)。有些APIs目前還沒有完全成熟，希望這篇文章能夠讓你對(duì)此更加有興趣，并對(duì)這些將加入到瀏覽器中的功能更感興趣。

原文：http://webapptrend.iteye.com/blog/1386423

【編輯推薦】

1. 開發(fā)者視角論述HTML 5平臺(tái)的7大特點(diǎn)
2. 用Web socket和Node.js實(shí)現(xiàn)HTML 5畫布的實(shí)時(shí)繪圖
3. 知識(shí)普及：天煞的HTML 5到底是個(gè)什么東西
4. 使用Node.js開發(fā)多人玩的HTML 5游戲
5. HTML 5應(yīng)用實(shí)戰(zhàn)：靈活拖拉文件