淺談下一代Web開發(fā)標(biāo)準(zhǔn)的核心技術(shù)—HTML5

黃玉春

摘 要： HTML5是近十幾年來Web開發(fā)標(biāo)準(zhǔn)巨大的飛躍。HTML5為了更好的處理今天的互聯(lián)網(wǎng)的應(yīng)用，添加了很多新元素和功能，比如：圖形的繪制；視頻、音頻、圖像，以及同電腦的交互都被標(biāo)準(zhǔn)化。文章介紹了HTML5的新特性和技術(shù)，分析HTML5與現(xiàn)有主流技術(shù)的關(guān)系，研究了HTML5技術(shù)的局限性及發(fā)展前景。

關(guān)鍵詞： HTML5； CSS3； Canvas； 標(biāo)準(zhǔn)； 移動(dòng)平臺(tái)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2015）04-03-03

Abstract： HTML5 is a big leap in Web development standards in recent ten years. In order to deal with today's Internet applications， HTML5 has added many new elements and function， for example： graphics rendering， video， audio， image， and computer interaction. This paper introduces the new characteristics and technology of HTML5， analyses the relationship between HTML5 and existing mainstream technology， and points out the limitations and prospects of HTML5 technology.

Key words： HTML5； CSS3； Canvas； standard； mobile platform

0 引言

HTML5是萬維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大版本，是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。HTML5將成為HTML、XHTML以及HTML DOM的新標(biāo)準(zhǔn)。HTML5是W3C（World Wide Web Consortium）與WHATWG（Web Hypertext Application Technology Working Group）在2006年決定進(jìn)行合作以來創(chuàng)建的一個(gè)新版本的HTML。2013年5月6日， HTML 5.1 正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者提高新元素互操作性。從該草案的發(fā)布至今，進(jìn)行了多達(dá)近百項(xiàng)的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時(shí)HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。

目前大部分瀏覽器都支持HTML5，包括：Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國(guó)內(nèi)的遨游瀏覽器（Maxthon），360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國(guó)產(chǎn)瀏覽器同樣具備支持HTML5的能力。

1 HTML5主要特性

1.1 語(yǔ)義特性

HTML5引入了一批新標(biāo)簽和屬性，使得構(gòu)建網(wǎng)頁(yè)更容易，賦予了網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。這些標(biāo)簽將隨著對(duì)RDFa微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序和對(duì)用戶更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

1.2 本地存儲(chǔ)特性

HTML5的本地存儲(chǔ)又稱離線存儲(chǔ)，這個(gè)概念和cookie相似，但它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次用戶請(qǐng)求一個(gè)新的頁(yè)面時(shí)，cookie都會(huì)被發(fā)送過去。HTML5的本地存儲(chǔ)存儲(chǔ)在用戶計(jì)算機(jī)上，網(wǎng)站在頁(yè)面加載完畢后可以通過Javascript來獲取這些數(shù)據(jù)。基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度。

1.3 智能表單

將其中一個(gè)屬性添加到一個(gè)標(biāo)簽中就會(huì)打開相應(yīng)的功能。省去它（或有意地刪除它）將會(huì)關(guān)閉相應(yīng)的功能。與這些Boolean 屬性緊密相關(guān)的是 autocomplete，在默認(rèn)情形下，它處于打開狀態(tài)。為了關(guān)閉它，你需要將其添加到一個(gè)標(biāo)簽中并且顯式地為其設(shè)置值。

這樣，程序開發(fā)者不用再花大塊時(shí)間使用JavaScript或服務(wù)器端的腳本進(jìn)行驗(yàn)證，從而提高了程序開發(fā)效率。

1.4 網(wǎng)頁(yè)多媒體特性

HTML5不但允許在網(wǎng)頁(yè)中直接整合視頻、音頻，同時(shí)更提供了一套功能豐富的API用來控制媒體播放，而這些用來控制媒體播放的元素也都是可以被編輯的。因此，HTML5在視頻以及音頻層面上實(shí)際已經(jīng)可以替代常用的flash插件了。

1.5 繪圖畫布特性

在網(wǎng)頁(yè)中設(shè)置一個(gè)一個(gè)區(qū)域進(jìn)行互動(dòng)一直是個(gè)大難題，以前我們借助于flash、silverlight等插件?，F(xiàn)在HTML5通過Canvas標(biāo)簽，允許直接在網(wǎng)頁(yè)上進(jìn)行繪圖，甚至允許與網(wǎng)頁(yè)生成更多的交互，例如繪制圖形、放大縮小等等。以下給出一個(gè)實(shí)例。

1.6 CSS3特性

在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

2 HTML5.0優(yōu)點(diǎn)

2.1 網(wǎng)絡(luò)標(biāo)準(zhǔn)

HTML5本身是由W3C推薦出來的，它的開發(fā)是通過谷歌、蘋果，諾基亞、中國(guó)移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開的技術(shù)。換句話說，每一個(gè)公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫(kù)找尋根源。另一方面，W3C通過的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)。

2.2 多設(shè)備跨平臺(tái)

用HTML5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。

2.3 自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

很早就有人設(shè)想，能不能“一次設(shè)計(jì)，普遍適用”，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整布局（layout）。

2010年，Ethan Marcotte提出了“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。

這就解決了傳統(tǒng)的一種局面——網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門提供一個(gè)mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

2.4 即時(shí)更新

游戲客戶端每次都要更新，很麻煩?？墒歉翲TML5游戲就好像更新頁(yè)面一樣，是馬上的、即時(shí)的更新，每當(dāng)出現(xiàn)更新內(nèi)容時(shí)，瀏覽器就會(huì)無縫隙地下載應(yīng)用。

2.5 搜索引擎更加容易抓取和索引

對(duì)于一些網(wǎng)站，特別是那些嚴(yán)重依賴于FLASH的網(wǎng)站，搜索引擎抓取和索引是十分困難的。而采用HTML5編寫的網(wǎng)站，搜索引擎的蜘蛛將能夠抓取站點(diǎn)和索引內(nèi)容。所有嵌入到動(dòng)畫中的內(nèi)容將全部可以被搜索引擎讀取。

3 HTML技術(shù)的局限性

3.1 HTML5存在的爭(zhēng)議

HTML5在誕生之后，就樹立了一個(gè)原則，那就是所有的技術(shù)必須是開放的，不準(zhǔn)有專利限制，在這期間Opera捐獻(xiàn)了CSS技術(shù)，而Google則提供了視頻格式WebM。

可以說大部分的HTML協(xié)議在眾多網(wǎng)絡(luò)技術(shù)公司中達(dá)成共識(shí)，但在視頻格式方面，世界各大互聯(lián)網(wǎng)公司正在為具體標(biāo)準(zhǔn)而爭(zhēng)論，這可能引起HTML5標(biāo)準(zhǔn)的分流。紛爭(zhēng)的兩大陣營(yíng)分別是Opera、火狐、Google等，另一大陣營(yíng)則由蘋果公司領(lǐng)銜。

WebM陣營(yíng)認(rèn)為MPEG格式是具有專利保護(hù)的，這違背了HTML5所有技術(shù)必須開放的原則。MPEG陣營(yíng)則更多地是因?yàn)樽陨砭驮谑褂眠@種視頻格式。

3.2 HTML5被發(fā)現(xiàn)漏洞

2013年3月，一位名叫菲羅斯·阿伯克哈迪杰哈（Feross Aboukhadijeh）的開發(fā)者率先發(fā)現(xiàn)了HTML5標(biāo)記語(yǔ)言的一個(gè)漏洞：它允許網(wǎng)站利用數(shù)GB垃圾數(shù)據(jù)對(duì)用戶展開轟炸，甚至?xí)诙虝r(shí)間內(nèi)將硬盤塞滿。多款主流瀏覽器均會(huì)受此影響。包括蘋果Safari、谷歌Chrome、微軟IE和Opera。惟一能夠阻止數(shù)據(jù)大量加載的是Mozilla的火狐瀏覽器，該產(chǎn)品的數(shù)據(jù)存儲(chǔ)上限為5MB。該問題的根源在于HTML5存儲(chǔ)本地?cái)?shù)據(jù)的方式。

4 結(jié)束語(yǔ)

HTML5可以促進(jìn)用戶網(wǎng)站間的互動(dòng)。多媒體網(wǎng)站將獲得更多的改進(jìn)，特別是在移動(dòng)平臺(tái)上的應(yīng)用，使用HTML5可以提供更多高質(zhì)量的視頻和音頻流。到目前為止，占主導(dǎo)地位的蘋果公司的iPhone和iPad是不支持Flash的，同時(shí)ADOBE公司也在近期公開聲明將停止FLASH基于移動(dòng)平臺(tái)的開發(fā)?，F(xiàn)在我們已經(jīng)可以這么說——移動(dòng)平臺(tái)日后視頻音頻是HTML5的天下。HTML5必將成為未來網(wǎng)絡(luò)應(yīng)用開發(fā)的核心技術(shù)。

參考文獻(xiàn)：

[1] 劉斌.HTML5-未來網(wǎng)絡(luò)應(yīng)用的核心技術(shù)研究[J].自動(dòng)化與儀器儀表，2010.4：30

[2] 吳慶濤等.HTML5——下一代 Web開發(fā)標(biāo)準(zhǔn)的核心技術(shù)探討[J].許昌學(xué)院學(xué)報(bào)，2009.30（5）：61

[3] 錢海軍.基于HTML5移動(dòng)Web頁(yè)面開發(fā)技術(shù)研究[J].電腦與信息技術(shù)，2013.21（1）：50

[4] 劉天寅.HTML5與未來的Web應(yīng)用平臺(tái)[J].陰山學(xué)刊，2010.24（2）：86

[5] 李慧云等.HTML5技術(shù)與應(yīng)用模式研究[J].電信科學(xué)，2012.5：24

[6] 馬新強(qiáng)等.Web標(biāo)準(zhǔn)與HTML5的核心技術(shù)研究[J].重慶文理學(xué)院學(xué)報(bào)（自然科學(xué)版），2010.29（6）：61