HTML5在移動互聯網應用中的特性研究

孫華

摘要：隨著移動互聯網技術的不斷發展和創新，HTML5技術儼然已成為下一代互聯網的Web標準。基于HTML5的移動互聯網應用正逐漸成為一種新的應用形式。文章重點介紹了HTML5的部分特性，對基于HTML5的移動互聯網應用的技術進行了闡釋，對HTML5技術對于移動互聯網的發展趨勢及前景做了展望。

關鍵詞：HTML5；移動互聯網；APP； CSS3； Web

1 HTML5概述

HTML5是移動互聯網最前沿的開發技術，運用HTML5可以很好地進行移動應用的開發。目前，蘋果、微軟和谷歌三大移動互聯網巨頭都在支持HTML5，它的發展也給移動互聯網應用帶來全新變化。本文研究HTML5應用于移動互聯網應用開發的核心技術，探討離線緩存、Web Workers、Ajax、地理定位等新技術的應用，并針對HTML5技術現有不足進行探討。文章主要分析了 HTML5適合移動互聯網應用開發的幾大特性。

2 HTML5技術的優勢

HTML5在HTML4的基礎上，又增添了很多元素與屬性，并在一定程度上廢除掉了一些元素與屬性。首先，它擁有較低的開發成本與維護成本；其次，它使用的頁面數據量相對較小，運行更為流暢，耗電量不高，使用時，也可以隨時完成設計，只需要將應用程序打開，則可以直接升級到最新的版本，無需下載并安裝，使用時也可以完成更新，離線的狀態下，也能夠完成緩存，這些都是其他技術無法企及的[1]。總的來說，HTML5在文檔結構、頁面元素、本地存儲、地理位置信息等多個方面都發生了很大變化，而這些變化也相應的提升了HTML5對Web應用的開發支持。像是在媒體支持上，HTML5中增進了video元素與audio元素，視頻、音頻以及動畫等多媒體的播放，再也無需進行第三方插件的安裝。另外，HTML5開發是使用統一的開發環境、開發語言、數據模型，在音頻、視頻和圖像、文本綁定上都存在一整套規范。也就是說在HTML5標準下進行開發，便為“一次開發、多次分發”，無需在HTML5與其他開發環境間自由切換，由此簡化移動網絡的開發，開發成本與維護成本都有所降低。

2.1 離線緩存技術

HTML5 Web Storage API屬于高級版的cookie，不會因數據大小發生變化，且架構以及彈性較好，能夠將數據融入本機ROM中，如遇到突發情況，瀏覽器關閉后，再次打開后數據能夠自動恢復，流量損耗也會減小[2]。

緩存技術也是另外一種方式的后臺“操作記錄”，但是不會對后臺資源造成任何影響，不占用空間，同時程序對硬件設備造成的壓力也會減小，運行更為流暢。

2.2 交互方式較多

HTML5技術的互動功能得以提升，能夠輕松實現拖拽、撤銷等操作，文本選擇更為簡單便捷，例如：Transition代表組件的移動效果；Transform代表組件的變形效果；Animation代表將移動和變形加入動畫支持中。

2.3 加入視覺設計輔助——CSS3

CSS3支持了字體嵌入、版面排版以及動畫功能。比如：豐富的彈性選擇器——Selector；嵌入式的字體——Webfonts；形式多樣的排版選擇——Layout；圓角、漸變、陰影Stlying radius gradient shadow；邊框背景支持——Border background。我們可以使用CSS3完成部分視覺設計，其具有載入速度快的特點，且代碼、圖片數據量小，能夠為用戶節約一定的流量[3]。

2.4 排版形式更為靈活，能夠自由嵌入多媒體內容

HTML4在對文字和音視頻混排的多媒體內容處理上是比較麻煩的，需將文字、圖片、視頻和音頻等內容進行拆分，再解析對應的URL，再以不同方式加以處理，但是基于HTML5網絡互動性的增強，便不會再受到限制。HTML5技術與其他技術不同，其能夠在同一時間處理多媒體內容，利用Canvas對象加載圖片，便于依照數據計算與作圖，支持圖片移動、縮放和旋轉等常規編輯，借助HTML5的視頻標簽功能，輔助Web開發工作者更加容易地添加視頻，從而靈活地展現出各類內容，這就是它的優勢所在。

2.5 隨時隨地分享地理位置信息以及準確的定位技術

為保證位置精確，需要借助GPS，WiFi等實現定位。HTML5技術的應用，能夠更為精準地實現定位，不論是何時何地，都可用任意設備來順暢地完成任務[4]，打破了定位以及導航技術專屬于導航軟件的歷史，無需下載大量的數據包，僅需要使用緩存即可完成，做到隨用隨下。它充分發揮了移動設備對定位上的優勢，推動基于位置服務（Location Based Service，LBS）應用發展。

2.6 Canvas繪圖對移動平臺的繪圖能力的優化

借助Canvas API就能夠完成簡單的熱點圖繪制[5]，同時，也能夠對用戶體驗數據進行收集并分析，輕松實現圖片的旋轉、縮放、移動等功能，例如：Canvas代表2D的繪圖功能支持；Canvas 3D代表3D的繪圖功能支持；向量圖的支持SVG。

2.7 擁有能夠為移動平臺定制的表單元素

表1為IE瀏覽器中顯示的HTML5表單元素與對應鍵盤。只需要輸入例如，就能夠調用不同樣式鍵盤，操作較為方便快捷。

2.8 完善的實時通信支持

由于Web頁面使用的是HTTP協議，所以無法有效實現實時互動的全部功能，僅能夠借助模擬達到實時通信效果，HTML5技術實時通訊支持較為完善，在應用中就能夠將信息內容嵌入，更好地實現實時通信、實時提醒等功能。

2.9 優越的文檔功能

在日常使用的Gmail郵件中，已經實現了通過拖拉等操作將文檔作為附件上傳到郵件中進行發送。而這一項技術就是HTML5文檔功能中的Dragn Drop和File API的應用[6]。

2.10 語意化網絡

語意化網絡即計算機對當前頁面顯示內容有一定理解，這一點可以幫助我們在SB3技術上有進一步的突破。

2.11 更具優勢的跨平臺融合APP開發

按照當前最為流行的兩個操作系統iOS和Android市場的占有率來看，如果未來想要利用智能手機更改應用程序，需要使用Objective-C+CocoaTouch Framework編寫基于iOS的應用程序，也可以使用Java+Android Framework編寫。如果同時使用兩個平臺，這就需要設計兩套不同平臺的程序，這樣一來就不得不設計兩套完全不同的程序。而使用HTML5及CSS3來撰寫Web-based的應用程序，可以同時支援iOS及Android兩種不同的操作系統，只需要維護一份程序即可，所以HTML5技術擁有更強的靈活性和優勢。

3 結語

由于當前HTML5技術的標準還不成熟，處在一個不斷完善的階段，在開發方式上，仍未指定規范性的標準，由此，致使開發應用不規范，程序用戶體驗無法達到原生開發應用效果。為了提升用戶體驗滿意度，則需要對程序進行改進。

目前階段，用HTML5技術作為移動設備硬件接口的API，還無法發揮其作用，在調用移動硬件相關設備時仍較為困難，比如重力感應器、GPS、攝像頭等。不過隨著HTML5技術的不斷發展和完善，這些功能也將一一實現。

[參考文獻]

[1]于洋.淺析HTML5的特點及其在移動Web App中的應用[J].計算機光盤軟件與應用，2014（24）：288.

[2]劉國紅.HTML5在移動互聯網開發中的應用[J].科技廣場，2014（4）：59-62.

[3]嚴偉中.關于HTML5的核心技術研究與應用[J].網絡安全技術與應用，2014（3）：30.

[4]楊鵬，蘆陽.HTML5的發展與移動互聯網的前景[J].電腦編程技巧與維護，2013（10）：67-68.

[5]李偉.HTML5技術在電子商務專業課程改革中的授課方法探討[J].電腦知識與技術，2013（5）：1249-1250.

[6]彭濤，楊煉.基于移動瀏覽器的HTML5核心技術的研究及其應用[J].廣東通信技術，2012（4）：47-50.