淺談Html5的特性及其發展趨勢

張雪紅

隨著Html5技術的日益成熟和逐步推廣，越來越多的開發者青睞它，把它作為移動App應用的主要開發技術。Html5未來的發展前途一片光明，值得我們去學習。

Html5重新修訂了萬維網的核心語言實踐超文本標記語言（Html），它提高了系統可用性，改善了用戶體驗性，使得基于Html5開發的App具有跨平臺、易開發、易維護、兼容性高等優點，可以取代原生App的效果。 這對于web工程師來說是福音，他們可以充分發揮自己的想象力，創造出更有意義、更華麗流暢的程序。可以說，Html5是web的未來，它將成為移動互聯網領域的主宰者。

筆者將從Html5的定義、特性和發展趨勢等角度來認識學習它。

一、什么是Html5？

Html5是超文本標記語言Html的一個新版本。在這個版本中，不斷推出新功能和新元素，目的為了在移動設備上支持多媒體，改變用戶與文檔的交互方式。例如，在一個基于Html5技術的社會調查網頁中，用戶填寫完答案后就可以直接分享到朋友圈。

如今社會互聯網應用迅猛發展，Html5標準正符合當代的網絡需求，其一次開發、跨平臺（windows、ios、Android）使用的優點，為桌面和移動平臺帶來無縫銜接的豐富內容。可以說，Html5涵蓋著眾多web開發技術，如：Html， CSS和JavaScript等，它是一個綜合技術方向的代名詞，它讓視頻流和音頻數據等服務得到更好的支持，能夠在客戶端本地存儲數據，并且高效地離線運行。

下面通過幾個經典的Html5網頁來感受一下它的魅力。

1、涂鴉板

涂鴉板是使用Html5編寫的網頁版畫圖工具，功能簡單，跟Windows中的畫圖工具類似，使用過程清晰流暢，占用電腦的資源少。

2、美輪美奐的邀請函

百度會議的邀請函改變了以往千篇一律的格式，利用集視聽多重感官于一體的Html5，制作了一份精美的會議邀請函，它將會議內容和星空元素緊密結合在一起：在一個漆黑的天穹里布滿了點點生輝的星星的夜晚，每逢流星經過時，天空中就浮現出一位人物對移動互聯網的看法和愿景，最后是會議的時間地點，并且同時進行在線搶票功能。該案例整體技術含量高、創意新。

3、在線地圖

Html5的地理位置定位這一技術應用于在線地圖，如百度地圖。整個應用非常簡單，點擊App上的按鈕→地理定位，接下來地圖就會自動跳轉到你所處的位置了。

鑒于Html5低成本跨平臺開發并且可兼容本地App特質的優勢， Html5技術在智能移動設備中廣泛應用。那么，Html5究竟有什么特性適合在移動App的應用？現在，我們一起來看看：

1、Html5標簽語義化

Html5豐富的標簽使得網頁的結構一目了然，意義更加明確。

2、本地存儲特性

Html5的本地存儲功能、App Cache、Indexed DB等技術靈活運用于網頁App開發中，以致網頁App啟動時間更短，聯網速度更快。

3、地理位置定位特性

Html5的地理位置定位這一特性可以確定用戶位置。網頁App開發者借助這個特性開發基于位置信息的應用程序，實現更多的用戶體驗功能。Html5的地理位置定位特性，可以根據需要通過緩存的方式下載某個區域范圍內的地圖，非常靈活方便。

4、網頁多媒體特性

支持音頻、視頻自由嵌入，可以靈活使用多媒體形式。與原生App開發的方式對比，Html5的多媒體特性不需要分別拆分開文字、圖片、音頻、視頻等多媒體資源，使用起來非常簡單方便。

5、三維、圖形、特效特性

基于Canvas、CSS3、SVG、WebGL的3D功能應用于網頁App中，在瀏覽器中呈現出來的視覺效果非常震撼人心。Canvas 是 HTML5 新增的元素，它與JavaScript腳本配合使用實現繪圖、制作動畫等功能，甚至是可以實現視頻的實時處理與渲染功能。

6、CSS3特性

與Html之前的版本對比，Html5版本中的CSS3中提供了更多的風格和更強的效果， 在Web排版方面實現更高的靈活性和可控性，大大滿足用戶視覺上的需求。

7、實時通信

Html5中出現了新的通信協議WebSocket協議，實現了在服務器端和客戶端進行異步通信的功能，這種通過“握手”來建立連接的方法解決了以往傳統方案（輪詢、長輪詢、流等）實時性差、資源浪費的問題，將服務器的數據直接推送到客戶端，為用戶提供了很好的體驗效果（如在線證券、在線游戲、設備監控等）。

8、性能與集成特性

Html5的XMLHttpRequest2技術，解決了以往網站和Web應用在變化多端的環境下運行緩慢的弊端，用戶可以很快實現上網體驗的效果。

二、Html5發展趨勢會是怎樣？

從2016年6月在上海舉辦的iWeb峰會中可以了解到Html5技術的廣闊運用場景。Google、英特爾等精彩地分享了他們的前沿技術和合作項目，譬如英特爾運用Html5標準在Web圖形圖像領域、視頻服務領域和機器人領域等前沿開發。谷歌Chrome瀏覽器將Html5標準作為默認選項，微信瀏覽器在技術上支持Html5標準。

這些消息讓網頁開發者感受到Html5技術的發展前景利好，紛紛把它作為移動App應用的主要開發技術。在未來一段時間，Html5未來將朝著以下幾個方向發展：

1、游戲開發是重要領域。

目前游戲市場迅猛發展，尤其是手游領域，這是個相當賺錢的領域，大家對行業發展前景充滿信心。根據白鷺時代公布的市場數據，整個游戲行業呈現增長狀態，尤其是Html5玩家人數已超過1.7億，基于Html5開發的游戲品種兩年內增加了三倍，游戲開發商借助Html5獲益不少。究其原因是開發原聲應用存在著很大的局限性，iOS系統每個充值項目都要向蘋果公司支付30%的傭金，而基于HTML5技術開發Web App，很巧妙避開了這個收費。

2、Html5/css3響應式設計。

現在用戶終端設備的屏幕分辨率范圍很大，從幾百像素（iPhone） 到幾千像素 （大型顯示器），用戶可以使用任何設備網站和移動App。按以往的做法將網站的寬度設置為固定值是萬萬不行的，這就要求web設計能夠根據終端設備的分辨率自動調整大小，也就是“響應式設計”。目前通過Html5和Css3技術，利用Css3的@ media等方法或屬性檢測設備的寬度，擺脫“流”的約束，智能地根據用戶行為以及使用的設備環境進行相對應的響應和調整。

3、設備訪問。

利用Html5技術可以把外部應用（如通訊錄，日歷，照相機，加速器等）跟瀏覽器內部的數據直接連接，解決了原生應用和Web應用之間的屏障。例如AppCan、PhoneGap等框架，這些為Web開發降低了技術門檻。網頁開發者不需要硬件驅動的調用而大費周章地使用JavaScript調用底層，他們將有更多的精力投入到產品和想象力。可以說，有了Html5平臺，它在功能優化方面為網頁開發者提供了更多的選擇，在用戶體驗方面帶來了更多的效果。

4、移動設備的開發優先。

如今，在整個網絡中有大半的流量是移動互聯網占用，移動應用已經成為人們生活中很重要的一部分，它為人們生活帶來了極大的方便性。因此，無論開發什么項目，首先都要考慮移動應用，移動設備的開發優先是發展的趨勢。Html5在未來發展中也要優先考慮在移動設備上更多的應用。

5、離線緩存。

Html5的離線緩存是個新概念，它沖破了傳統“Web應用必須依賴于網絡”這個束縛，利用緩存機制實現在離線狀態下正常使用Web應用。其工作原理是創建一個Appcache新文件，然后通過該文件的解析清單離線存儲網絡資源，這些網絡資源就會像Cookie一樣被存儲了下來。當網絡處于離線狀態時，用戶也可以正常訪問Web應用。另外，使用離線緩存機制，用戶瀏覽網絡的速度更快，并且減少服務器的負載（瀏覽器只下載服務器端更新或更改過的資源）。

三、Html5人才就業前景會怎樣？

從多渠道可以看出巨頭企業都支持Html5標準，Html5憑借其特有的優勢，占據互聯網市場很大的份額，行業發展形勢大好。Html5的就業前景從人才需求量和薪水兩個角度分析，可以說是一片光明。

首先，Html5人才的需求量。經過各大招聘網站的數據分析，用人數量居首位職位是web前端工程師，遠遠超過了Java、ASP和iOS等開發人員。據統計，我國對于Html5前端工程師人員的缺口將達到12萬。目前，一些大型企業谷歌、YouTube、Twith等把視線轉向Html5，這足以確定了Html5在互聯網中的發展前景。

其次，Web前端工程師的薪水。目前來說，與傳統行業對比，Web前端工程師是比較有“錢”途的工作，薪水增加的幅度大。

總的來說，Html5的發展前景是非常可觀的，該行業的市場需求不斷地平穩上漲。目前該行業還處于發展初期， 現在正是入行的最好時機，感興趣的小伙伴們要抓住發展機遇，在Html5行業的發展浪潮中闖出一片天地。