基于Ｗ３Ｃ標(biāo)準(zhǔn)的網(wǎng)頁開發(fā)技術(shù)

摘要：該文闡述了W3C標(biāo)準(zhǔn)制訂的意義與內(nèi)容，以及W3C為標(biāo)準(zhǔn)的DIV+CSS、XML、DOM網(wǎng)頁開發(fā)技術(shù)，XHTML與HTML的區(qū)別，提出了基于W3C技術(shù)的網(wǎng)頁校驗(yàn)方法。

關(guān)鍵詞：W3C；XHTML；XML；CSS

中圖分類號：TP311.52 文獻(xiàn)標(biāo)識碼: A 文章編號：1009-3044(2008)35-2473-02

Homepage Design Technology Based on W3C Standard

YU Guo-hong

(Chien-shiung Institute of Technology， Taicang 215411， China)

Abstract: The paper illustrates the significance and content that the W3C standard works out， comment that DIV + CSS，XML，DOM Web page develop technology base on W3C standard， the difference of XHTML and HTML， web page checking method based on W3C technology.

Key words: W3C; XHTML; XML; CSS

1 前言

傳統(tǒng)網(wǎng)頁大多數(shù)采用表格布局、表現(xiàn)與結(jié)構(gòu)混雜在一起，1996-1999年的Netscape、Mozila、Opera和IE瀏覽器之爭，為了兼容不同的瀏覽器，網(wǎng)站不得不為不同瀏覽器寫不同的代碼。隨著手機(jī)上網(wǎng)的實(shí)現(xiàn)，網(wǎng)站代碼臃腫，浪費(fèi)了大量的帶寬，網(wǎng)頁的頁面載入緩慢。另外，不易用的代碼使殘障人無法瀏覽網(wǎng)站，類似的問題舉不勝舉，這些問題催生了W3C標(biāo)準(zhǔn)的制訂，引發(fā)了網(wǎng)頁制作的新革命。

W3C是“World Wide Web Consortium”的縮寫，即互聯(lián)網(wǎng)聯(lián)盟。W3C于1994年10月在麻省理工學(xué)院計算機(jī)科學(xué)實(shí)驗(yàn)室成立。建立者是互聯(lián)網(wǎng)的發(fā)明者蒂姆.貝納斯-李（Tim Berners-Lee）。為了解決Web應(yīng)用中不同平臺、技術(shù)和開發(fā)者帶來的不兼容問題，保障Web信息的順利和完整流通，互聯(lián)網(wǎng)聯(lián)盟于1998年制定了一系列標(biāo)準(zhǔn)并督促Web應(yīng)用開發(fā)者和內(nèi)容提供者遵循這些標(biāo)準(zhǔn)。

2 W3C標(biāo)準(zhǔn)的內(nèi)容

W3C標(biāo)準(zhǔn)的內(nèi)容包括使用語言的規(guī)范，開發(fā)中使用的準(zhǔn)則和解釋引擎的行為等。W3C也制定了包括html、Xhtml、XML和CSS等眾多影響深遠(yuǎn)的標(biāo)準(zhǔn)規(guī)范。

W3C的目標(biāo)是能夠兼容各種移動技術(shù)，不僅僅是當(dāng)前廣泛應(yīng)用的技術(shù)，還包括以后將會出現(xiàn)的技術(shù)。

＜E:\\2008學(xué)術(shù)交流\\200學(xué)術(shù)交流第四卷第八期(2008總第35期)\\第2次110篇\\2.3多媒體技術(shù)及其應(yīng)用\\ygh1.tif＞

3 符合W3C標(biāo)準(zhǔn)的網(wǎng)頁開發(fā)技術(shù)

網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的W3C標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（DOM）、ECMAScript等。

3.1 Web標(biāo)準(zhǔn)化的XHTML與HTML的區(qū)別

XHTML，“Extensible Hypertext Markup Language”的縮寫，2000年，國際W3C(World Wide Web Consortium)組織公布發(fā)行了XHTML 1.0版本。XHTML 1.0是一種在HTML 4.0基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用。XHTML是一種增強(qiáng)了的HTML，它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。HTML4.0的時代，表格成為幾乎所有的網(wǎng)頁設(shè)計用來布局的工具， 而在XHTML1.0時代，表格并不是用來布局的，而僅僅只是數(shù)據(jù)顯示。

3.2 Web標(biāo)準(zhǔn)化DIV+CSS的開發(fā)技術(shù)

CSS，即層疊式樣式表(Casecading Style Sheet)，是一種控制頁面的外觀并且將文檔的表現(xiàn)部分與內(nèi)容分隔開的技術(shù)。與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，在W3C網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，棄用HTML+table設(shè)計頁面的原因：一旦布局表格確定以后，就無法再更改。

CSS排版是一種很新的理念，它將頁面首先在整體上進(jìn)行＜div＞標(biāo)記的分塊，然后對各個塊進(jìn)行CSS定位，最后在各個塊中填入內(nèi)容。采用上述CSS+DIV的方式實(shí)現(xiàn)各種定位，使網(wǎng)頁的頁面載入得更快，一旦修改網(wǎng)頁設(shè)計時，效率更高而代價更低。

一個網(wǎng)站通常包括標(biāo)志和站點(diǎn)名稱、主頁面內(nèi)容、站點(diǎn)導(dǎo)航（主菜單）、子菜單、搜索框、功能區(qū)（例如購物車、收銀臺）、頁腳（版權(quán)和有關(guān)法律聲明）等內(nèi)容。通常采用DIV元素來將這些結(jié)構(gòu)定義出來，類似如下：

＜div id=\"header\"＞＜/div＞

＜div id=\"content\"＞＜/div＞

＜div id=\"globalnav\"＞＜/div＞

＜div id=\"subnav\"＞＜/div＞

＜div id=\"search\"＞＜/div＞

＜div id=\"shop\"＞＜/div＞

＜div id=\"footer\"＞＜/div＞

Div聯(lián)合id和class屬性，提供了一個把結(jié)構(gòu)添加到文檔的通用機(jī)制。id的名稱是控制某一內(nèi)容塊的手段，通過給這個內(nèi)容塊套上DIV并加上唯一的id，就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現(xiàn)，包括標(biāo) 題、列表、圖片、鏈接或者段落等。例如，網(wǎng)頁中的每個元素都可以被結(jié)構(gòu)化，CSS可使得一個有序或無序的列表顯示為徹頭徹尾的導(dǎo)航欄。

在HTML中，引入CSS通常有三種方式：嵌入方式、導(dǎo)入方式、鏈接方式，舉例如下：

使用鏈接方式，需要使用如下語句引入外部CSS文件:

＜link href=\"mystyle.css\" rel=\"stylesheet\" type=\"text/css\" /＞

使用導(dǎo)入方式，需要使用如下語句鏈接入外部CSS文件:

＜style type=\"text/css\"＞

@import \"mystyle.css\";

＜/style＞

兩者的區(qū)別是：使用鏈接方式，會在裝載頁面主體部分前裝載CSS文件，這樣顯示的網(wǎng)頁從一開始就帶有樣式效果。使用導(dǎo)入方式，會在整個頁面裝載完成后再載入CSS文件，這是使用導(dǎo)入方式的缺陷。

3.3 基于W3C標(biāo)準(zhǔn)的XML技術(shù)

XML是Extensible Markup Language（可擴(kuò)展標(biāo)識語言）的簡寫，XML類似HTML，HTML有固定的標(biāo)簽，而XML允許自定義標(biāo)簽。自從1998年W3C組織推出XML 1.0規(guī)范以來，已經(jīng)有大量的XML標(biāo)準(zhǔn)應(yīng)用在網(wǎng)絡(luò)生活中。例如，用手機(jī)訂閱的天氣預(yù)報、股票行情，這些數(shù)據(jù)都是從相應(yīng)的系統(tǒng)獲得然后通過XML格式轉(zhuǎn)換發(fā)送的；還有更多的商業(yè)應(yīng)用，例如公司內(nèi)部的ERP、內(nèi)容管理系統(tǒng)之間的數(shù)據(jù)交互與共享都應(yīng)用了XML。W3C關(guān)于XML規(guī)范的詳細(xì)的說明，請瀏覽網(wǎng)頁：http://www.w3.org/TR/REC-xml。

XML主要有三個要素：Schema（模式）、XSL（可擴(kuò)展樣式語言）和XLL（可擴(kuò)展鏈接語言）。定義XML文檔的方法有兩種：DTD和XML Schema，DTD包括標(biāo)記聲明或參數(shù)實(shí)體引用，有時還包括外部實(shí)體的ID，由于DTD比較復(fù)雜，因此引入Schema模式。Schema相對于DTD的明顯好處是XML Schema文檔本身也是XML文檔，而不是像DTD一樣使用自成一體的語法。

XML的鏈接相對HTML來說，鏈接本身成為了對象， 可以象其他對象一樣被管理，鏈接包括三部分：

1) Xpath： 主要目的是進(jìn)行部分而不是整個XML文檔的實(shí)際尋址。

2) XLink： 利用XML句法創(chuàng)建結(jié)構(gòu)來描述目前的HTML的單向鏈接以及更復(fù)雜的多端和多類型的鏈接。XLink的重要部分是定義兩個或多個數(shù)據(jù)對象或?qū)ο蟛糠种g的關(guān)系。

3) XPointer： 建立在Xpath的基礎(chǔ)上以支持到XML文檔的內(nèi)部結(jié)構(gòu)中的尋址。因此可以使用XML標(biāo)記聯(lián)接到另一個文檔的特殊部分而不必提供ID引用。

XML是未來網(wǎng)頁的趨勢， XML遲早會取代XHTML/HTML，成為未來的網(wǎng)站構(gòu)建中實(shí)現(xiàn)內(nèi)容層的一環(huán)。但就目前而言，XML在實(shí)現(xiàn)網(wǎng)站表現(xiàn)層上有一定困難，使用XML+CSS或XSTL技術(shù)構(gòu)建網(wǎng)站本身技術(shù)上難度還是很高。

3.4 基于W3C標(biāo)準(zhǔn)的DOM技術(shù)

DOM(Document Object Model)，即“文檔對象模型”，基于語義的邏輯結(jié)構(gòu)，DOM將網(wǎng)頁內(nèi)的元素與內(nèi)容呈現(xiàn)為一個清晰、易讀的樹狀模型，采用DOM（文檔對象模型）來管理網(wǎng)頁的數(shù)據(jù)。在樹狀模型中，任何一個元素或是內(nèi)容，都只有自己唯一的一個節(jié)點(diǎn)，用DOM都可以輕易地將這個文檔中的任意一個元素或內(nèi)容檢索出來。對于網(wǎng)頁前端開發(fā)人員而言，DOM就是一個用于檢索網(wǎng)頁內(nèi)任意元素或內(nèi)容的索引目錄，經(jīng)常使用DOM讀取、操作和修改 XML 文檔。

DOM的發(fā)展，與WEB標(biāo)準(zhǔn)化的趨勢相關(guān)甚密。只有基于正確的語義邏輯，DOM才能正確地發(fā)揮其功用。如今，正確的語義結(jié)構(gòu)、表現(xiàn)與內(nèi)容分離等要求，都已經(jīng)成為網(wǎng)頁設(shè)計中的基本要求。因此，在網(wǎng)頁前端開發(fā)中，DOM的存在，無疑是為表現(xiàn)層、行為層甚至內(nèi)容層面的連接提供了一個絕佳的API，成為現(xiàn)在熱門的Ajax應(yīng)用中不可缺少的組成部分。

DOM 現(xiàn)在不僅內(nèi)置于 Web 瀏覽器，而且也成為許多基于 XML 的規(guī)范的一部分。通過DOM來創(chuàng)建XML文檔對象，并加載XML文檔了。從加載的XML文檔中獲取所需要的內(nèi)容，應(yīng)通過DOM樹來訪問樹中的任何一個節(jié)點(diǎn)，也就是對DOM樹的遍歷。通過存取cookie和dom操作調(diào)用不同的CSS樣式表文件來實(shí)現(xiàn)前臺換膚。

DOM是HTML和XML文檔的編程基礎(chǔ)，它定義了處理執(zhí)行文檔的途徑。編程者可以使用DOM增加文檔、定位文檔結(jié)構(gòu)、填加修改刪除文檔元素。

4 W3C的免費(fèi)校驗(yàn)服務(wù)

W3C提供了免費(fèi)的標(biāo)記語言語法校驗(yàn)服務(wù)，網(wǎng)站基本建好后，到W3C組織所提供的驗(yàn)證服務(wù)網(wǎng)頁上進(jìn)行代碼規(guī)范化驗(yàn)證，以便查找錯誤，進(jìn)行修改。驗(yàn)證服務(wù)網(wǎng)頁包含如下：

標(biāo)記驗(yàn)證器：http://validator.w3.org/

可檢驗(yàn)HTML、XHTML、SVG或 MathML格式的網(wǎng)頁

連結(jié)驗(yàn)證器：http://validator.w3.org/checklink

可檢驗(yàn)HTML/XHTML網(wǎng)頁中是否有無效的鏈接。

CSS驗(yàn)證器：http://jigsaw.w3.org/css-validator/

可檢驗(yàn)CSS樣式文件或是使用CSS的網(wǎng)頁。

網(wǎng)頁驗(yàn)證通過后將會得到一個標(biāo)志，通常是XHTML1.0認(rèn)證和CSS驗(yàn)證，請留意“Result: Passed validation”這條信息，這說明頁面通過了校驗(yàn)。

5 結(jié)束語

W3C標(biāo)準(zhǔn)引領(lǐng)著網(wǎng)頁技術(shù)的革命，使得網(wǎng)頁更加規(guī)范，瀏覽速度更快，兼容不同的瀏覽器，維護(hù)也更加方便。目前，符合W3C標(biāo)準(zhǔn)的網(wǎng)站已經(jīng)越來越多，最近新改版的大網(wǎng)站都采用符合W3C標(biāo)準(zhǔn)CSS布局，W3C標(biāo)準(zhǔn)正幫助未來互聯(lián)網(wǎng)成為信息世界中有高穩(wěn)定性、可提升性和強(qiáng)適應(yīng)性的基礎(chǔ)框架。

參考文獻(xiàn)：

[1] 溫謙.CSS設(shè)計徹底研究[M].北京:人民郵電出版社，2007.