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

黃玉春

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

關(guān)鍵詞： HTML5； CSS3； Canvas； 標準； 移動平臺

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

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

1 HTML5主要特性

1.1 語義特性

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

1.2 本地存儲特性

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

1.3 智能表單

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

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

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

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

1.5 繪圖畫布特性

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

1.6 CSS3特性

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

2 HTML5.0優(yōu)點

2.1 網(wǎng)絡(luò)標準

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

2.2 多設(shè)備跨平臺

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

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

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

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

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

2.4 即時更新

游戲客戶端每次都要更新，很麻煩。可是更新HTML5游戲就好像更新頁面一樣，是馬上的、即時的更新，每當出現(xiàn)更新內(nèi)容時，瀏覽器就會無縫隙地下載應(yīng)用。

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

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

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

3.1 HTML5存在的爭議

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

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

WebM陣營認為MPEG格式是具有專利保護的，這違背了HTML5所有技術(shù)必須開放的原則。MPEG陣營則更多地是因為自身就在使用這種視頻格式。

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

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

4 結(jié)束語

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

參考文獻：

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

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

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

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

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

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