HTML5的出現(xiàn)，有可能改變目前移動互聯(lián)網(wǎng)應(yīng)用App為王的局面，大大促進(jìn)Web應(yīng)用的發(fā)展，并促進(jìn)新的商業(yè)模式的出現(xiàn)。在國外，美國頂級通信運(yùn)營商AT&T將在2012年推出App Center HTML5應(yīng)用商店。目前，AT&T已經(jīng)公布了面向HTML5應(yīng)用的AP平臺API Catalog，包含130多種API，被劃分為14大類，提供一系列功能，包括Ruby、PHP和Java封裝接口等。Facebook正在計(jì)劃推出一個(gè)基于HTML5的手機(jī)應(yīng)用程序發(fā)行平臺，用網(wǎng)頁瀏覽器取代手機(jī)操作系統(tǒng)，直接進(jìn)行手機(jī)游戲及其他程序的運(yùn)行。在國內(nèi)，中國移動推出的NobleLeader應(yīng)用開發(fā)平臺，支持開發(fā)者通過HTML5進(jìn)行應(yīng)用的開發(fā)和服務(wù)側(cè)編譯，可適用于iOS、Android、Windows Mobile、Symbian等操作系統(tǒng)。

2 HTML5標(biāo)準(zhǔn)體系

HTML5草案的前身為Web Applications 1.0，于2004年由WHATWG提出，于2007年獲W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。2008年1月22日，第一份正式草案發(fā) 布；2011年5月，HTML5 Last Call工作草稿發(fā)布，據(jù)HTML5標(biāo)準(zhǔn)的編者之一Ian Hickson預(yù)期，HTML5候選標(biāo)準(zhǔn)（candidate recommendation）可能在2012年發(fā)布，而正式的推薦版則要等到2022年才會正式發(fā)布。HTML5標(biāo)準(zhǔn)發(fā)展歷程如圖1所示。

HTML5標(biāo)準(zhǔn)由W3C的HTML Working Group負(fù)責(zé)編寫，參與組織眾多，涵蓋了終端廠商，如諾基亞、摩托羅拉、三星、蘋果等；瀏覽器廠商，如Opera、Mozilla、UC等；通信運(yùn)營商，如法國電信、SK Telecom等；互聯(lián)網(wǎng)服務(wù)提供商，如谷歌、百度、Tecent等；操作系統(tǒng)廠商，如Microsoft以及應(yīng)用提供商等。目前，HTML5處于Last Call Working Drafts狀態(tài)的草案包括以下幾方面。

（1）HTML5

描述了HTML5的通用架構(gòu)、語法、元素、Web App API和用戶交互機(jī)制等，是HTML5標(biāo)準(zhǔn)最主要的草案。

（2）HTML+RDFa 1.1

RDFa提供了一組HTML屬性來增強(qiáng)圖像數(shù)據(jù)與機(jī)讀提示，已在早版本的HTML標(biāo)準(zhǔn)中定義，本標(biāo)準(zhǔn)主要定義HTML5對RDFa 1.1的擴(kuò)展。

（3）HTML Microdata

Microdata允許嵌套組name-value配對被添加的文檔，從而為網(wǎng)頁添加額外的語義信息，可用于搜索引擎和瀏覽器。

（4）HTML Canvas 2D Context

定義了二維Canvas的繪圖API。

（5）Polyglot Markup

HTML-Compatible XHTML Documents，即XHTML5的規(guī)范。

（6）HTML5

Techniques for Providing Useful Text Alternatives，即img的alt屬性的規(guī)范描述。

目前，尚處于Working Drafts的草案包括：

·HTML to Platform Accessibility API Implementation Guide；

·HTML5 Differences from HTML4；

·HTML5，Edition for Web Authors；

·HTML，the Markup Language。

HTML5標(biāo)準(zhǔn)采用增量發(fā)展的策略，除去HTML5的基礎(chǔ)規(guī)范外，其他功能都單獨(dú)制定規(guī)范。整個(gè)HTML5的體系如圖2所示。

3 HTML5關(guān)鍵技術(shù)

HTML5是近10年來Web標(biāo)準(zhǔn)的巨大飛躍，同以前的版本不同，并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺。在這個(gè)平臺上，視頻、音頻、圖像、動畫以及與用戶的交互都實(shí)現(xiàn)了標(biāo)準(zhǔn)化[1]。盡管HTML5尚在發(fā) 展 中，但HTML5正 在 改變互聯(lián)網(wǎng)。

3.1 HTML5新特性

3.1.1 語義

（1）語義化的標(biāo)簽

HTML5的一個(gè)重要特性，就是引入了結(jié)構(gòu)化的語義標(biāo)簽，使得HTML5在文檔結(jié)構(gòu)上較HTML4.01更加清晰和易讀。增加的語義標(biāo)簽包括section、article、header、navigation、footer、hgroup、aside，如圖3所示，具體介紹如下。

·header標(biāo)簽：頁面的頭部或文章的頭部。

·navigation標(biāo)簽：導(dǎo)航。

·article標(biāo)簽：獨(dú)立的文章內(nèi)容。

·section標(biāo)簽：網(wǎng)頁中的一節(jié)。

·aside標(biāo)簽：代表說明、提示、邊欄、引用、附件注釋等，也就是敘述主題內(nèi)容以外的內(nèi)容。

·footer標(biāo)簽：頁面的尾部或文章的尾部。

·hgroup標(biāo)簽：對網(wǎng)頁或區(qū)段section的標(biāo)題元素（h1～h6）進(jìn)行組合。

（2）智能表單

表單是網(wǎng)頁中常見的控件（集），擔(dān)負(fù)了用戶和網(wǎng)頁后臺數(shù)據(jù)更新交互的任務(wù)。HTML5對表單的功能進(jìn)行了大幅度的提升，包括以下內(nèi)容。

·眾多的新增input類型，在input的type類型中，新增 了color、E-mail、date、month、week、time、datetime、datetime-local、number、range、search、tel、url等類型。

·新增的input屬性，包括required、autofoucus、pattern、list、autocomplete、placeholder、form等。

·新增的表單標(biāo)簽，包括datalist、keygen、output、meter、progress等。

新增的表單元素大大增強(qiáng)了HTML可表達(dá)的表單形式，使得一些原本需要JavaScript代碼實(shí)現(xiàn)的控件，如顏色選擇器（color）、日期選擇器（datetime、time等）、搜索框（search）、密鑰生成器（keygen）、進(jìn)度指示條（progress）等，可以直接選擇HTML5的某一表單類型（type）或標(biāo)簽得以實(shí)現(xiàn)；一些需要JavaScript代碼輔助的校驗(yàn)功能，如數(shù)字校驗(yàn)、電話校驗(yàn)、郵件地址校驗(yàn)、正則表達(dá)式校驗(yàn)等，也可直接由HTML實(shí)現(xiàn)。同時(shí)，智能表單可幫助應(yīng)用程序增強(qiáng)用戶的使用體驗(yàn)，如內(nèi)容提示、自動獲取焦點(diǎn)、自動完成功能以及根據(jù)輸入內(nèi)容自動切換鍵盤等。

（3）微數(shù)據(jù)

一個(gè)頁面的內(nèi)容，如人物、事件或評論不僅要給用戶看，還要讓機(jī)器可識別。目前機(jī)器智能程度有限，要讓其知會特定內(nèi)容含義，需要使用規(guī)定的標(biāo)簽、屬性名以及特定用法等。HTML5微數(shù)據(jù)是一種標(biāo)記內(nèi)容以描述特定類型的信息，如評論、人物信息或事件。每種信息都描述特定類型的項(xiàng)，如人物、事件或評論。微數(shù)據(jù)的引入，使語義Web的處理更加簡單。

3.1.2 多媒體

（1）音視頻

在HTML5中，增加了

（2）Canvas畫布

Canvas元素是HTML5最令人激動的新增功能之一。正如其名稱所示，Canvas元素在Web頁面上創(chuàng)建了一個(gè)矩形的繪圖表面，其高度和寬度分別通過height和width屬性給定。Canvas元素是一個(gè)塊級元素，其內(nèi)容是針對不支持Canvas元素的瀏覽器和其他用戶代理的備用內(nèi)容。備用內(nèi)容不應(yīng)該包含任何塊級元素，但卻可以包含圖像和其他的內(nèi)聯(lián)標(biāo)記。Canvas應(yīng)用編程接口（Canvas application programming interface）提供了數(shù)十個(gè)方法或函數(shù)，以繪制線條、弧線以及矩形，用樣式和顏色填充區(qū)域，書寫樣式化文本，操作圖像和視頻以及其他有趣的活動。

（3）WebGL

在HTML5之前，3D物體形象在網(wǎng)頁上不能直接展示，必須使用非標(biāo)準(zhǔn)的特殊網(wǎng)頁語言語法或者通過運(yùn)行額外的瀏覽器插件實(shí)現(xiàn)。HTML5和WebGL提供了一種技術(shù)方案，使程序員可以直接在網(wǎng)頁上展示物體的3D形象，并且這種展現(xiàn)可以直接使用設(shè)備的圖形處理器的處理能力，其繪圖性能能夠得到保證。WebGL也通過Canvas畫布進(jìn)行3D圖形的展現(xiàn)。

3.1.3 離線存儲

（1）Web Storage

HTML5提供了與HTTP session cookies相似的穩(wěn)健的Web存儲屬性，分別是sessionStorage和localStorage。sessionStorage用以存儲瀏覽最頂層環(huán)境生存周期內(nèi)的數(shù)據(jù)，如瀏覽器Tab或窗口持續(xù)打開周期內(nèi)的數(shù)據(jù)；localStorage用以存儲周期較長、多頁面以及多瀏覽器session內(nèi)的數(shù)據(jù)，這些數(shù)據(jù)可以一直保存甚至持續(xù)到重啟瀏覽器或者電腦。

（2）Indexed DB

Indexed DB是HTML5中的另外一種數(shù)據(jù)存儲方式，用來幫助應(yīng)用在本地存儲結(jié)構(gòu)比較復(fù)雜的數(shù)據(jù)。它遵循W3C的同源策略，每個(gè)域名擁有獨(dú)立的大存儲空間；每個(gè)大存儲空間內(nèi)，又可以根據(jù)當(dāng)前域名下的頁面腳本創(chuàng)建多個(gè)數(shù)據(jù)庫；每個(gè)數(shù)據(jù)庫可以包含多個(gè)表（ObjectStore）；每個(gè)表都是一個(gè)json對象列表，可以存儲多個(gè)json對象，比如{"name":"jinjiang","age":26}。在Indexed DB中，所有的操作都在事務(wù)（transaction）中完成，事務(wù)由JavaScript API完成操作。

（3）Application Cache

HTML5定義了當(dāng)用戶的網(wǎng)絡(luò)被斷開后，如何讓它們繼續(xù)與網(wǎng)頁程序和文檔進(jìn)行交互。用戶可以通過提供一個(gè)manifest文件定義哪些文件需要被緩存，哪些需要在離線時(shí)用折衷方案替代。當(dāng)用戶訪問這個(gè)頁面時(shí)，支持的瀏覽器會獵取一個(gè)manifest版本，它將下載并緩存所有涉及的文件，并且當(dāng)manifest相對于用戶上次瀏覽的版本有變化時(shí)，將會再次下載并緩存所有的文件。通常該特性用于創(chuàng)建網(wǎng)頁離線版應(yīng)用程序。

3.1.4 通信

（1）Web Socket

HTML5 Web Socket規(guī)范定義了Web Socket API，支持頁面使用Web Socket協(xié)議與遠(yuǎn)程主機(jī)進(jìn)行全雙工的通信。HTML5 Web Socket以最小的開銷高效地提供Web連接。相較于經(jīng)常需要使用推送實(shí)時(shí)數(shù)據(jù)到客戶端甚至通過維護(hù)兩個(gè)HTTP連接來模擬全雙工連接的舊的輪詢或長輪詢（Comet）來說，極大地減少了不必要的網(wǎng)絡(luò)流量與延遲。

（2）Web Notification

目前瀏覽器依然采用嚴(yán)格的沙盒工作模式，這種模式把瀏覽器和桌面的通信隔離開。HTML5 Web Notification技術(shù)提供了一種可以跨越沙盒的通知API，可以使得用戶在瀏覽任何網(wǎng)頁，甚至在瀏覽器最小化的狀態(tài)下都可收到來自Web應(yīng)用的桌面通知。Notification目前仍處于草稿狀態(tài)。為保障安全性，此功能的使用需要用戶授權(quán)。

3.1.5 設(shè)備及應(yīng)用API

（1）Drag & Drop（拖拽）、File API

目前許多網(wǎng)頁程序，如Gmail、QQ郵箱已經(jīng)支持通過拖拽方式將檔案作為郵件附件。這個(gè)業(yè)務(wù)功能的實(shí)現(xiàn)就是使用了Drag&Drop以及File API。

（2）Geolocation API

HTML5的定位API可以綜合使用GPS、Wi-Fi、手機(jī)等多種定位方式，定位更為精準(zhǔn)、靈活。定位API和離線存儲的結(jié)合，可實(shí)現(xiàn)豐富的地圖應(yīng)用。

3.1.6 多線程

在HTML5中提出了工作線程（Web Worker）的概念，并且規(guī)范出工作線程的三大主要特征：能夠長時(shí)間運(yùn)行（響應(yīng)）、理想的啟動性能以及理想的內(nèi)存消耗。工作線程允許開發(fā)人員編寫能夠長時(shí)間運(yùn)行而不被用戶中斷的后臺程序，以執(zhí)行事務(wù)或者邏輯，并同時(shí)保證頁面對用戶的及時(shí)響應(yīng)。

到目前為止，W3C中的工作線程規(guī)范已經(jīng)定義了一系列公共接口，允許Web程序開發(fā)人員在主頁面中創(chuàng)建并運(yùn)行后臺線程的運(yùn)行腳本，這將使得線程級別的消息通信成為現(xiàn)實(shí)。

3.2 瀏覽器支持現(xiàn)狀

HTML5技術(shù)目前正在開發(fā)階段，各個(gè)瀏覽器廠商對HTML5的關(guān)鍵技術(shù)和特性的支持不盡相同。根據(jù)HTML5 test網(wǎng)站的測試情況[2]，目前對HTML5支持較好的桌面瀏覽器版本包括Maxthon 3.3、Chrome 18、FireFox 11、Opera 11.6、Safari 5.1以及IE9等；對HTML5支持較好的平板電腦瀏覽器版本包括RIM Tablet OS 2.0、Opera Mobile 12.00、FireFox Mobile 10、iOS 5.0&5.1、Android 4.0等；對HTML5支持較好的手機(jī)瀏覽器包括Opera Mobile 12.00、FireFox Mobile 10、iOS 5.0&5.1、Blackberry OS 7、Android 4.0等。

以桌面瀏覽器為例，在HTML5的各項(xiàng)特性中，支持程度較好的包括結(jié)構(gòu)化語義標(biāo)簽、Canvas、Geolocation API、session Storage、local Storage、Application Cache、Web Workers等。對于智能表單特性，Opera 11.6的支持程度最好；而對于音視頻特性，WebGL、Maxthon的支持程度最好。

4 HTML5應(yīng)用模式

隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，移動終端和平臺呈現(xiàn)出前所未有的發(fā)展態(tài)勢。面對眾多的終端設(shè)備和平臺，設(shè)計(jì)師和開發(fā)人員不得不在產(chǎn)品的展現(xiàn)和體驗(yàn)的一致性方面做出妥協(xié)舉措，并在適配平臺的過程中浪費(fèi)了大量的精力。

HTML5標(biāo)準(zhǔn)的出現(xiàn)彌補(bǔ)了Web應(yīng)用的諸多短板，使得Web應(yīng)用可以實(shí)現(xiàn)一些本地應(yīng)用的功能特性。而Web應(yīng)用的天然跨平臺特性，使得產(chǎn)品的上線和版本更新與平臺無關(guān)，開發(fā)更方便，因此吸引了大量的開發(fā)者開發(fā)基于HTML5的移動應(yīng)用。就目前來說，基于HTML5的應(yīng)用模式共包括3種：Web App、Hybrid App和Web應(yīng)用商店。

4.1 Web App

HTML5引入了眾多新特性，如多線程、文件操作、離線存儲、用戶交互等，使得HTML5應(yīng)用能夠?qū)崿F(xiàn)一些原本只有本地應(yīng)用才能實(shí)現(xiàn)的功能。

移動終端的屏幕大小和操作方式與PC大相徑庭，傳統(tǒng)的Web頁面瀏覽方式不能滿足移動用戶的使用需求，因此一種全新的概念Web App出現(xiàn)了。Web App基于Web技術(shù)，仍然依賴于瀏覽器的解析，但和傳統(tǒng)的網(wǎng)頁不同，它的界面和操作方式直接適配于手機(jī)屏幕，同時(shí)，借助于HTML5的Application Cache等新特性，可以使用戶獲得與本地應(yīng)用一致的使用體驗(yàn)。目前部分移動瀏覽器已支持隱藏瀏覽器的地址欄、狀態(tài)欄等帶有瀏覽器特征的界面元素，使得Web App看起來和一般的本地應(yīng)用已無差別。

Web App的產(chǎn)生不僅提供給應(yīng)用開發(fā)商一種新的應(yīng)用模式，同時(shí)也改變著移動瀏覽器和智能終端平臺的設(shè)計(jì)和呈現(xiàn)。如UC、騰訊Mobile、Opera Mobile均在瀏覽器主頁上以應(yīng)用圖標(biāo)的方式呈現(xiàn)Web應(yīng)用，使得瀏覽器使用起來更像一個(gè)新的操作系統(tǒng)桌面。而對于阿里云操作系統(tǒng)，直接將Web App和本地應(yīng)用集成在一起，無論是桌面上的快捷應(yīng)用圖標(biāo)，還是云市場中的云應(yīng)用下載，用戶已經(jīng)很難判斷出此應(yīng)用是Web App還是本地應(yīng)用。

4.2 Hybrid App

雖然Web App應(yīng)用逐漸縮小和本地應(yīng)用的差距，但目前兩種應(yīng)用模式仍然存在不同，主要體現(xiàn)在以下方面。

（1）分發(fā)渠道

Native App和Web App的分發(fā)渠道非常不同。各大平臺的供應(yīng)商（基本上就是指iOS和Android）通過App Store和App Market控制Native App的分發(fā)；而HTML5則是通過開放Web的規(guī)則——鏈接分發(fā)，通常是搜索引擎或是社交平臺。

（2）盈利模式

Web App和Native App的盈利模式也有所不同。Native App通過移動平臺的“一鍵付費(fèi)”模式將應(yīng)用貨幣化，盡管需要將部分收益分配給下載平臺提供商，但是對用戶而言，這種直接的支付方式還是相當(dāng)方便的。相反，Web App則趨向于通過廣告獲取收益，因?yàn)橹苯又Ц赌Ｊ饺狈τ脩舻挠押眯浴?/p>

（3）功能

雖然目前Web App已具備一些本地應(yīng)用的特征，但到目前為止，Web App還無法像Native App那樣實(shí)現(xiàn)很多功能。

（4）發(fā)布自由

Web是一個(gè)完全開放的媒體，允許各種資源自由發(fā)布；而App Store則更像一個(gè)“有限制”的環(huán)境，沒有充分體現(xiàn)Web的自由性。

在這些差異性里面，盈利模式和功能方面的差異仍然使得部分開發(fā)者在選擇Web App和本地應(yīng)用之間猶豫不決，因此出現(xiàn)了一種Hybrid App，即混合應(yīng)用。這種應(yīng)用以本地應(yīng)用的形態(tài)出現(xiàn)（用戶仍然需要安裝應(yīng)用），但應(yīng)用內(nèi)部的大量邏輯卻使用Web技術(shù)來實(shí)現(xiàn)，同時(shí)，Web技術(shù)無法實(shí)現(xiàn)的功能可通過調(diào)用本地API來實(shí)現(xiàn)。這種應(yīng)用也稱為套殼App（shell App），具有一定程度的跨平臺特性，同時(shí)可利用Native App的發(fā)布渠道和盈利模式。目前，一些通用的開發(fā)框架（如PhoneGap）就是采用了這種方案。

這種“混合”App能夠利用兩種技術(shù)的優(yōu)勢，這也意味著越來越多的開發(fā)資源正在朝著HTML5轉(zhuǎn)變。隨著HTML5的提升，這種“封裝過”的App最終將無須再套上一層Native的殼。

4.3 Web應(yīng)用商店

應(yīng)用商店是移動互聯(lián)網(wǎng)產(chǎn)業(yè)鏈的關(guān)鍵節(jié)點(diǎn)。而Web App在應(yīng)用的發(fā)布、版本更新和收費(fèi)模式上都與本地應(yīng)用不同，這些將使得應(yīng)用商店的形態(tài)在未來發(fā)生變化。HTML5的成熟將促進(jìn)Web App應(yīng)用商店的出現(xiàn)，而Web應(yīng)用商店也是一種新的Web網(wǎng)頁應(yīng)用的形式。

相比傳統(tǒng)的應(yīng)用商店，Web應(yīng)用商店具備下列優(yōu)勢：

·覆蓋更多的平臺，擁有更廣泛的發(fā)布群體；

·應(yīng)用無須安裝，始終保持最新版本，Web應(yīng)用商店后臺不用考慮應(yīng)用歷史版本的管理；

·可輕松具備應(yīng)用試用功能，而無須開發(fā)者開發(fā)試用版本；

·廣告的植入更加簡單，Web應(yīng)用商店可在任何位置、任何時(shí)間輕松加入在線廣告，并且利用HTML5的用戶交互技術(shù)，使得廣告可以直接根據(jù)用戶的需求為用戶提供服務(wù)（目前其他的廣告形式還無法做到這一點(diǎn)）。

5 結(jié)束語

HTML5技術(shù)的出現(xiàn)，使得移動互聯(lián)網(wǎng)應(yīng)用呈現(xiàn)出Web應(yīng)用本地化、本地應(yīng)用Web化的發(fā)展趨勢，改變了目前移動應(yīng)用App為王的格局，模糊了瀏覽器和操作系統(tǒng)之間的界限。隨著HTML5技術(shù)的發(fā)展，各種創(chuàng)新型的移動互聯(lián)網(wǎng)應(yīng)用不斷出現(xiàn)，從而形成新的應(yīng)用模式，也帶動了新的商業(yè)模式的出現(xiàn)。

然而，HTML5技術(shù)仍然在不斷發(fā)展中，離成熟還有一段很長的距離。Web App是否能撼動Native App在移動互聯(lián)網(wǎng)中的代表地位還不得而知。但降低開發(fā)成本、增強(qiáng)用戶體驗(yàn)、擁有更便捷的應(yīng)用入口是移動互聯(lián)網(wǎng)應(yīng)用提供者和開發(fā)者永遠(yuǎn)的目標(biāo)。可以預(yù)見，在HTML5技術(shù)成熟的時(shí)候，豐富的應(yīng)用內(nèi)容、簡單/標(biāo)準(zhǔn)的開發(fā)工具、成熟的商業(yè)模式將是各種應(yīng)用模式?jīng)Q勝的關(guān)鍵。

1 馬新強(qiáng),孫兆,袁哲等.Web標(biāo)準(zhǔn)與HTML5核心技術(shù)研究.重慶文理學(xué)院學(xué)報(bào),2010,12(6)

2 The HTML5 Test.http://www.HTML5test.com/index.html

3 HTML5.維基百科.http://zh.wikipedia.org/zh-cn/HTML_5,2012