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

張雪紅

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

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

筆者將從Html5的定義、特性和發(fā)展趨勢(shì)等角度來認(rèn)識(shí)學(xué)習(xí)它。

一、什么是Html5？

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

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

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

1、涂鴉板

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

2、美輪美奐的邀請(qǐng)函

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

3、在線地圖

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

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

1、Html5標(biāo)簽語義化

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

2、本地存儲(chǔ)特性

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

3、地理位置定位特性

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

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

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

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

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

6、CSS3特性

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

7、實(shí)時(shí)通信

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

8、性能與集成特性

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

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

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

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

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

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

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

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

3、設(shè)備訪問。

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

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

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

5、離線緩存。

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

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

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

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

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

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