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