除非你與世隔絕,否則,一定聽(tīng)到過(guò)關(guān)于 HTML5 的各種聲音,HTML5 表面上看是用來(lái)取代 Flash Web 視頻的,然而,它的使命遠(yuǎn)不止此。HTML5 是下一代 Web 語(yǔ)言,它不單單是一種標(biāo)記語(yǔ)言,更為下一代 Web 提供了全新功能,并將引領(lǐng)下一代 Web 實(shí)現(xiàn)類似桌面的應(yīng)用體驗(yàn)。
HTML5 主要新功能
- 本地音頻視頻播放
- 動(dòng)畫
- 地理信息
- 硬件加速
- 本地運(yùn)行(即使在 Internet 連接中斷之后)
- 本地存儲(chǔ)
- 從桌面拖放文件到瀏覽器上傳
- 語(yǔ)義化標(biāo)記
HTML5 應(yīng)用現(xiàn)狀
現(xiàn)今,
各大瀏覽器對(duì) HTML5 的支持各有千秋,我們期待著他們?cè)谝粌赡陜?nèi)趨向一致,你可能以為,既然這樣,現(xiàn)在大概很少人在使用這個(gè)未來(lái)的標(biāo)準(zhǔn),事實(shí)并不如此,HTML5 現(xiàn)在已經(jīng)被廣泛應(yīng)用,正如
William Gibson所言,未來(lái)的 Web 已經(jīng)來(lái)臨,只是還沒(méi)有被廣泛采用。
你可能不知道,
Google 的首頁(yè)也使用 HTML5,不過(guò),目前,他們還僅僅使用了
HTML5 的 doctype,頁(yè)面的其它部分還是
舊代碼, 但 Google 在他們的各種應(yīng)用中已經(jīng)在廣泛采用 HTML5。最典型的例子是 Gmail,HTML5 的離線存儲(chǔ)使用戶即使在離線狀態(tài)下也可以使用 Gmail,另外,Google Docs 也使用離線存儲(chǔ),同樣使用離線存儲(chǔ)的其它廠商的類似應(yīng)用還包括 Zoho 的辦公套件和 Wordpress 的博客平臺(tái)。如果你對(duì) HTML5 的離線存儲(chǔ)功能感興趣,可以看一看 Mark Pilgrim 的
how to add offline support to your apps一文。
Scribd 基于 HTML5 的文檔閱讀器

上圖是 Scribd 的新文檔閱讀器,全部基于 Web 標(biāo)準(zhǔn),并未借助 Flash。
除了視頻,HTML5 還可以在多個(gè)方面取代 Flash,文檔共享站點(diǎn)
Scribd最近
宣布,他們將
使用 HTML5 取代 Flash 實(shí)現(xiàn)文檔閱讀器,Scribd 是 HTML5 結(jié)合 CSS 所能實(shí)現(xiàn)的驚人功能的最好例子,他們還使用 @font-face 實(shí)現(xiàn)個(gè)性化字體,另外,在翻頁(yè)時(shí)的變換效果也完全基于 CSS3。這些 Web 標(biāo)準(zhǔn)工具的結(jié)合使用,使 Scribd 實(shí)現(xiàn)了從 Flash 向純 HTML 的過(guò)度,同時(shí)并沒(méi)有犧牲文檔在結(jié)構(gòu),字體,內(nèi)嵌圖片,圖層等方面的功能。Scribd 的最新文檔閱讀器甚至支持 IE6,這里有一個(gè)實(shí)例,
使用純 HTML 輸出復(fù)雜的公式。
可惜被墻了 - 譯者
HTML5 Canvas 與 HTML5 視頻

基于 HTML5 Canvas 對(duì)象的 Invaders 經(jīng)典游戲
雖然,Scribd 對(duì) Canvas 的應(yīng)用已經(jīng)出神入化,我們還能找到更多這樣的站點(diǎn)。
Canvas Demos有一系列關(guān)于 Canvas 的應(yīng)用,從
各種在線游戲,到
從網(wǎng)頁(yè)上提取顏色的
Rainbow應(yīng)用。
關(guān)于視頻,最典型的例子莫過(guò)于
YouTube和
Vimeo,他們都提供了 HTML5 版本。
HTML5 地理信息定位

點(diǎn)擊地圖中,黃色小人上方的圓圈,可以告訴 Google 地圖你的地理位置
HTML5 的另一個(gè)功能是地理信息定位功能,一些瀏覽器提供了
geolocation API,這個(gè) API 也由 W3C 管理,可以結(jié)合 HTML5 實(shí)現(xiàn)你當(dāng)前地理位置定位。
Google Maps在使用該功能,在 Google 地圖上,有一個(gè)小圓圈,點(diǎn)擊一下,就能告訴 Google 地圖你現(xiàn)在的地理位置。目前,Geolocation API 并沒(méi)有被眾多桌面瀏覽器廣泛采用(只有 Chrome 和 Firefox 3.6+ 采用了),但 Google Gears 插件可以幫助那些舊瀏覽器實(shí)現(xiàn)該功能。
借此實(shí)現(xiàn)地理信息感知的 tweets 消息,當(dāng)瀏覽器支持 geolocation API 的時(shí)候,會(huì)自動(dòng)使用該 API,否則,則使用 Google Gears。
HTML5 的更多意義
HTML5 的意義遠(yuǎn)不止上面這些,它最大的意義在于改變了 Web 文檔的結(jié)構(gòu)方式,借助 header, footer, section, article 這些標(biāo)簽,我們可以實(shí)現(xiàn)更具結(jié)構(gòu)化,語(yǔ)義化的 Web 文檔。這樣,搜索引擎可以更容易索引 Web 站點(diǎn),我們也可以搜索到更快,更準(zhǔn)確的信息。
已經(jīng)有數(shù)不清的站點(diǎn)在使用 HTML5 新標(biāo)簽,你可以在
HTML5Gallery找到大量這樣的站點(diǎn)。要想現(xiàn)在使用 HTML5 的新結(jié)構(gòu),不妨看看這篇
HTML5 教程。
另外,借助
Microdata, HTML5 還可以實(shí)現(xiàn)更強(qiáng)大的語(yǔ)義結(jié)構(gòu),這個(gè)標(biāo)準(zhǔn)化的數(shù)據(jù)格式(類似
microformats),可以讓你的站點(diǎn)不僅能夠提供數(shù)據(jù),還能提供數(shù)據(jù)定義。Microdata 對(duì)瀏覽器和搜索引擎都意義深遠(yuǎn),搜索引擎可以借助 Microdata 發(fā)現(xiàn)你網(wǎng)絡(luò)中的好友,而瀏覽器則可以藉此連接到你的社會(huì)網(wǎng)絡(luò)好友站點(diǎn),你可以在 Google 的
Rich Snippets Testing Tool對(duì)此進(jìn)行體驗(yàn)。