Web標(biāo)準(zhǔn)與 HTML5的核心技術(shù)研究

馬新強(qiáng),孫 兆,袁 哲,遲鳳利

(重慶文理學(xué)院 計(jì)算機(jī)學(xué)院,重慶 永川 402160)

2010年7月15日,中國互聯(lián)網(wǎng)絡(luò)信息中心(CNNIC)在京發(fā)布了《第26次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》.《報(bào)告》顯示,截至 2010年6月底,我國網(wǎng)民規(guī)模達(dá) 4.2億人,互聯(lián)網(wǎng)普及率持續(xù)上升,增至31.8%[1].網(wǎng)頁的增長速度與網(wǎng)站的增速基本一致,其中相當(dāng)一部分的網(wǎng)站使用的仍然是 HTML的表格布局及落后的后臺(tái)技術(shù),這給網(wǎng)站的使用、維護(hù)、更新都帶來了一定的不便.

目前,仍有大量的網(wǎng)頁開發(fā)人員借助 Front-Page、Dreamweaver等所見即所得工具進(jìn)行網(wǎng)頁的開發(fā).由于不關(guān)心 HTML的性能造成了 table標(biāo)簽的濫用,大量垃圾代碼的生成,造成了帶寬和服務(wù)器方面的負(fù)擔(dān).而 Web標(biāo)準(zhǔn)可以減少網(wǎng)頁代碼,加快打開速度,節(jié)省服務(wù)器帶寬資源;容易被搜索引擎收錄、查詢,改版比較容易等等.按照 Web標(biāo)準(zhǔn)開發(fā)將是網(wǎng)頁設(shè)計(jì)的一個(gè)趨勢(shì).同時(shí),新技術(shù)的不斷推出,陳舊的開發(fā)模式已經(jīng)不是世界的主流.2010年9月,W3C組織正式向公眾推薦的 HTML5是頁面開發(fā)的最新版 HTML語言[2].強(qiáng)大的標(biāo)簽功能和 API已經(jīng)遠(yuǎn)遠(yuǎn)超越了以往的標(biāo)簽語言.加上它面向語義的標(biāo)簽和廢除眾多陳舊的標(biāo)簽和屬性以及體驗(yàn)上的巨大提升,使他成為眾多大公司及開發(fā)人員推崇的對(duì)象.W3C預(yù)計(jì)在2022年HTML5將會(huì)成為世界的主流.新技術(shù)的推出也驅(qū)使著開發(fā)人員開發(fā)模式的轉(zhuǎn)變.

1 Web標(biāo)準(zhǔn)核心技術(shù)

Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合.網(wǎng)頁主要由 3部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior).對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面:結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括 XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)語言主要包括 CSS,行為標(biāo)準(zhǔn)主要包括對(duì)象模型(如 W3C DOM)、ECMAScript等.這些標(biāo)準(zhǔn)大部分由 W3C起草和發(fā)布,也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn),比如 ECMA(European Computer Manufacturers Association)的ECMAScript標(biāo)準(zhǔn).Web標(biāo)準(zhǔn)組成如圖1所示.

圖1 Web標(biāo)準(zhǔn)組成

1.1 結(jié)構(gòu)標(biāo)準(zhǔn)語言

1.1.1 XML

XML是 The Extensible Markup Language(可擴(kuò)展標(biāo)識(shí)語言)的簡(jiǎn)寫,目前推薦遵循的是 W3C于 2000年10月6日發(fā)布的 XML1.0[3].和HTML一樣,XML同樣來源于 SGML,但 XML是一種能定義其他語言的語言.XML最初設(shè)計(jì)的目的是彌補(bǔ) HTML的不足,以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要,后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述.

1.1.2 XHTML

XHTML是The Extensible Hypertext Markup Language(可擴(kuò)展超文本標(biāo)識(shí)語言)的縮寫[2].XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大,完全可以替代HTML,但面對(duì)成千上萬已有的站點(diǎn),直接采用XML還為時(shí)過早.因此,我們?cè)贖TML4.0的基礎(chǔ)上,用 XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展,得到了XHTML.簡(jiǎn)單地說,建立 XHTML的目的就是實(shí)現(xiàn) HTML向 XML的過渡.

1.2 表現(xiàn)標(biāo)準(zhǔn)語言

CSS是 Cascading Style Sheets(層疊樣式表)的縮寫,目前推薦遵循的是 W3C于 1998年5月12日推薦的 CSS2[4].W3C創(chuàng)建 CSS標(biāo)準(zhǔn)的目的是以 CSS取代 HTML表格式布局、幀和其他表現(xiàn)的語言.純 CSS布局與結(jié)構(gòu)式 XHTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu),使站點(diǎn)的訪問及維護(hù)更加容易.

1.3 行為標(biāo)準(zhǔn)

1.3.1 DOM

DOM是 DocumentObjectModel(文檔對(duì)象模型)的縮寫.根據(jù) W 3C DOM規(guī)范[5],DOM是一種與瀏覽器、平臺(tái)、語言的接口,使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件.簡(jiǎn)單理解,DOM解決了Netscaped的 JavaScript和 Microsoft的 Jscrip t之間的沖突,給予 Web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法,讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象.

1.3.2 ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的標(biāo)準(zhǔn)腳本語言(JavaScript).目前推薦遵循的是 ECMAScript 262.

1.4 采用 Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)

1)對(duì)于訪問者:

1.文件下載與頁面顯示速度更快.

2.內(nèi)容能被更多的用戶所訪問(包括失明、視弱、色盲等人士).

3.內(nèi)容能被更廣泛的設(shè)備所訪問(包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱).

4.用戶能夠通過樣式選擇定制自己的表現(xiàn)界面.

5.所有頁面都能提供適于打印的版本.

2)對(duì)于網(wǎng)站所有者:

1.更少的代碼和組件,容易維護(hù).

2.帶寬要求降低(代碼更簡(jiǎn)潔),成本降低.舉個(gè)例子:當(dāng) ESPN.com使用 CSS改版后,每天節(jié)約超過 2M的帶寬.

3.更容易被搜索引擎搜索到.

4.改版方便,不需要變動(dòng)頁面內(nèi)容.

5.提供打印版本而不需要復(fù)制內(nèi)容.

6.提高網(wǎng)站易用性.在美國,有嚴(yán)格的法律條款(Section 508)來約束政府網(wǎng)站必須達(dá)到一定的易用性,其他國家也有類似的要求.

2 HTML5核心技術(shù)

網(wǎng)絡(luò)是不斷進(jìn)化的,新的和有創(chuàng)意的網(wǎng)站每天都在出現(xiàn),從各方面都在沖擊著 HTML的邊界.HTML 4來到我們身邊已經(jīng)差不多有 10年了,發(fā)行者們不斷地尋求提供更強(qiáng)大的功能的新技術(shù),但是常會(huì)因?yàn)闃?biāo)記語言和瀏覽器的約束而路途坎坷.為了給作者們提供更靈活,更具互操作性,能有更多交互性并令人振奮的網(wǎng)站和應(yīng)用程序,HTML5引入并加強(qiáng)了一系列功能,包括表單控制、應(yīng)用程序接口(APIs)、多媒體、結(jié)構(gòu)化和語義化等.

HTML5草案的前身名為 Web Applications 1.0,2004年被 WHATWG提出,2007年被 W 3C接納,并成立了新的 HTML工作團(tuán)隊(duì).2010年9月正式向公眾推薦第一份正式草案.HTML5是近十年來 Web標(biāo)準(zhǔn)最巨大的飛躍.和以前的版本不同,HTML 5并非僅僅用來表示 Web內(nèi)容,它的使命是將 Web帶入一個(gè)成熟的應(yīng)用平臺(tái),在這個(gè)平臺(tái)上,視頻、音頻、圖像、動(dòng)畫以及同電腦的交互都被標(biāo)準(zhǔn)化[6].盡管 HTML 5的實(shí)現(xiàn)還有很長的路要走,但 HTML 5正在改變 Web.

2.1 HTML5新特性

2.1.1 新標(biāo)記

HTML5提供了一些新的元素和屬性,例如＜nav＞(網(wǎng)站導(dǎo)航塊)和 ＜footer＞.這種標(biāo)簽將有利于搜索引擎的索引整理,同時(shí)更好地幫助小屏幕裝置和視障人士使用.除此之外,還為其他瀏覽要素提供了新的功能,如 ＜audio＞和 ＜video＞標(biāo)記.一些過時(shí)的 HTML4標(biāo)記將被取消,其中包括純粹顯示效果的標(biāo)記,如 ＜font＞和 ＜center＞,它們已經(jīng)被 CSS取代.

2.1.2 新繪圖畫布模式

HTML5的 canvas元素使用 JavaScript在網(wǎng)頁上繪制圖像.畫布是一個(gè)矩形區(qū)域,可以是圖片、圖表和游戲組件,現(xiàn)在可以不用 Flash或其它插件就可以直接在網(wǎng)頁上涂鴉了.可以控制其每一像素,canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法.

2.1.3 新應(yīng)用程序接口(API)

除了原先的 DOM接口,HTML5增加了更多API,如用于即時(shí) 2D繪圖的 Canvas標(biāo)簽,定時(shí)媒體回放,離線數(shù)據(jù)庫存儲(chǔ),文檔編輯,拖拽控制,瀏覽歷史管理等.

2.1.4 新多媒體方式

原生態(tài)視頻和音頻流支持,Youtube和 Pandora可能有一天會(huì)跳過 Flash給你帶來全新的視頻和音頻體驗(yàn),包括定時(shí)播放和其它貼心的功能,這一切都得歸功于 HTML5中的視頻和音頻標(biāo)記.

2.1.5 新文檔結(jié)構(gòu)變化與智能表單

HTML5吸取了 XHTML2的一些建議,包括一些用來改善文檔結(jié)構(gòu)的功能.比如,新的HTML標(biāo)簽 header,footer,dialog,aside,figure等的使用,將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔,之前的開發(fā)者在這些場(chǎng)合是一律使用 div的.新標(biāo)準(zhǔn)適用了一些全新的表單輸入對(duì)象,包括日期,URL,Email地址,其它的對(duì)象則增加了對(duì)非拉丁字符的支持.HTML5還引入了微數(shù)據(jù),一種使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注內(nèi)容的方法,使語義Web的處理更為簡(jiǎn)單.總的來說,這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈、更容易管理的網(wǎng)頁,這樣的網(wǎng)頁對(duì)搜索引擎,對(duì)讀屏軟件等更為友好.

2.1.6 新的 HTML元素和屬性

傳統(tǒng)通用元素的語義化版本,如代替 div元素的 nav,footer等元素,也有一些全新的元素,如 audio,video.一些在HTML4中不被保舉利用的元素,如 font和 center將被棄用.HTML5引進(jìn)的新 HTML元素包括:article、aside、audio、canvas、 command、datalist、details、dialog、embed、figure、 footer、header、 hgroup、 keygen、mark、meter、nav、output、progress、rp、 rt、ruby、section、source、time、video.這些新標(biāo)簽可以讓你的 HTML文檔更便利加載,且更便于被搜索引擎抓取此中的有效信息,好比搜索引擎可以間接抓取它最關(guān)切的article標(biāo)簽內(nèi)里的內(nèi)容.

2.2 HTML5與 Web標(biāo)準(zhǔn)比較

HTML 5引入了一整套全新的元素來讓構(gòu)建頁面變得更加簡(jiǎn)單.大多數(shù)基于 HTML 4的頁面包含多種常用結(jié)構(gòu),比如說頁首(header)、頁腳(footer)和縱列(column).現(xiàn)階段我們通常會(huì)用div元素標(biāo)記這些區(qū)塊,然后為它們定義一個(gè)描述性的 id或是 class.如圖2所示.

圖2 HTML 5與 HTML 4結(jié)構(gòu)對(duì)比圖

圖表說明一個(gè)典型的用 div元素帶上 id和class屬性標(biāo)記的 2欄布局.其中包括頁首(header)和頁腳(footer),在頁首下面是一個(gè)水平導(dǎo)航條,主體內(nèi)容又包含了文章(article)和它右邊的側(cè)邊欄(sidebar).大量地使用 div元素是因?yàn)槟壳暗?HTML4版本缺少更明確的語義描述這些區(qū)塊所致.HTML 5為了表現(xiàn)這些不同的區(qū)塊而引入了新的元素.那些 div元素可以被新的元素代替了:header,nav,section,article,aside以及footer.

3 HTML5與 Web中流行技術(shù)的共存

目前 Web世界已經(jīng)習(xí)慣了各種插件和 API,HTML5為 Web開發(fā)與設(shè)計(jì)者帶來了方便與不便,HTML5將如何同現(xiàn)在的這些流行技術(shù)共存呢?

3.1 HTML5與Ajax

現(xiàn)在的 HTML語言 存在的 一個(gè)問題是,它是一種輕量級(jí)的應(yīng)用界面, 那些喜歡使用Ajax實(shí)現(xiàn)在線應(yīng)用的開發(fā)者會(huì)發(fā)現(xiàn) HTML非常不好用.HTML作為結(jié)構(gòu)語言加載界面,JavaScript用來執(zhí)行命令,雖然 HTML在作為界面語言方面并不好用,但鑒于多數(shù)開發(fā)者對(duì)它的熟悉程度,HTML還是不可缺少.HTML5的出現(xiàn)讓 Ajax應(yīng)用的實(shí)現(xiàn)變得更容易,豐富的 JavaScript API讓結(jié)構(gòu)語言與行為語言結(jié)合得更緊密.

3.2 HTML5與 CSS樣式

你需對(duì)你的 CSS代碼就行整理以支持 HTML5,因?yàn)?h1,h2之類的標(biāo)簽將不再使用,為了實(shí)現(xiàn)同 HTML5的兼容,最好的方式是使用 CSS reset,將那些常見的 HTML標(biāo)簽的 CSS屬性清零.隨著 CSS3.0的推出,CSS將會(huì)給用戶帶來更多驚喜.

3.3 HTML5與Flash

Flash被某些開發(fā)設(shè)計(jì)者濫用導(dǎo)致一些網(wǎng)頁加載緩慢,而 HTML5為之帶來一線曙光.拿仍在襁褓中的 HTML5和已經(jīng)有 10年歷史的Flash進(jìn)行比較也許有失公允,但這是人人都關(guān)心的一個(gè)問題[7].相對(duì) Windows用戶來說,Mac用戶可能會(huì)從 HTML5獲得更多好處,因?yàn)樘O果一直不愿支持 Flash.下面是 Mike Chambers針對(duì) Mac和Windows平臺(tái)瀏覽器的 CPU負(fù)載而做的一部分測(cè)試.測(cè)試顯示,Mac平臺(tái)的 Flash表現(xiàn)要差于Windows平臺(tái),這還取決于你使用的瀏覽器.現(xiàn)在看來,就視頻游戲而言,Flash是更好的選擇,但取決于你的瀏覽器,如果你的視頻不是很復(fù)雜,HTML5是更好的選擇.Web開發(fā)與設(shè)計(jì)者從這些爭(zhēng)論中應(yīng)該吸取的東西是,Flash之外還有別的選擇,但 Flash有牢固的地盤,在為客戶提供開發(fā)設(shè)計(jì)的時(shí)候,需要對(duì)他們的目標(biāo)客戶做一些研究.關(guān)于 HTML5與 Flash的爭(zhēng)論,各方也持有不同的觀點(diǎn),51CTO之前也曾報(bào)導(dǎo)過很多這樣的文章.比如,“當(dāng) Flash遇到 HTML5互聯(lián)網(wǎng)視頻傾向哪方?”“HTML5來臨 Flash死亡倒計(jì)時(shí)”,“HTML5代表未來插件不會(huì)銷聲匿跡”,等等.

3.4 HTML5與瀏覽器的兼容

HTML5技術(shù)的推廣離不開各大瀏覽器廠商的支持,同時(shí)各大瀏覽器制作廠商也遇見到了HTML5的前景.包括谷歌的 Chrome、蘋果的 Safari、Mozilla的 Firefox、Opera Software ASA的 Opera以及微軟公司的 IE9在內(nèi)的主流瀏覽器均不同程度地對(duì) HTML5提供了一定的支持.隨著HTML5草案的不斷完善,更多的兼容與更好的支持一定會(huì)讓 HTML5得到更好的推廣.

4 技術(shù)應(yīng)用

在HTML5方面的工作得到了各大廠商的大力推動(dòng),包括 Adobe、蘋果 、谷歌 、微軟 、Mozilla基金會(huì)、Opera軟件公司及其他廠商.這些公司認(rèn)識(shí)到需要升級(jí)已無法滿足當(dāng)前需求的 HTML標(biāo)準(zhǔn),它們的工作有助于 HTML5的推廣和普及,因此,對(duì) Web開發(fā)人員來說,HTML5機(jī)遇實(shí)在誘人,不容忽視.騰訊公司推出 WebQQ2.0,在瀏覽器上實(shí)現(xiàn)優(yōu)秀的桌面體驗(yàn)告訴我們,其實(shí)前端可以做很多事情,Web產(chǎn)品已經(jīng)不僅僅是由網(wǎng)頁組成的,而是實(shí)現(xiàn)各種交互功能的軟件產(chǎn)品.WebQQ2.0所使用的頁面語言是 HTML5,雖然HTML5還得不到瀏覽器的全面支持,但已經(jīng)看到了未來網(wǎng)絡(luò)的一角.除了新的技術(shù)外還有那些讓人炫目的新體驗(yàn),以用戶為中心可以讓前端變得很不一樣.通過猜測(cè)和研究用戶的操作習(xí)慣讓我們可以做到很多曾經(jīng)做不到的東西.

國內(nèi)外很多的知名互聯(lián)網(wǎng)企業(yè)早已經(jīng)開始嘗試實(shí)驗(yàn)并使用 HTML5,比如谷歌和網(wǎng)易郵箱的附件拖拽,谷歌首頁,淘寶的部分特效,以及部分視頻播放、游戲等應(yīng)用.

結(jié)合 Web標(biāo)準(zhǔn)的設(shè)計(jì)思想與 HTML5的部分技術(shù)我們實(shí)現(xiàn)了一個(gè)社團(tuán)網(wǎng)站(紅星漫影協(xié)會(huì)網(wǎng)站),并利用 JQuery框架和 CSS3.0進(jìn)行行為層和表現(xiàn)層的視覺特效制作,采用了標(biāo)準(zhǔn)化的系統(tǒng)具有更好的安全性、可擴(kuò)展性和易維護(hù)性.

5 結(jié)語

在HTML5被廣泛采用之前,我們還無法完全知道 HTML5代碼將帶來的好與壞.對(duì)開發(fā)者和圖形設(shè)計(jì)師而言,這將是一個(gè)巨大的變化,雖然目前面臨的問題和挑戰(zhàn)依然很多,但這絲毫不影響HTML5成為未來網(wǎng)絡(luò)應(yīng)用開發(fā)的核心技術(shù).

[1]CNNIC.第26次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R/OL].2010-07-15(2010-10-11).http://www.cnnic.net.cn/htm l/Dir/2010/07/15/5921.htm.

[2]W 3C.HTML52 A vocabulary and associated APIs for HTML and XHTML[EB/OL].2010-08-12(2010-11-01).http://www.w3.org/TR/html5.

[3]W3C.REC-XML[EB/OL].2010-07-15(2010-11-01)www.w 3.org/TR/2000/REC-XML.

[4]W 3C.CSSBrowsers[EB/OL].2010-07-15(2010-11-02).http://www.w3.org/Style/CSS.

[5]W 3C.DOM[EB/OL].2010-07-15(2010-11-02).http://www.w3.org/DOM/.

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

[7]唐燦.下一代 Web界面前端技術(shù)綜述[J].重慶工商大學(xué)學(xué)報(bào):自然科學(xué)版,2009,4(26):350-355.