淺談Html5的特性及其發(fā)展趨勢

張雪紅

隨著Html5技術(shù)的日益成熟和逐步推廣，越來越多的開發(fā)者青睞它，把它作為移動App應(yīng)用的主要開發(fā)技術(shù)。Html5未來的發(fā)展前途一片光明，值得我們?nèi)W習。

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

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

一、什么是Html5？

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

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

下面通過幾個經(jīng)典的Html5網(wǎng)頁來感受一下它的魅力。

1、涂鴉板

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

2、美輪美奐的邀請函

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

3、在線地圖

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

鑒于Html5低成本跨平臺開發(fā)并且可兼容本地App特質(zhì)的優(yōu)勢， Html5技術(shù)在智能移動設(shè)備中廣泛應(yīng)用。那么，Html5究竟有什么特性適合在移動App的應(yīng)用？現(xiàn)在，我們一起來看看：

1、Html5標簽語義化

Html5豐富的標簽使得網(wǎng)頁的結(jié)構(gòu)一目了然，意義更加明確。

2、本地存儲特性

Html5的本地存儲功能、App Cache、Indexed DB等技術(shù)靈活運用于網(wǎng)頁App開發(fā)中，以致網(wǎng)頁App啟動時間更短，聯(lián)網(wǎng)速度更快。

3、地理位置定位特性

Html5的地理位置定位這一特性可以確定用戶位置。網(wǎng)頁App開發(fā)者借助這個特性開發(fā)基于位置信息的應(yīng)用程序，實現(xiàn)更多的用戶體驗功能。Html5的地理位置定位特性，可以根據(jù)需要通過緩存的方式下載某個區(qū)域范圍內(nèi)的地圖，非常靈活方便。

4、網(wǎng)頁多媒體特性

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

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

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

6、CSS3特性

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

7、實時通信

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

8、性能與集成特性

Html5的XMLHttpRequest2技術(shù)，解決了以往網(wǎng)站和Web應(yīng)用在變化多端的環(huán)境下運行緩慢的弊端，用戶可以很快實現(xiàn)上網(wǎng)體驗的效果。

二、Html5發(fā)展趨勢會是怎樣？

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

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

1、游戲開發(fā)是重要領(lǐng)域。

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

2、Html5/css3響應(yīng)式設(shè)計。

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

3、設(shè)備訪問。

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

4、移動設(shè)備的開發(fā)優(yōu)先。

如今，在整個網(wǎng)絡(luò)中有大半的流量是移動互聯(lián)網(wǎng)占用，移動應(yīng)用已經(jīng)成為人們生活中很重要的一部分，它為人們生活帶來了極大的方便性。因此，無論開發(fā)什么項目，首先都要考慮移動應(yīng)用，移動設(shè)備的開發(fā)優(yōu)先是發(fā)展的趨勢。Html5在未來發(fā)展中也要優(yōu)先考慮在移動設(shè)備上更多的應(yīng)用。

5、離線緩存。

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

三、Html5人才就業(yè)前景會怎樣？

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

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

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

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