馬新強(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的表格布局及落后的后臺技術(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ì)的一個趨勢.同時,新技術(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ā)人員推崇的對象.W3C預(yù)計(jì)在2022年HTML5將會成為世界的主流.新技術(shù)的推出也驅(qū)使著開發(fā)人員開發(fā)模式的轉(zhuǎn)變.

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

Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合.網(wǎng)頁主要由 3部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior).對應(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)主要包括對象模型(如 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)識語言)的簡寫,目前推薦遵循的是 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)識語言)的縮寫[2].XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大,完全可以替代HTML,但面對成千上萬已有的站點(diǎn),直接采用XML還為時過早.因此,我們在HTML4.0的基礎(chǔ)上,用 XML的規(guī)則對其進(jìn)行擴(kuò)展,得到了XHTML.簡單地說,建立 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(文檔對象模型)的縮寫.根據(jù) W 3C DOM規(guī)范[5],DOM是一種與瀏覽器、平臺、語言的接口,使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件.簡單理解,DOM解決了Netscaped的 JavaScript和 Microsoft的 Jscrip t之間的沖突,給予 Web設(shè)計(jì)師和開發(fā)者一個標(biāo)準(zhǔn)的方法,讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對象.

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)對于訪問者:

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

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

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

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

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

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

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

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

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

4.改版方便,不需要變動頁面內(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ù),但是常會因?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帶入一個成熟的應(yī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)簽將有利于搜索引擎的索引整理,同時更好地幫助小屏幕裝置和視障人士使用.除此之外,還為其他瀏覽要素提供了新的功能,如 ＜audio＞和 ＜video＞標(biāo)記.一些過時的 HTML4標(biāo)記將被取消,其中包括純粹顯示效果的標(biāo)記,如 ＜font＞和 ＜center＞,它們已經(jīng)被 CSS取代.

2.1.2 新繪圖畫布模式

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

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

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

2.1.4 新多媒體方式

原生態(tài)視頻和音頻流支持,Youtube和 Pandora可能有一天會跳過 Flash給你帶來全新的視頻和音頻體驗(yàn),包括定時播放和其它貼心的功能,這一切都得歸功于 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ā)者在這些場合是一律使用 div的.新標(biāo)準(zhǔn)適用了一些全新的表單輸入對象,包括日期,URL,Email地址,其它的對象則增加了對非拉丁字符的支持.HTML5還引入了微數(shù)據(jù),一種使用機(jī)器可以識別的標(biāo)簽標(biāo)注內(nèi)容的方法,使語義Web的處理更為簡單.總的來說,這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈、更容易管理的網(wǎng)頁,這樣的網(wǎng)頁對搜索引擎,對讀屏軟件等更為友好.

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

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

圖表說明一個典型的用 div元素帶上 id和class屬性標(biāo)記的 2欄布局.其中包括頁首(header)和頁腳(footer),在頁首下面是一個水平導(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語言 存在的 一個問題是,它是一種輕量級的應(yīng)用界面, 那些喜歡使用Ajax實(shí)現(xiàn)在線應(yīng)用的開發(fā)者會發(fā)現(xiàn) HTML非常不好用.HTML作為結(jié)構(gòu)語言加載界面,JavaScript用來執(zhí)行命令,雖然 HTML在作為界面語言方面并不好用,但鑒于多數(shù)開發(fā)者對它的熟悉程度,HTML還是不可缺少.HTML5的出現(xiàn)讓 Ajax應(yīng)用的實(shí)現(xiàn)變得更容易,豐富的 JavaScript API讓結(jié)構(gòu)語言與行為語言結(jié)合得更緊密.

3.2 HTML5與 CSS樣式

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

3.3 HTML5與Flash

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

3.4 HTML5與瀏覽器的兼容

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

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

在HTML5方面的工作得到了各大廠商的大力推動,包括 Adobe、蘋果 、谷歌 、微軟 、Mozilla基金會、Opera軟件公司及其他廠商.這些公司認(rèn)識到需要升級已無法滿足當(dāng)前需求的 HTML標(biāo)準(zhǔn),它們的工作有助于 HTML5的推廣和普及,因此,對 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),以用戶為中心可以讓前端變得很不一樣.通過猜測和研究用戶的操作習(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)了一個社團(tuán)網(wǎng)站(紅星漫影協(xié)會網(wǎng)站),并利用 JQuery框架和 CSS3.0進(jìn)行行為層和表現(xiàn)層的視覺特效制作,采用了標(biāo)準(zhǔn)化的系統(tǒng)具有更好的安全性、可擴(kuò)展性和易維護(hù)性.

5 結(jié)語

在HTML5被廣泛采用之前,我們還無法完全知道 HTML5代碼將帶來的好與壞.對開發(fā)者和圖形設(shè)計(jì)師而言,這將是一個巨大的變化,雖然目前面臨的問題和挑戰(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].自動化與儀器儀表,2010(4):30-33.

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