摘要：HTML5是基于HTML　4.01　和　XHTML　1.0　標(biāo)準(zhǔn)的最新HTML標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段。該文介紹了HTML5的特性，分析了HTML5和HTML4之間的主要區(qū)別，提出了基于HTML5的Web應(yīng)用編碼方法，最后總結(jié)了該技術(shù)現(xiàn)存的不足之處。

關(guān)鍵詞：HTML；Web應(yīng)用；HTML5

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2012）31-7462-04

1　HTML5簡(jiǎn)介

HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，多家公司聯(lián)合成立了WHATWG（Web　Hypertext　Application　Technology　Working　Group，Web超文本應(yīng)用技術(shù)工作組）組織專(zhuān)注于新的Web表單和應(yīng)用程序的標(biāo)準(zhǔn)，同時(shí)W3C（World　Wide　Web　Consortium，萬(wàn)維網(wǎng)聯(lián)盟）推出了基于XML技術(shù)的XHTML　2.0。在2006年，這兩個(gè)標(biāo)準(zhǔn)進(jìn)行融合，從而創(chuàng)建了一個(gè)新版本的HTML。HTML5的前身稱(chēng)為Web　Applications　1.0，于2004年由WHATWG提出，2007年被W3C接納。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍處于完善之中。互聯(lián)網(wǎng)主要標(biāo)準(zhǔn)管理團(tuán)體萬(wàn)維網(wǎng)聯(lián)盟近日提出新計(jì)劃在2014年前讓HTML5成為官方“候選推薦”標(biāo)準(zhǔn)，并在2016年完成HTML5.1標(biāo)準(zhǔn)。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持，支持的瀏覽器包括Firefox，IE9，Chrome，Safari等。

HTML5提供了像

迄今為止，并沒(méi)有什么流行的瀏覽器可以完全的支持所HTML5規(guī)范的所有功能。但明確的是，今天的主流瀏覽器都將趨于支持HTML5，但是仍存在許多不完全的支持或兼容。

2　HTML　5特性

1）語(yǔ)義特性

HTML5標(biāo)簽具有更好的頁(yè)面語(yǔ)義和結(jié)構(gòu)。HTML5包含有對(duì)RDFa、微數(shù)據(jù)與微格式等方面支持的標(biāo)簽，能夠構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web應(yīng)用。

2）本地存儲(chǔ)

HTML5　APP　Cache以及本地存儲(chǔ)功能能夠減輕服務(wù)器端的壓力，有效利用客戶(hù)端的壓力。

3）設(shè)備兼容

HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了新的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口，外部應(yīng)用程序就可以直接訪(fǎng)問(wèn)瀏覽器內(nèi)部的數(shù)據(jù)，例如視頻影音可直接與麥克風(fēng)及攝像頭相聯(lián)。

4）連接特性

更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線(xiàn)交流得到了實(shí)現(xiàn)。應(yīng)用HTML5更有效的服務(wù)器推送技術(shù)Server-Sent　Event能夠幫助我們實(shí)現(xiàn)從服務(wù)器端將信息直接推送到客戶(hù)端的功能。

5）網(wǎng)頁(yè)多媒體

HTML5支持客戶(hù)端的聲音、視頻等多媒體功能，并能夠與網(wǎng)站配置的APPS、攝像頭和影音功能進(jìn)行協(xié)同完成。通過(guò)HTML5新的視頻和音頻標(biāo)簽?zāi)軌蚝苋菀椎匕讯嗝襟w內(nèi)容嵌入到網(wǎng)頁(yè)中。

6）網(wǎng)頁(yè)特效

HTML5網(wǎng)站設(shè)計(jì)能在SVG、Canvas、WebGL　及　CSS3的基礎(chǔ)之上在瀏覽器中呈現(xiàn)給客戶(hù)驚人的3D視覺(jué)效果。

7）性能與集成特性

HTML5　網(wǎng)站設(shè)計(jì)會(huì)通過(guò)XMLHttpRequest2等技術(shù)使Web應(yīng)用和網(wǎng)站在多樣化的工作環(huán)境中擁有更快的速度與更高的效率。

8）CSS3特性

HTML5能在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果，也提供了更高的靈活性和控制性。

3　HTML5和HTML4之間的主要區(qū)別

盡管HTML5是基于HTML4發(fā)展而來(lái)，并未做什么重大的修改。但它吸收了XHTML的一些表達(dá)方法，從而產(chǎn)生了質(zhì)的飛躍。其和HTML4之間的一些重要區(qū)別如下：

1）HTML5標(biāo)準(zhǔn)還在制定中

HTML4仍是當(dāng)前正式的標(biāo)準(zhǔn)，HTML5仍處在早期階段，是一個(gè)還未完成的標(biāo)準(zhǔn)，以后的修改會(huì)不斷的出現(xiàn)。HTML標(biāo)準(zhǔn)化過(guò)程非常艱辛，至今尚未完全解決分歧，HTML5真正的標(biāo)準(zhǔn)化仍需假以時(shí)日。

2）簡(jiǎn)化的語(yǔ)法

更簡(jiǎn)潔的doctype聲明是HTML5里眾多新特征之一。DOCTYPE的聲明方式是<！DOCTYPE　html>，不區(qū)分大小寫(xiě)。HTML的早期版本聲明的DOCTYPE需要很長(zhǎng)的語(yǔ)句，是因?yàn)镠TML語(yǔ)言是建立在SGML的基礎(chǔ)上，所以需要關(guān)聯(lián)引用一個(gè)相對(duì)應(yīng)的DTD。而HTML5僅僅需要聲明DOCTYPE就可以告訴文檔啟用的是HTML5語(yǔ)法標(biāo)準(zhǔn)，瀏覽器會(huì)為<！DOCTYPE　html>做剩余的工作的。

3）新的視頻標(biāo)記

該標(biāo)記將給瀏覽器帶來(lái)直接在上面繪制矢量圖的能力，這意味著用戶(hù)可以脫離Flash　和Silverlight，直接在瀏覽器中顯示圖形或動(dòng)畫(huà)。

4）新的

HTML5的設(shè)計(jì)是要這就是為什么這些

5）新的

section和

6）新的

新的

類(lèi)似的，新的

7）新的

通過(guò)　HTML5中的

8）全新的表單設(shè)計(jì)

HTML5的表單定義了十幾個(gè)新的輸入類(lèi)型和特性，新的

9）不再使用一些標(biāo)記

，

HTML5和HTML4之間的區(qū)別只是整個(gè)新規(guī)范中的一小部分。除了這些主要的變動(dòng)外，還有很多次要的改動(dòng)，而且新的修改也在不斷的增加。因此，如果想實(shí)時(shí)跟蹤最新的動(dòng)向，則需要經(jīng)常地查看w3.org網(wǎng)站。

目前最新版的主流瀏覽器大都支持HTML5，但可能對(duì)有些新的標(biāo)記和屬性并不一定支持，可能在用戶(hù)的屏幕上顯示的效果不一致。所以HTML5真正可以實(shí)用時(shí)候還未到來(lái)。

4　基于HTML5的Web應(yīng)用編碼方法

HTML5現(xiàn)在的發(fā)展相當(dāng)迅速，越來(lái)越多的瀏覽器開(kāi)始支持HTML5的新特性，也涌現(xiàn)出越來(lái)越多的基于HTML5的App應(yīng)用，毫無(wú)疑問(wèn)，作為web開(kāi)發(fā)者，必須了解和懂得HTML5的相關(guān)特性，因?yàn)樗艽蟪潭壬鲜墙窈體eb開(kāi)發(fā)中的趨勢(shì)。下面列舉一些對(duì)HTML5編碼開(kāi)發(fā)過(guò)程中值得開(kāi)發(fā)者注意的最佳實(shí)踐方法，這些方法將提高開(kāi)發(fā)者的開(kāi)發(fā)效率和改善開(kāi)發(fā)質(zhì)量。

1）使用模板生成器

當(dāng)我們開(kāi)始著手編寫(xiě)HTML5頁(yè)面時(shí)，可以使用一些已有的模板生成器去生成一些HTML5模板，這樣就可以避免開(kāi)發(fā)者都是從頭開(kāi)始徒手編寫(xiě)HTML5代碼。使用這些HTML5模板生成器的步驟其實(shí)都是很簡(jiǎn)單的：一般來(lái)說(shuō)，只需要填寫(xiě)一些表單的基本選項(xiàng)，然后點(diǎn)生成的按鈕就可以生成一個(gè)基本的HTML5基本模板了，現(xiàn)在也有不少優(yōu)秀的HTML5模板生成器，推薦的是下面的兩個(gè)：SwitchTOHtml5（地址：http：//switchtohtml5.com/）和Shikiryu　generator（地址：http：//shikiryu.com/html5/）。而如果需要更高級(jí)復(fù)雜的生成功能的話(huà)，推薦的是使用HTML5　Boilerplate這個(gè)模板生成器生成，地址為：http：//html5boilerplate.com/，HTML5　Boilerplate的核心是用于幫助開(kāi)發(fā)HTML5站點(diǎn)和應(yīng)用程序的組件，包括：Modernizr，一個(gè)小型實(shí)用程序庫(kù)，支持在Windows　Internet　Explorer中設(shè)置新的HTML5　元素樣式，并協(xié)助在所有瀏覽器中進(jìn)行HTML5/CSS3特性檢測(cè)。如果您正在使用HTML5進(jìn)行開(kāi)發(fā)且需要支持Internet　Explorer版本9之前的瀏覽器版本，那么這個(gè)庫(kù)將是您的項(xiàng)目必不可少的一個(gè)組件。構(gòu)建于HTML5　Doctor　Reset　之上的一個(gè)CSS起始文件，包含幾個(gè)智能默認(rèn)值和增強(qiáng)。內(nèi)置HTML5語(yǔ)法，以及一些新的語(yǔ)義元素，用于構(gòu)成文檔的骨架。

2）使用Cheat　sheet備忘錄

由于HTML5還在迅速的發(fā)展，因此會(huì)不斷出現(xiàn)很多新的特性，一般的開(kāi)發(fā)者有的時(shí)候很難都記得所有這些新的特性，因此最好的辦法是使用cheat　sheet（備忘錄）的方法去查閱這些新特性和用法，下面推薦一個(gè)不錯(cuò)的備忘錄（上圖是其中的一張截圖），地址是：http：//www.inmotionhosting.com/infographics/html5-cheat-sheet/，其中分別有幾張備忘錄，詳細(xì)介紹了HTML5中各標(biāo)簽和事件屬性，支持的瀏覽器等詳細(xì)說(shuō)明。

3）關(guān)注兼容性問(wèn)題

由于HTML5是新的技術(shù)，但是開(kāi)發(fā)者依然不能忘記的是，各大瀏覽器廠(chǎng)商對(duì)其的支持還是不一樣的，比如微軟的IE就跟其他廠(chǎng)商的很不同，這就要求開(kāi)發(fā)者在使用新的特性時(shí)，要注意考慮是否需要在各大瀏覽器中取得平衡，比如考慮用戶(hù)群使用的瀏覽器類(lèi)型。這里推薦使用http：//caniuse.com/這個(gè)網(wǎng)站去查看HTML5各個(gè)屬性或者事件在各瀏覽器中的兼容情況（上圖為其截圖），這個(gè)網(wǎng)站的特色在于能讓開(kāi)發(fā)者一目了然地看到CSS，SVG和Javascript在HTML5中的各項(xiàng)用法以及以表格的形式對(duì)比了各瀏覽器對(duì)HTML5標(biāo)準(zhǔn)的支持情況，十分詳細(xì)，值得參考。

4）針對(duì)舊版本IE的兼容考慮

不得不說(shuō)，大部分的WEB前端開(kāi)發(fā)者都十分討厭IE，但有的時(shí)候，還是得考慮下舊的IE版本，這個(gè)時(shí)候就需要一些技巧了，在IE8以及以下的版本，如果要使用一些HTML5的特性，而不讓IE報(bào)錯(cuò)，可以使用如下的腳本：

要注意的是，以上腳本只能讓舊版本的IE對(duì)新的HTML5特性不報(bào)錯(cuò)，但不一定能承諾讓所有HTML5新特性都能兼容運(yùn)行。此外，可以使用一個(gè)不錯(cuò)的html5框架：modernizr（下載地址在：http：//modernizr.com/），它是一個(gè)能最大限度在各瀏覽器中運(yùn)行HTML5　CSS3的框架，使用方法也很簡(jiǎn)單，下載后，將其腳本放在每個(gè)HTML頁(yè)中的head部分引入就可以了，如果某一HTML5新特性被正在使用的瀏覽器支持，則會(huì)自動(dòng)啟用，如果不支持，則會(huì)以前綴“no_”的形式被引入以示區(qū)別。

5）正確使用元素

在HTML5之前，開(kāi)發(fā)者需要在頁(yè)面中使用大量的缺乏語(yǔ)義的標(biāo)簽，這將讓HTML5變得難以理解（特別是對(duì)搜索引擎來(lái)說(shuō)），為此，HTML5引入了大量的新的標(biāo)簽元素，比如header，footer，article，section，aside，nav等等，但開(kāi)發(fā)者要注意正確使用它們，比如下面是一種正確的使用方法：

6）校驗(yàn)寫(xiě)好的HTML5代碼

在完成HTML5編碼工作后，必須對(duì)編碼工作進(jìn)行確認(rèn)，以校驗(yàn)HTML5編碼中是否有正確的語(yǔ)義。除了使用專(zhuān)門(mén)的支持HTML5的編輯工具外（比如Visual　Studio　2010，Dreamweaver　CS　5等），還可以使用W3C的校驗(yàn)工具進(jìn)行，地址為：http：//validator.w3.org/。

5　HTML5的一些不足之處

任何新技術(shù)面臨的關(guān)鍵問(wèn)題之一是，要么被采用并且舍棄那些不能接受它的用戶(hù)；要么錯(cuò)失新的發(fā)展機(jī)會(huì)，最終變成無(wú)關(guān)緊要的技術(shù)。比如，如果你要在網(wǎng)站開(kāi)發(fā)中使用HTML5技術(shù)，這就意味著要舍棄那些仍然使用舊版IE的用戶(hù)。不過(guò)開(kāi)發(fā)者也可以通過(guò)兼容工作，讓用戶(hù)也能體驗(yàn)到HTML5的價(jià)值，同時(shí)也可以利用這個(gè)機(jī)會(huì)，讓HTML5技術(shù)突顯出它的重要作用。

然而，并非所有的事情都能如人所愿。HTML5目前還處于發(fā)展的初級(jí)階段，部分特性還不能完美的實(shí)現(xiàn)。下面列舉出了HTML5的一些不足之處。

1）IE瀏覽器是Web新技術(shù)發(fā)展道路上障礙

IE6的輝煌時(shí)代已經(jīng)結(jié)束，IE7也是這樣，即便是IE8，也仍然不能稱(chēng)為一款“現(xiàn)代瀏覽器”。而IE9對(duì)HTML5的支持尚不完全，比如不支持Web　Sockets和Web　Workers。

由于IE8不支持ECMAScript5，因此開(kāi)發(fā)者必須考慮怎樣處理array.IndexOf、array.each、Date.now（）、獲取和設(shè)置屬性、處理許多有用的JavaScript包。

在IE8和IE9中，用戶(hù)可以提交跨源請(qǐng)求，但不能使用XMLHttpRequest。

只有IE10可以稱(chēng)得上是“現(xiàn)代瀏覽器”，但是它不能在任何低于Windows　8的系統(tǒng)環(huán)境下運(yùn)行。

2）離線(xiàn)存儲(chǔ)并不安全

當(dāng)應(yīng)用程序出現(xiàn)問(wèn)題時(shí)，需要通過(guò)日志對(duì)它進(jìn)行調(diào)查研究。但是如果應(yīng)用程序運(yùn)行好幾天也不能發(fā)送一個(gè)日志，開(kāi)發(fā)者就需要考慮客戶(hù)端是否出現(xiàn)了問(wèn)題。

日志記錄會(huì)使客戶(hù)端速度變慢、存儲(chǔ)量增長(zhǎng)，而且如果在發(fā)現(xiàn)問(wèn)題時(shí)才進(jìn)行日志記錄就太晚了。而當(dāng)前的HTML5技術(shù)，允許只存儲(chǔ)最新的日志信息，使性能影響降到最低，并且當(dāng)問(wèn)題再次出現(xiàn)時(shí)，用戶(hù)能夠進(jìn)行恢復(fù)。

當(dāng)然，理想的做法是在后臺(tái)寫(xiě)入日志來(lái)實(shí)現(xiàn)某種形式的離線(xiàn)存儲(chǔ)（不影響客戶(hù)端的響應(yīng)），這樣的話(huà)，當(dāng)出現(xiàn)問(wèn)題甚至是機(jī)器突然重啟，日志也能恢復(fù)。

這個(gè)過(guò)程可以通過(guò)Webworker中的FileSystem　API來(lái)實(shí)現(xiàn)。然而，當(dāng)前只有Chrome瀏覽器支持FileSystem　API。

用戶(hù)可以使用localStorage來(lái)代替FileSytem　API，可惜localStorage是一個(gè)同布API，它的大量的數(shù)據(jù)將會(huì)增加加載時(shí)間。

更糟糕的是，實(shí)際上不能在本地機(jī)器上存儲(chǔ)未加密的日志，因?yàn)樗鼈兛赡馨瑱C(jī)密信息。然而目前的一些簡(jiǎn)單的日志記錄方案看起來(lái)非?；靵y，性能也不好，由于HTML5中沒(méi)有針對(duì)存儲(chǔ)的加密API，開(kāi)發(fā)者還需要自己對(duì)這些日志進(jìn)行加密。

3）不能很好的支持窗口間共享

有時(shí)候你可能想在不同的窗口中共享同一個(gè)服務(wù)器的連接信息，現(xiàn)在可以使用postMessage來(lái)實(shí)現(xiàn)，但是你需要有你想發(fā)送消息的窗口的句柄。但是如何得知用戶(hù)當(dāng)前打開(kāi)了哪些標(biāo)簽頁(yè)呢？在Chrome中，不同的標(biāo)簽頁(yè)使用不同的進(jìn)程，這種功能對(duì)于創(chuàng)建長(zhǎng)時(shí)間運(yùn)行的應(yīng)用程序非常有用。

在Firefox中不支持這一特性，但可以使用SharedWebWorker來(lái)代替。

你可以使用onstorage事件來(lái)對(duì)所有其他窗口進(jìn)行廣播，但問(wèn)題是，并不是所有的瀏覽器都能提供進(jìn)行存儲(chǔ)事件的窗口的句柄。

4）Web　Workers細(xì)節(jié)尚未完全實(shí)現(xiàn)

通常情況下，當(dāng)在HTML頁(yè)面中執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本完成。而Web　Workers是運(yùn)行在后臺(tái)的JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能和操作。

但遺憾的是，F(xiàn)irefox在Workers內(nèi)部并不支持WebSockets。

無(wú)論是Chrome還是Firefox，都不能很好地解決基于代碼位置的Worker腳本無(wú)法實(shí)例化頁(yè)面本身的問(wèn)題，因此代碼庫(kù)必須部署在為頁(yè)面提供服務(wù)的同一個(gè)web服務(wù)器上，并且不能包含在不同層級(jí)的頁(yè)面中，也無(wú)法在不更改代碼的前提下為腳本文件重命名。盡管規(guī)范明確指出，worker腳本應(yīng)該能夠被相關(guān)的腳本實(shí)例化。

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

HTML5　簡(jiǎn)化了程序員的工作，使訪(fǎng)問(wèn)多種多樣的設(shè)備和應(yīng)用程序更加方便，并且提供了很多迷人的新特性。HTML5已成為主流的移動(dòng)互聯(lián)網(wǎng)云計(jì)算編程格式。HTML5正在快速發(fā)展，并將逐步實(shí)現(xiàn)標(biāo)準(zhǔn)化，相信在不久的將來(lái)，HTML5將會(huì)克服自身目前的不足之處，用戶(hù)將有一個(gè)完全不同的互聯(lián)網(wǎng)體驗(yàn)。

參考文獻(xiàn)：

[1]　劉增杰.精通HTML5　+　CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)[M].北京：清華大學(xué)出版社，2012.

[2]　萬(wàn)姆朋.HTML　5從入門(mén)到精通[M].北京：清華大學(xué)出版社，2012.

[3]　陸凌牛.HTML　5與CSS　3權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2011.

[4]　Makzan.HTML5游戲開(kāi)發(fā)實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社，2012.

[5]　弗里曼，羅布森.深入淺出HTML5編程（影印版）[M].南京：東南大學(xué)出版社，2012.