前言：尋找寫作靈感？中文期刊網(wǎng)用心挑選的HTML5應(yīng)用技術(shù)與標(biāo)準(zhǔn)，希望能為您的閱讀和創(chuàng)作帶來靈感，歡迎大家閱讀并分享。

1引言   HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）是為網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息設(shè)計的一種標(biāo)記語言。早在1991年，TimBerners-Lee編寫了一份叫做“HTML標(biāo)簽”的文檔，里面包含了大約20個用來標(biāo)記網(wǎng)頁的HTML標(biāo)簽。這為Web的誕生與發(fā)展奠定了基礎(chǔ)。隨后不到10年的時間中，HTML先后由IETF，W3C制定了2.0，3.0，4.0多個升級版本，特別是1999年底W3C的4.01版本是之后10多年來，Web上沿用至今的HTML標(biāo)準(zhǔn)規(guī)范。這期間，HTML始終作為一種Web頁面的信息編輯于呈現(xiàn)語言而存在。直到2008年，html5第一版草案之后，HTML的主要功能與使命才發(fā)生了一次變革性的飛躍———W3C宣布其未來數(shù)年的愿景為構(gòu)建以HTML5為核心的下一代開放Web應(yīng)用平臺。   2移動終端HTML5Web應(yīng)用的技術(shù)架構(gòu)   HTML5標(biāo)準(zhǔn)由W3C與WHATWG聯(lián)合開發(fā)制定，目前已基本成型，預(yù)計將于今年成為W3C的候選標(biāo)準(zhǔn)。而通常所說的HTML5Web應(yīng)用技術(shù)規(guī)范，是指廣義上一系列的HTML5，CSS以JavaScriptAPI擴(kuò)展規(guī)范所構(gòu)成一個Web應(yīng)用平臺體系。新的HTML5系列技術(shù)提供了增強(qiáng)了的富媒體、富內(nèi)容功能，特別是加入了適合構(gòu)建移動Web應(yīng)用的富應(yīng)用特性（見圖1）。從技術(shù)功能上看，HTML5Web平臺所涉及的技術(shù)規(guī)范大致可歸類為圖形、多媒體、設(shè)備適配、表格、用戶交互、數(shù)據(jù)存儲、個人信息管理、硬件集成、網(wǎng)絡(luò)、通信、封裝、性能與優(yōu)化等方面。這些技術(shù)功能基本上構(gòu)成了一個完整的、以終端瀏覽器為應(yīng)用運(yùn)行平臺的HTML5Web應(yīng)用的技術(shù)架構(gòu)（見圖2）。在移動終端的Web應(yīng)用運(yùn)行環(huán)境中，其核心部分為終端瀏覽器運(yùn)行引擎，其中又包括Web核心引擎和JavaScriptAPI擴(kuò)展兩大模塊。Web核心引擎主要負(fù)責(zé)Web應(yīng)用代碼中的HTML，CSS，JavaScript腳本，加載、處理、渲染頁面布局以及其中的文本、圖像、視頻、音頻等多媒體元素；而JavaScriptAPI擴(kuò)展則完成Web應(yīng)用中所調(diào)用的API的具體功能調(diào)用執(zhí)行，通過終端系統(tǒng)能力、網(wǎng)絡(luò)交互能力將通用的Web應(yīng)用API接口功能在終端上實(shí)現(xiàn)。后面章節(jié)將主要針對這兩大模塊所涉及的技術(shù)功能，結(jié)合W3C的HTML5Web應(yīng)用的一系列現(xiàn)有標(biāo)準(zhǔn)規(guī)范工作，分析目前移動終端上HTML5Web應(yīng)用的技術(shù)能力架構(gòu)。   3終端Web應(yīng)用的核心Web技術(shù)標(biāo)準(zhǔn)   3.1圖像   (1)2D矢量圖形（SVG，ScalableVectorGraphics）   SVG提供一套基于XML的標(biāo)記語言用于描述二維矢量圖形。由于圖像是由一組幾何圖形構(gòu)成的，它們能夠按照用戶的需求任意縮放，因此非常適合在屏幕尺寸受限的移動設(shè)備上的開發(fā)。它們也很容易被動畫化，可創(chuàng)建非常高級、平滑的用戶界面。SVG為HTML5帶來了新的可能性，例如將高級圖像過濾效果通過SVG過濾器應(yīng)用在多媒體內(nèi)容上。相應(yīng)標(biāo)準(zhǔn)：SVGTiny1.2，SVG2.0。   (2)2D編程性   API作為對SVG所提供的描述性方式的補(bǔ)充，HTML5中的<canvas>元素提供了一套2D編程性的API，非常適于以內(nèi)存低耗用的方式處理圖像。該API不僅可以渲染圖像，也能夠用于進(jìn)行圖片處理和分析。相應(yīng)標(biāo)準(zhǔn)：HTMLCanvas2DContext。   (3)CSS圖像樣式效果   SVG和HTML都能夠使用CSS（CascadingStyleSheets，層疊樣式表）進(jìn)行排版；特別是CSS3，作為一套規(guī)范集合，提供了大量的新特征，使得創(chuàng)建圖像效果更加簡便，如圓角、復(fù)雜的背景圖片、陰影效果、旋轉(zhuǎn)內(nèi)容、動畫、3D效果等。   相應(yīng)標(biāo)準(zhǔn)：   ●圓角、復(fù)雜的背景圖片、陰影效果：CSSBack-groundsandBorders。   ●2D變換：CSS2DTransformsModuleLevel3。   ●3D效果：CSS3DTransformsModuleLevel3。   ●動畫效果：CSSAnimationsModuleLevel3，CSSTransitionsModuleLevel3，TimingControlforScript-basedAnimationsAPI。   (4)可下載的字體集   好的字體對于構(gòu)建吸引人的圖形界面起到重要作用，但移動設(shè)備發(fā)行時通常只有有限的字體集合。WOFF（WebOpenFontFormat）可以便捷地通過樣式表自動下載字體，同時保持下載字體集的大小僅限于渲染界面實(shí)際所需。相應(yīng)標(biāo)準(zhǔn)：WOFFFileFormat1.0。   3.2多媒體   媒體播放   HTML5通過添加<video>和<audio>這兩個標(biāo)簽，顯著的提升了Web頁面對多媒體內(nèi)容的集成。這兩個標(biāo)簽分別允許嵌入視頻和音頻內(nèi)容，讓W(xué)eb開發(fā)者能夠擺脫插件，而更加自由的與這些媒體內(nèi)容交互。相應(yīng)標(biāo)準(zhǔn)：HTML5videoelement，HTML5audioelement。   3.3設(shè)備適配   移動設(shè)備不僅與傳統(tǒng)的電腦差別迥異，而且彼此之間也有許多不同。比如屏幕尺寸、分辨率、鍵盤類型、媒體攝錄能力等。   (1)設(shè)備信息：DeviceDescriptionRepositoryAPI，一個統(tǒng)一的服務(wù)器側(cè)的API，允許Web開發(fā)者從眾多的設(shè)備信息數(shù)據(jù)庫中，獲取正在訪問他們網(wǎng)站的設(shè)備的配置信息數(shù)據(jù)。   (2)基于CSS的適配：CSSMediaQueries，提供了一套機(jī)制允許Web頁面根據(jù)一些設(shè)備特性（包括屏幕分辨率）適配布局和行為。CSSDeviceAdaptation定義了一套CSS指令，參照所持設(shè)備的尺寸，指定每個布局所適用的尺寸。   3.4表單   在大多數(shù)基于Web的應(yīng)用中，使用HTML構(gòu)建豐富的表格是用戶輸入的基礎(chǔ)。由于有限的鍵盤，在移動設(shè)備上的文本輸入對大多數(shù)用戶來說還是件麻煩的事情。HTML5通過提供新的表格控制模式，優(yōu)化用戶輸入數(shù)據(jù)的方式，而部分地解決這個問題：   (1)時日和時間實(shí)體：HTML5DateandTimeStateofInput元素，能夠利用專門的表單控件（如<inputtype=“date”>）而直接調(diào)用本地的日歷控件。#p#分頁標(biāo)題#e#   (2)定制化文本實(shí)體（tel，E-mail，url）：HTML5Telephone，E-mailandURLStateofInput元素，如<inputtype=“email”>，<inputtype=“tel”>，<inputtype=“url”>可以用于優(yōu)化用戶輸入復(fù)雜數(shù)據(jù)的方式，例如可以使用專門的虛擬鍵盤，或是訪問設(shè)備上的相應(yīng)的數(shù)據(jù)記錄（地址簿、書簽等）。   (3)輸入模式：HTML5Pattern屬性，既可引導(dǎo)用戶輸入，也可避免服務(wù)器側(cè)驗證或基于JavaScript的驗證。   (4)輸入提示：HTML5Placeholder屬性，通過插入提示文本控件中預(yù)期輸入的內(nèi)容類型而引導(dǎo)用戶輸入。   (5)文本實(shí)體的預(yù)定義值：HTML5Datalist元素，能夠創(chuàng)建自由文本輸入控件，具有用戶可從中選擇的預(yù)定義值。   3.5封裝   應(yīng)用用戶體驗的一個重要因素關(guān)聯(lián)到用戶如何感知到應(yīng)用永久可用（甚至在離線狀態(tài)時，這對于移動設(shè)備尤為重要），以及如何分享和傳布，典型的即通過應(yīng)用商店購買。這些通過封裝打包應(yīng)用已足以解決。   Web平臺提供兩種互補(bǔ)的方式封裝打包Web應(yīng)用：   (1)HTML5ApplicationCache：通過一個Manifest定義瀏覽器需要在其Cache中緩存的文件資源，以支持離線狀態(tài)時對Web應(yīng)用的訪問。   (2)W3CWidgets系列規(guī)范：定義了一套以Zip文件形式Web應(yīng)用的框架，其中的配置文件是附件特征的基礎(chǔ)，如應(yīng)用的簽名、對高級API的訪問控制、受限的網(wǎng)絡(luò)使用等。相應(yīng)標(biāo)準(zhǔn)：WidgetsPackaging&Configuration，Dig-italSignaturesforWidgets，WidgetAccessRequestPolicy。   4終端Web應(yīng)用的擴(kuò)展API標(biāo)準(zhǔn)   4.1用戶交互   (1)基于觸控的交互：TouchEventsSpecification，雖然傳統(tǒng)的交互方式（鍵盤、鼠標(biāo)輸入）仍然能夠在Web平臺上使用，但是對于觸控輸入的特有處理，是創(chuàng)建良好用戶體驗的關(guān)鍵。 (2)振動：VibrationAPI，許多移動設(shè)備使用觸覺反饋（如振動）來創(chuàng)建新的交互形式（如在游戲中）。   (3)通知：WebNotifications，移動設(shè)備被用戶隨身攜帶，許多移動用戶依賴他們的設(shè)備進(jìn)行事件的提醒或通知。   4.2多媒體   (1)媒體捕捉HTMLMediaCapture則定義了一套基于標(biāo)記的機(jī)制，以使用攝像頭和麥克風(fēng)訪問捕捉的多媒體內(nèi)容，這是移動設(shè)備上非常通用的功能。而WebReal-TimeCommunications工作組與DeviceAPI工作組也正在一同制定一套API，能夠直接操作來自攝像頭和麥克風(fēng)的媒體流。相應(yīng)標(biāo)準(zhǔn)：HTMLMediaCapture，WebRTC1.0：Real-timeCommunicationBetweenBrowsers。   (2)媒體分析、修改HTML5有兩個附件的API提供了多媒體操作的能力。Canvas2DContextAPI可以調(diào)整圖像以及編輯視頻。類似的方式，Audio工作組也在制定一個API能夠修改音頻內(nèi)容，以及分析、合成聲音。相應(yīng)標(biāo)準(zhǔn)：HTMLCanvas2DContext，WebAudioAPI，MediaStreamProcessingAPI。   4.3數(shù)據(jù)存儲   許多應(yīng)用的關(guān)鍵組件就是保存狀態(tài)、導(dǎo)出內(nèi)容以及將來自系統(tǒng)上其它文件和服務(wù)的數(shù)據(jù)進(jìn)行集成的能力。   (1)簡單數(shù)據(jù)存儲：WebStorage，提供LocalStor-age和SessionStorage兩個基本機(jī)制，能夠分別無限期的或是基于一個瀏覽器Session保存數(shù)據(jù)。   (2)文件系統(tǒng)數(shù)據(jù)交互：   ●FileAPI，加載文件的內(nèi)容。   ●FileWriterAPI，保存或修改文件。   ●FileSystemsAPI，訪問更多的常用文件操作，包括文件目錄管理。   (3)數(shù)據(jù)庫查詢/更新：IndexedDatabaseAPI，定義一套具有數(shù)值和分層對象的數(shù)據(jù)庫，能夠非常高效地查詢和更新。   4.4個人信息管理   應(yīng)用能夠通過與已有數(shù)據(jù)記錄集成而獲益，在移動設(shè)備上，地址簿和日歷尤為有用的信息源。對應(yīng)標(biāo)準(zhǔn)：ContactsAPI，CalendarAPI。   4.5硬件集成   移動設(shè)備上集成了許多傳感器，如GPS，加速計，光亮感應(yīng)器，麥克風(fēng)，攝像頭，溫度計等，使得它們成為真實(shí)與虛擬世界的重要橋梁。   (1)地理位置：GeolocationAPI，提供了一套通用接口用于設(shè)備定位，獨(dú)立于底層的定位技術(shù)（GPS，Wi-Fi網(wǎng)絡(luò)標(biāo)識、蜂窩網(wǎng)絡(luò)中的三角定位等）。該API的第二版增加了獲取將用戶當(dāng)前位置與城市地址相匹配的能力。   (2)運(yùn)動感應(yīng)：DeviceOrientationEvent，獲取運(yùn)動方向和加速度。   (3)電池狀態(tài)：BatteryStatusAPI。   (4)通用感應(yīng)器：SensorAPI，對Sensor類硬件通用的數(shù)據(jù)獲取和監(jiān)控接口。(5)攝像頭/麥克風(fēng)媒體流：WebRTC1.0：Real-timeCommunicationBetweenBrowser。   4.6網(wǎng)絡(luò)   網(wǎng)絡(luò)連接性是移動設(shè)備的主要資源之一：Web是內(nèi)容的浩瀚寶庫，也是一個近乎無限處理能力的源泉，克服了移動設(shè)備的這兩方面的缺陷。   (1)HTTP(s)網(wǎng)絡(luò)API：XMLHttpRequest，是一個廣泛部署的API，使用HTTP和HTTPs協(xié)議從Web服務(wù)器加載內(nèi)容。   (2)跨域請求：Cross-OriginResourceSharing默認(rèn)情況下，瀏覽器是不允許來自一個單獨(dú)Web頁面的跨域請求的，該規(guī)則保護(hù)用戶，防止一個Web站點(diǎn)濫用用戶的證書并盜取用戶在其它Web站點(diǎn)上的數(shù)據(jù)。站點(diǎn)可以通過使用Cross-OriginResourceSharing機(jī)制而推出上述規(guī)定，開放了Web應(yīng)用和服務(wù)之間更加寬泛的合作。#p#分頁標(biāo)題#e#   (3)服務(wù)器推送：Server-SentEventsAPIXMLHttpRequest對于客戶端發(fā)起的網(wǎng)路請求很有用，但由于移動設(shè)備網(wǎng)絡(luò)能力有限，并且網(wǎng)絡(luò)請求耗用電池（有時還有賬單費(fèi)用），因而更適合于使用服務(wù)器發(fā)起的請求。該API允許觸發(fā)基于（通過HTTP和其它協(xié)議）推送通知的DOM事件。   (4)雙向連接：WebSocketAPI，在IETFWebSocket協(xié)議基礎(chǔ)之上構(gòu)建，較之于XMLHttpRequest，提供一套雙向連接的、更加靈活的、資源占用較低的網(wǎng)絡(luò)連接。   (5)在線狀態(tài)：HTML5onLineDOM狀態(tài)標(biāo)簽，確定是否連接存在以及可用的網(wǎng)絡(luò)類型。   (6)網(wǎng)絡(luò)性質(zhì)：NetworkInformationAPI，確定網(wǎng)絡(luò)的性質(zhì)，如是否為WIFI或3G連接。   4.7通訊   除了連接到在線服務(wù)，一個好的移動應(yīng)用平臺最重要的因素，應(yīng)該讓用戶之間、設(shè)備之間以及應(yīng)用之間進(jìn)行通信。   (1)E-mail，SMS，MMS及附件：MessagingAPI，能夠通過鏈接（sms：，mms：及mailto：URI范式）創(chuàng)建、發(fā)送信息，并對于添加附件以及發(fā)送的成功率具有更多的控制。   (2)應(yīng)用內(nèi)通信：HTML5WebMessaging，允許Web應(yīng)用相互之間通信。(3)P2P通信及流媒體：WebRTC1.0：Real-timeCommunicationBetweenBrowsers。   4.8性能和優(yōu)化   由于有限的CPU能力，以及更突出的有限的電池能力，移動設(shè)備特別需要關(guān)注性能問題。   (1)計時控制：NavigationTiming，ResourceTim-ing，PerformanceTimeline，UserTiming。   (2)頁面可見性檢測：PageVisibilityAPI，確定一個Web頁面是否正被顯示，也可用于針對Web應(yīng)用需求而調(diào)配資源的使用，例如當(dāng)頁面最小化時減少其網(wǎng)絡(luò)活動。   (3)動畫優(yōu)化：TimingControlforScript-basedAni-mationsAPI，有助于減少播放動畫所需資源的使用。   (4)電池狀態(tài)：BatteryStatusEvents，允許將資源的使用調(diào)整適合當(dāng)前移動設(shè)備電池的可用電量級別。   (5)多線程：WebWorkers，類似線程的機(jī)制，通過將占用資源最多的操作卸載至后臺處理，而讓用戶界面保持響應(yīng)。   (6)MobileWebApplicationBestPractices：該指南提供一些如何構(gòu)建在移動設(shè)備上能夠良好運(yùn)行的Web應(yīng)用的通用建議，特別考慮到優(yōu)化的需求。   5HTML5Web應(yīng)用帶來新的變革   相對于目前占據(jù)主流的終端操作系統(tǒng)上的本地應(yīng)用，HTML5Web應(yīng)用主要程序代碼、數(shù)據(jù)內(nèi)容托管在服務(wù)器端，在終端側(cè)主要依托于瀏覽器進(jìn)行輕量級的交互運(yùn)行，因而理論上具有跨終端系統(tǒng)、跨設(shè)備類型的優(yōu)勢。這種新的應(yīng)用模式對于移動終端生態(tài)系統(tǒng)將帶來新的變革。對于應(yīng)用開發(fā)，采用HTML，JavaScript等Web語言開發(fā)應(yīng)用，難度低、易上手；此外，無需考慮不同終端系統(tǒng)、不同系統(tǒng)版本，僅需在服務(wù)器端維護(hù)一份最新版本，隨時可以向用戶提供最新的應(yīng)用與服務(wù)，大大降低了開發(fā)維護(hù)成本。因而，Web應(yīng)用開發(fā)者無需將主要精力耗費(fèi)在代碼編寫維護(hù)上，可以更多的專注于應(yīng)用內(nèi)容創(chuàng)新上。對于應(yīng)用消費(fèi)，同一款應(yīng)用可以在不同的終端設(shè)備之間保持一致體驗，數(shù)據(jù)內(nèi)容同步；應(yīng)用的獲取、更新無需用戶主動的多次下載、安裝，僅需保存Web應(yīng)用的url，隨時訪問的都是最新版本和內(nèi)容。此外，HTML5提供的應(yīng)用間的通信機(jī)制，也能為用戶帶來新的功能模式。對于應(yīng)用平臺，Web應(yīng)用可以自由靈活的在Web平臺上、維護(hù)、更新，無需再經(jīng)過當(dāng)前AppStore模式的漫長審核周期的時間代價，以及高比例的應(yīng)用分成代價。同時，利用HTML5內(nèi)嵌的多媒體、交互等新特性，可以借助Web搜索引擎，Web廣告，SNS等互聯(lián)網(wǎng)模式，進(jìn)行更加多元化、個性化的Web應(yīng)用營銷，擺脫當(dāng)前AppStore的單一、低效的應(yīng)用排名推廣模式。此外，HTML5Web應(yīng)用對于瀏覽器插件、終端應(yīng)用預(yù)置模式乃至終端操作系統(tǒng)平臺等方面，都將帶來沖擊。而對于傳統(tǒng)的功能手機(jī)，WebTV，車載終端等凡在互聯(lián)網(wǎng)終端設(shè)備，則將注入新的Web應(yīng)用的活力。   6結(jié)束語   HTML5作為下一代Web技術(shù)已成為不爭的事實(shí)，而以其為核心的開放Web平臺亦以已成為大勢所趨。但這一目標(biāo)的實(shí)現(xiàn)，還需要終端應(yīng)用生態(tài)系統(tǒng)中的各方面，互聯(lián)網(wǎng)公司、終端廠商、運(yùn)營商，尤其是廣大應(yīng)用開發(fā)者及用戶的支持與投入。移動Web應(yīng)用作為一種新的終端應(yīng)用形式，將與現(xiàn)在主流的移動終端本地應(yīng)用融合發(fā)展，兩種形式的應(yīng)用在未來發(fā)展更多是互補(bǔ)而非取代關(guān)系。隨著HTML5系列技術(shù)標(biāo)準(zhǔn)的不斷成熟，瀏覽器支持功能的不斷豐富，以及Web引擎對JavaScript等Web代碼執(zhí)行性能的不斷提高，HTML5Web應(yīng)用無論從功能、效率、用戶體驗等諸多方面，都將于當(dāng)前終端設(shè)備上的本地應(yīng)用相媲美，甚至在某些特性上有所超越。