HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)的HTML標(biāo)準(zhǔn)版本，與HTML4.01和XHTML1.0相比，HTML5可以實(shí)現(xiàn)更強(qiáng)的頁(yè)面表現(xiàn)性能，同時(shí)充分調(diào)用本地資源，實(shí)現(xiàn)不輸于App的功能效果，且其本身十分輕量化。

隨著HTML5技術(shù)的發(fā)展，瀏覽器可以擺脫對(duì)操作系統(tǒng)的依賴，實(shí)現(xiàn)跨平臺(tái)、跨終端體驗(yàn)。

HTML5技術(shù)而今已不再陌生，不管是趨之若鶩，熱情擁抱，還是遠(yuǎn)遠(yuǎn)張望，保持距離，HTML5都是技術(shù)論壇熱門的話題，給人的感覺就是酷、新、看上去很美。

HTML5開辟了無(wú)需下載的移動(dòng)應(yīng)用時(shí)代，有望成為下一代移動(dòng)互聯(lián)網(wǎng)的殺手锏，用HTML5開發(fā)的互聯(lián)網(wǎng)產(chǎn)品，最能迎合用戶的體驗(yàn)感受，省去了下載、安裝、更新的煩惱，讓用戶可以隨時(shí)享受最新版本的產(chǎn)品體驗(yàn)。

HTML5提高了可用性，改進(jìn)了用戶體驗(yàn)，給網(wǎng)站帶來(lái)了視頻、音頻等更多的多媒體元素，它很好地替代了Flash和Silverlight，并將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。

一、HTML5是什么?

HTML5本身是由W3C推薦出來(lái)的，它的開發(fā)是通過(guò)谷歌、蘋果，諾基亞、中國(guó)移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開的技術(shù)。

換句話說(shuō)，每一個(gè)公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫(kù)找尋根源。另一方面，W3C通過(guò)的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)。

1、狹義的HTML5

HTML5草案的前身名為Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。2013年5月6日，HTML 5.1正式草案公布。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

該規(guī)范定義了第五次重大版本，第一次要修訂萬(wàn)維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言(HTML)。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。

2、廣義的HTML5

廣義的HTML5包括HTML, CSS和JavaScript在內(nèi)的一套技術(shù)組合，其目標(biāo)是減少瀏覽器對(duì)于插件的依賴，提供豐富的RIA(富客戶端)應(yīng)用。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

所以，CSS3，SVG，WebGL，Touch事件，動(dòng)畫支持等都屬于HTML5技術(shù)范圍(具體可查看馬海祥博客《HTML5的主要技術(shù)組成部分及功能介紹》的相關(guān)介紹)。

二、HTML5適用范圍

HTML5的應(yīng)用仍存在巨大的上升空間，近期內(nèi)很可能從廣告行業(yè)逐漸往游戲行業(yè)、廣播電視行業(yè)和媒體行業(yè)轉(zhuǎn)型，不遠(yuǎn)的未來(lái)還能把觸角伸得更遠(yuǎn)。

1、酷的應(yīng)用

曾經(jīng)有人這樣形容HTML5，doing anything cool (on the web)，HTML5可以做很酷的應(yīng)用，無(wú)需安裝插件，就可以在網(wǎng)頁(yè)中全屏觀看高清視頻，玩兒輕巧的在線游戲，體驗(yàn)流暢的動(dòng)畫效果，瀏覽精美的網(wǎng)絡(luò)圖，收聽網(wǎng)絡(luò)電臺(tái)的音樂(lè)……一些小而美的應(yīng)用非常適合HTML5，企業(yè)應(yīng)用中的某些模塊也可以選擇HTML5。

2、非得跨平臺(tái)嗎?

每種編程語(yǔ)言和技術(shù)都有特定的適用范圍，如果你的目標(biāo)客戶是iPhone，你只需要考慮Safari for Mobile就可以了，如果還要考慮Android平臺(tái)，選擇支持Webkit內(nèi)核，如果目標(biāo)人群是高端用戶，用些新技術(shù)也是可行的，如果非得所有平臺(tái)都支持，在基本功能之外，使用HTML5技術(shù)增加一些亮點(diǎn)，也會(huì)很有吸引力。

三、HTML5的缺點(diǎn)

HTML5雖然有很多的優(yōu)勢(shì)，但是HTML5也有他的適用范圍，HTML5技術(shù)是一種被夸大了的萬(wàn)金油，在目前瀏覽器支持不一，開發(fā)工具，第三方類庫(kù)缺乏的情況下，HTML5無(wú)法解決一切問(wèn)題，但如果限定它的使用范圍，HTML5確實(shí)可以優(yōu)雅的解決很多問(wèn)題。

目前來(lái)說(shuō)，HTML5最大的缺點(diǎn)是：功能簡(jiǎn)單且分散、瀏覽器支持不一。

1、功能簡(jiǎn)單且分散

HTML5是一種技術(shù)集合，包括各種標(biāo)簽及其相關(guān)API，HTML，CSS，SVG，JavaScript等，沒有統(tǒng)一的開發(fā)工具，一個(gè)完整的HTML5應(yīng)用涉及到多種技術(shù)，導(dǎo)致開發(fā)難度大，對(duì)于企業(yè)應(yīng)用，HTML5的功能有限，需要借助第三方類庫(kù)。

2、瀏覽器支持不一

一直以來(lái)HTML5都以跨平臺(tái)著稱，但實(shí)際上要實(shí)現(xiàn)這一目標(biāo)工作量巨大，HTML5缺少一個(gè)瀏覽器的標(biāo)桿(Webkit有希望成為)，尤其目前在IE6/7/8占有率居高不下的情況下，希望用HTML5跨全平臺(tái)基本是不可能的(具體可查看馬海祥博客《如何解決IE6/IE7/IE8瀏覽器不兼容HTML5新標(biāo)簽的問(wèn)題》的相關(guān)介紹)。

四、HTML5應(yīng)用現(xiàn)狀

從硬件角度來(lái)看，國(guó)內(nèi)手機(jī)和平板兩種移動(dòng)設(shè)備應(yīng)用最廣，PC端次之，緊接著是電視和游戲設(shè)備。

從軟件角度來(lái)看，桌面瀏覽器對(duì)HTML5的支持高于移動(dòng)瀏覽器，最高可達(dá)95%;而從整體上而言，移動(dòng)瀏覽器對(duì)HTML5的支持卻優(yōu)于桌面瀏覽器。

HTML5具有較好的瀏覽器向后兼容性，開發(fā)者能對(duì)瀏覽器不支持的情形設(shè)計(jì)各種各樣的回退方案。因此，HTML5頁(yè)面的實(shí)際顯示性能與開發(fā)者、制作平臺(tái)密切相關(guān)。

2015年，越來(lái)越多公司在HTML5品牌推廣上進(jìn)行布局。6至7月份起，雞湯、自媒體等個(gè)人作品呈下降趨勢(shì)，商企用戶作品則保持高速增長(zhǎng)。在商業(yè)需求的驅(qū)動(dòng)下，HTML5頁(yè)面設(shè)計(jì)的目的性更強(qiáng)，獲得最好傳播效果的基本是經(jīng)過(guò)一定時(shí)間策劃，在團(tuán)隊(duì)操作下有針對(duì)性地進(jìn)行投放的企業(yè)案例。

相對(duì)應(yīng)地，原有HTML5平臺(tái)也進(jìn)行了大面積升級(jí)，從平臺(tái)性質(zhì)而言，HTML5平臺(tái)可分為輕營(yíng)銷模板類、功能引擎類和基礎(chǔ)工具類三種，分別以易企秀、白鷺引擎和iH5為代表。

1、HTML5平臺(tái)的特點(diǎn)

一般來(lái)說(shuō)，三類HTML5平臺(tái)的特點(diǎn)如下：

(1)、輕營(yíng)銷模板類：提供類似PPT頁(yè)面切換的HTML5制作工具，通常面向C端(個(gè)人)用戶，部分為B端(企業(yè))用戶。該類平臺(tái)的數(shù)量較大，只適用于輕度營(yíng)銷，所能提供的頁(yè)面動(dòng)態(tài)效果局限于翻頁(yè)。

(2)、功能引擎類：提供HTML5網(wǎng)頁(yè)的開發(fā)引擎，通常面向B端用戶。該類平臺(tái)主要提供基于Canvas(畫布)的游戲引擎，適用于輕游戲的開發(fā)，依賴于開發(fā)者。

(3)、基礎(chǔ)工具類：提供用于頁(yè)面交互的HTML5可視化編輯工具，主要面向B端用戶，部分為C端用戶。該類平臺(tái)只有iH5，采用自主研發(fā)的閉源引擎，應(yīng)用領(lǐng)域廣泛，涵蓋輕度營(yíng)銷、重度營(yíng)銷、媒體電商內(nèi)容應(yīng)用、視頻、動(dòng)畫、游戲等方面。

與瀏覽器多采用谷歌開源引擎的狀況相近，國(guó)內(nèi)HTML5平臺(tái)基本使用國(guó)內(nèi)外開源框架或引擎。但和瀏覽器面向網(wǎng)頁(yè)內(nèi)容顯示，只需提供高性能的技術(shù)支持不同，HTML5平臺(tái)面向的是HTML5制作或開發(fā)，需要對(duì)網(wǎng)頁(yè)質(zhì)量負(fù)責(zé)。

因此，使用開源框架或引擎意味著這些HTML5平臺(tái)進(jìn)一步拓展業(yè)務(wù)會(huì)比較被動(dòng)，容易面臨同質(zhì)化的困境。

2、HTML5平臺(tái)的對(duì)比

因?yàn)檎w上移動(dòng)端瀏覽器對(duì)HTML5的支持優(yōu)于PC端，2015年HTML5平臺(tái)主要面向移動(dòng)端網(wǎng)頁(yè)的制作和開發(fā)。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

如上表，三種HTML5平臺(tái)以PC網(wǎng)站、APP和軟件三種形式提供制作或開發(fā)工具，成品為網(wǎng)頁(yè)或HTML5源碼。由表可見：

(1)、輕營(yíng)銷模板類HTML5平臺(tái)只能做輕度營(yíng)銷，能實(shí)現(xiàn)翻頁(yè)等簡(jiǎn)單動(dòng)效，分為場(chǎng)景展示、電子出版和動(dòng)畫制作三種。如下圖為易企秀桌面編輯界面，該類平臺(tái)最大的共同點(diǎn)在于工具結(jié)構(gòu)以頁(yè)面為基礎(chǔ)，與軟件PowerPoint架構(gòu)相近，能通過(guò)增減頁(yè)面、使用功能組件和點(diǎn)擊快捷菜單來(lái)調(diào)整內(nèi)容。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

(2)、功能引擎類HTML5平臺(tái)的用戶專指性很強(qiáng)，主要是有開發(fā)經(jīng)驗(yàn)的技術(shù)人員。下圖為Egret Wing軟件設(shè)計(jì)師視圖下的基本架構(gòu)，使用HTML5引擎把基礎(chǔ)代碼流程化，再借助第三方集成開發(fā)環(huán)境Adobe Air構(gòu)建可視化工具，就能通過(guò)讓用戶使用軟件組件來(lái)簡(jiǎn)化開發(fā)過(guò)程。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

(3)、基礎(chǔ)工具類HTML5平臺(tái)提供底層交互型產(chǎn)品，開發(fā)目的、設(shè)計(jì)原理和實(shí)現(xiàn)思路都以交互為基礎(chǔ)，國(guó)內(nèi)只有iH5。iH5于2015年9月上線，提供HTML5制作工具、工具培訓(xùn)和作品交易等服務(wù)。它本質(zhì)上封裝了DOM(文檔對(duì)象模型)引擎的一個(gè)集成開發(fā)環(huán)境，使用者以設(shè)計(jì)師為主，適合廣告公司、大型媒體公司和公司市場(chǎng)部等使用。

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

如上圖，iH5提供的是舞臺(tái)、屏幕、頁(yè)面、多媒體素材、事件、數(shù)據(jù)庫(kù)等對(duì)象組件，而不是構(gòu)建好的模塊組件，在提供可視化編輯的前提上，它最大程度還原了HTML5頁(yè)面的開發(fā)過(guò)程，具有較高的拓展性。由于提供底層交互功能，它的應(yīng)用領(lǐng)域較廣泛，能用于微信推廣、網(wǎng)站建設(shè)、輕游戲設(shè)計(jì)、輕APP開發(fā)和視頻交互等多個(gè)方面。

同樣是HTML5規(guī)范，對(duì)HTML5技術(shù)與性能的取舍成為國(guó)內(nèi)HTML5平臺(tái)工具定位和提供服務(wù)的差別所在(具體可查看馬海祥博客《深入解析HTML5的8大性能》的相關(guān)介紹)。

五、為什么選擇HTML5技術(shù)?

2014年下半年，微信幫助捧火了HTML5小游戲，自此國(guó)內(nèi)各行各業(yè)開始對(duì)HTML5保持持續(xù)高漲的關(guān)注。接著的2015年是國(guó)內(nèi)HTML5行業(yè)迅速發(fā)展的一年，在媒體大肆渲染“互聯(lián)網(wǎng)寒冬”之際，HTML5作品的生產(chǎn)數(shù)量和傳播廣度卻居高不下，為寒冬增添一把柴火。

1、Web應(yīng)用開發(fā)新標(biāo)準(zhǔn)

HTML5，第五版超文本標(biāo)記語(yǔ)言，于2014年10月由萬(wàn)維網(wǎng)聯(lián)盟(W3C)發(fā)布為正式推薦標(biāo)準(zhǔn)。它是HTML自1991年問(wèn)世以來(lái)，最具變革價(jià)值的技術(shù)規(guī)范，歷經(jīng)多年修訂與完善才制定完成。

過(guò)去，Web開發(fā)面臨兩種困境：

(1)不少人質(zhì)疑Flash的安全性等問(wèn)題，卻找不到替代它的合適插件;

(2)工程師們抱怨PC端和移動(dòng)端應(yīng)用的多次開發(fā)，仍舊得為微軟、蘋果、安卓等系統(tǒng)設(shè)計(jì)不同方案。

而HTML5提供了良好的解決方案。與JavaScript、CSS等緊密結(jié)合后，HTML5能使瀏覽器不需要類似Flash的插件也能實(shí)現(xiàn)桌面應(yīng)用的交互效果，它的跨平臺(tái)可用性更令應(yīng)用的一次開發(fā)成為可能。

如上圖，Youtube使用HTML5的video元素進(jìn)行標(biāo)記后，網(wǎng)頁(yè)不需要第三方插件就能播放音視頻等。因此，HTML5的興起具有非常深遠(yuǎn)的意義，它已經(jīng)從簡(jiǎn)單的標(biāo)記語(yǔ)言化身為Web應(yīng)用開發(fā)的先驅(qū)。

2、HTML5 Vs Flash

我們?yōu)槭裁匆x擇使用HTML5技術(shù)?-馬海祥博客

以前富客戶端應(yīng)用主要通過(guò)插件技術(shù)實(shí)現(xiàn)，比如Adobe Flash, Microsoft Silverlight, Java Applet，存在一些問(wèn)題：需要安裝插件，不支持移動(dòng)設(shè)備，私有技術(shù)，沒有國(guó)際標(biāo)準(zhǔn)等等，當(dāng)然插件技術(shù)也有優(yōu)勢(shì)的地方，有特定的用途，上面就Flash技術(shù)和HTML5進(jìn)行比較。

3、互聯(lián)網(wǎng)發(fā)展的趨勢(shì)

隨著網(wǎng)絡(luò)架構(gòu)的完善，寬帶提升，網(wǎng)速滿足實(shí)時(shí)交互需求時(shí)，計(jì)算機(jī)結(jié)構(gòu)也將發(fā)生變化，光驅(qū)消失，硬盤消失，內(nèi)存增大，GPU愈加重要，現(xiàn)在B/S結(jié)構(gòu)的應(yīng)用越來(lái)越多，而HTML5旨在富互聯(lián)網(wǎng)應(yīng)用，能夠改善B/S結(jié)構(gòu)應(yīng)用的用戶體驗(yàn)是互聯(lián)網(wǎng)應(yīng)用的趨勢(shì)之一。

目前HTML5已經(jīng)可以解決很多問(wèn)題，多少可以用到一部分，而面向未來(lái)互聯(lián)網(wǎng)，基于“云+終端”的構(gòu)架，終端的HTML5的兼容解決方案必然會(huì)出現(xiàn)，那時(shí)候你就可以全面擁抱HTML5了。