1.2 Web標(biāo)準(zhǔn)

大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員都有這樣的體驗(yàn)，每次主流瀏覽器版本的升級(jí)都會(huì)使用戶建立的網(wǎng)站變得過時(shí)，此時(shí)就需要升級(jí)或者重新建網(wǎng)站。同樣，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備出現(xiàn)時(shí)，設(shè)計(jì)人員也需要制作一個(gè)新版本來(lái)支持這種新技術(shù)或新設(shè)備。

解決這些問題的方法就是建立一種普遍認(rèn)同的標(biāo)準(zhǔn)來(lái)結(jié)束這種無(wú)序和混亂，在W3C（W3C.org）的組織下，Web標(biāo)準(zhǔn)開始被制定（以2000年10月6日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（WebStandards.org）的督促下推廣執(zhí)行。

1.2.1 什么是Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)不是某一種標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由3部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的Web標(biāo)準(zhǔn)也分為3類：結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要為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，歐洲計(jì)算機(jī)制造商協(xié)會(huì)）的ECMAScript標(biāo)準(zhǔn)。

1.結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言

（1）HTML

HTML來(lái)源于標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言（SGML），它是Internet上用于編寫網(wǎng)頁(yè)的主要語(yǔ)言。

（2）XML

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

（3）XHTML

XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過早。因此，在HTML 4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML（The eXtensible HyperText Markup Language，可擴(kuò)展超文本置標(biāo)語(yǔ)言）。

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

W3C創(chuàng)建CSS（Cascading Style Sheets，層疊樣式表）。標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語(yǔ)言。純CSS布局與結(jié)構(gòu)式HTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問及維護(hù)更加容易。

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

（1）DOM

根據(jù)W3C DOM規(guī)范，DOM（Document Object Model，文檔對(duì)象模型）是一種與瀏覽器、平臺(tái)和語(yǔ)言相關(guān)的接口，通過DOM用戶可以訪問頁(yè)面其他的標(biāo)準(zhǔn)組件。DOM解決了Netscape的JavaScript和Microsoft的JScript之間的沖突，給予Web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，來(lái)解決站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象的訪問問題。

（2）ECMAScript

ECMAScript是ECMA制定的標(biāo)準(zhǔn)腳本語(yǔ)言（JavaScript）。目前，推薦遵循的標(biāo)準(zhǔn)是ECMAScript 262。

1.2.2 理解表現(xiàn)和結(jié)構(gòu)相分離

要理解表現(xiàn)和結(jié)構(gòu)相分離，必須先明白一些基本概念，如內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為。在此以一個(gè)實(shí)例來(lái)詳細(xì)說明。

1.內(nèi)容

內(nèi)容就是頁(yè)面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或圖片等。注意這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身，不包含任何輔助信息，如圖1-3中的詩(shī)歌頁(yè)面。

2.結(jié)構(gòu)

可以看到上面的文本信息本身已經(jīng)完整，但是難以閱讀和理解，必須將其格式化一下。把其分成標(biāo)題、段落和列表等幾個(gè)部分，如圖1-4所示。

3.表現(xiàn)

雖然定義了結(jié)構(gòu)，但是內(nèi)容的樣式?jīng)]有改變，例如標(biāo)題字體沒有變大，正文的背景也沒有變化，列表沒有修飾符號(hào)等。所有這些用來(lái)改變內(nèi)容外觀的東西，稱之為“表現(xiàn)”。下面是對(duì)上面文本用表現(xiàn)處理過后的效果，如圖1-5所示。

4.行為

行為是對(duì)內(nèi)容的交互及操作效果。例如，使用JavaScript可以使內(nèi)容動(dòng)起來(lái)，可以判斷一些表單提交并進(jìn)行相應(yīng)的一些操作。

所有HTML頁(yè)面都由結(jié)構(gòu)、表現(xiàn)和行為3個(gè)方面內(nèi)容組成。內(nèi)容是基礎(chǔ)層，然后是附加的結(jié)構(gòu)層和表現(xiàn)層，最后再對(duì)這3個(gè)層做點(diǎn)“行為”。