1.2 Web標準

大多數網頁設計人員都有這樣的體驗，每次主流瀏覽器版本的升級，都會使用戶建立的網站變得過時，此時就需要升級或者重新建網站。同樣，每當新的網絡技術和交互設備出現時，設計人員也需要制作一個新版本來支持這種新技術或新設備，例如，支持手機上網的WAP技術。類似的問題舉不勝舉，這是一種惡性循環，是一種巨大的浪費。

解決這些問題的方法就是建立一種普遍認同的標準來結束這種無序和混亂，在W3C（W3C.org）的組織下，Web標準開始建立（以2000年10月6日發布XML1.0為標志），并在網站標準組織（WebStandards.org）的督促下推廣執行。

1.2.1 Web標準的概念

Web標準不是某一種標準，而是一系列標準的集合。網頁主要由3部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分為3類：結構化標準語言主要包括XHTML和XML，表現標準語言主要為CSS，行為標準主要包括對象模型W3C DOM、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制定的標準，如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

1．結構化標準語言

（1）HTML

HTML是HyperText Markup Language（超文本標記語言）的縮寫，來源于標準通用置標語言（SGML），它是Internet上用于編寫網頁的主要語言。

（2）XML

XML是The eXtensible Markup Language（可擴展標記語言）的縮寫，目前推薦遵循的標準是W3C于2000年10月6日發布的XML1.0。和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其他語言的語言。XML最初設計的目的是彌補HTML的不足，以強大的擴展性滿足網絡信息發布的需要，后來逐漸被用于網絡數據的轉換和描述。

（3）XHTML

XHTML是The eXtensible HyperText Markup Language（可擴展超文本標記語言）的縮寫，目前推薦遵循的標準是W3C于2000年10月6日發布的XML1.0。XML雖然數據轉換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，在HTML 4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。

2．表現標準語言

CSS是Cascading Style Sheets（層疊樣式表）的縮寫。W3C創建CSS標準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式HTML相結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。

3．行為標準

（1）DOM

DOM是Document Object Model（文檔對象模型）的縮寫。根據W3C DOM規范，DOM是一種與瀏覽器、平臺和語言相關的接口，通過DOM用戶可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscape的JavaScript和Microsoft的JScript之間的沖突，給予Web設計師和開發者一個標準的方法，來解決站點中的數據、腳本和表現層對象的訪問問題。

（2）ECMAScript

ECMAScript是ECMA（European Computer Manufacturers Association）制定的標準腳本語言（JavaScript）。目前，推薦遵循的標準是ECMAScript 262。

1.2.2 建立Web標準的優點

由于存在不同的瀏覽器版本，Web開發者常常需要為多版本的開發而艱苦工作。對于開發人員和最終用戶而言，在開發新的應用程序時，瀏覽器開發商和站點開發商應當遵守共同的標準。Web標準可確保每個人都有權利訪問相同的信息，可以縮短網站開發和維護的時間。

建立Web標準的優點如下。

● 提供最大利益給最多的網站用戶。

● 確保任何網站文檔都能夠長期有效。

● 簡化代碼，降低建設成本。

● 讓網站更容易使用，能適應更多不同用戶和更多網絡設備。

● 當瀏覽器版本更新或者出現新的網絡交互設備時，確保所有應用能夠繼續正確執行。

1.2.3 理解表現和結構相分離

了解了Web標準之后，本節將介紹如何理解表現和結構相分離。在此以一個實例來詳細說明。首先必須先明白一些基本的概念：內容、結構、表現和行為。

1．內容

內容就是頁面實際要傳達的真正信息，包含數據、文檔或圖片等。注意這里強調的“真正”，是指純粹的數據信息本身，不包含任何輔助信息，如圖1-1所示的詩歌頁面等。

2．結構

可以看到上面的文本信息本身已經完整，但是難以閱讀和理解，必須將其格式化，把其分成標題、作者、段落和列表等，如圖1-2所示。

3．表現

雖然定義了結構，但是內容還是原來的樣式沒有改變，例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾等。所有這些用來改變內容外觀的東西，稱之為“表現”。下面是對上面文本用表現處理過后的效果，如圖1-3所示。

4．行為

行為是對內容的交互及操作效果。例如，使用JavaScript可以使內容動起來，可以判斷一些表單提交，進行相應的一些操作。

所有HTML頁面都由結構、表現和行為3個方面內容組成。內容是基礎層，然后是附加上的結構層和表現層，最后再對這3個層做些“行為”。