阿捷 2004年4月10日星期六 本文轉自：http://www.csdn.net/WebSiteRefactory/
本文觀點：遵循國際網站标準（Web Standards）進行網站設計和改善。
閱讀對象：網站設計人員(yuán)、web應用開(kāi)發人員(yuán)
關鍵字：Web Standards、XML、XHML、CSS、DOM、DOCTYPE、Accessibility
前言
網絡上的變革每天都在發生(shēng)，當我(wǒ)(wǒ)們覺得網站設計技術已經非常簡單和熟悉的時候。國外(wài)網站設計标準化的概念早已悄悄的形成和迅速“蔓延”，自2000年起，大(dà)部分(fēn)新發行的浏覽器版本都開(kāi)始支持網站标準。主流的網頁編輯工(gōng)具也開(kāi)始全面支持網站标準，甚至一(yī)些軟件幾乎完全由XML文件組成，例如Dreamweaver MX。一(yī)些著名的大(dà)型商(shāng)業網站開(kāi)始采用網站标準來重新構建（例如體(tǐ)育資(zī)訊www.espn.com），另外(wài)一(yī)些則拒絕非标準浏覽器浏覽它們的網站（例如連線雜(zá)志(zhì)www.wired.com）。衆多的設計網站(例如：www.k10k.net) 和個人網站更是标準推廣的先行者，紛紛轉向采用XHTML+CSS來建立。2004年2月4日XML1.1推薦标準正式發布，标志(zhì)着網站設計的标準時代已經到來。
國外(wài)網站标準的聲勢洶湧，但國内業界顯得有些後知(zhī)後覺或者毫無興趣，讓我(wǒ)(wǒ)們來看看國内三大(dà)門戶網站首頁對網站标準的遵循情況：
校驗項目 校驗目标網站 校驗結果
代碼校驗(XHTML)
(校驗地址：http://validator.w3.org/、
(http://www.htmlhelp.com/tools/validator/ ) www.sina.com.cn 失敗，混雜(zá)的HTML，未達到XHTML1。黃色警報：字符集錯誤。(定義了GB2312，但頁内使用了非GB2312字符)。非标準代碼43處。
www.163.com 失敗，混雜(zá)的HTML，未達到XHTML1。紅色警報：未定義DOCTYPE。非标準代碼41處。
www.sohu.com 失敗，混雜(zá)的HTML，未達到XHTML1。黃色警報：字符集錯誤。非标準代碼38處。
CSS2校驗
(校驗地址：http://jigsaw.w3.org/css-validator/validator-uri.html ) www.sina.com.cn 25處錯誤。
www.163.com 1處警告，10處錯誤。
www.sohu.com 1處警告，15處錯誤。
校驗結果顯示所有門戶網站都沒有符合網站标準，甚至連HTML4.0标準都沒有遵循。舉例來說：<FONT>标簽，早在1998年4月HTML4.0标準中(zhōng)就已經被W3C列爲“不建議使用(deprecated)”标簽。但我(wǒ)(wǒ)們的三大(dà)門戶網站首頁上都有不少類似<font color=red>的代碼。這裏的簡單列表，目的不是批評這些網站做得不好（事實上大(dà)部分(fēn)的大(dà)型商(shāng)業站點都通不過W3C嚴格的正确性校驗），有很多的原因造成這種狀況，例如采用老的信息發布系統，網頁設計人員(yuán)的技術和意識不夠等等。我(wǒ)(wǒ)們隻是想說明一(yī)點：連比較規範的上市公司的網站都沒有意識到遵循标準，其他規模教小(xiǎo)的商(shāng)業網站就更不用說，國内對網站标準沒有足夠的重視。
讓我(wǒ)(wǒ)們趕緊跟上新時代的步伐，一(yī)起來了解一(yī)下(xià)網站标準吧。
一(yī)．爲什麽要建立網站标準
我(wǒ)(wǒ)們大(dà)部分(fēn)人都有深刻體(tǐ)驗，每當主流浏覽器版本的升級，我(wǒ)(wǒ)們剛建立的網站就可能變得過時，我(wǒ)(wǒ)們就需要升級或者重新建造一(yī)遍網站。例如1996-1999年典型的“浏覽器大(dà)戰”，爲了兼容Netscape和IE，網站不得不爲這兩種浏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我(wǒ)(wǒ)們也需要制作一(yī)個新版本來支持這種新技術或新設備，例如支持手機上網的WAP技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜(zá)浪費(fèi)了我(wǒ)(wǒ)們大(dà)量的帶寬；針對某種浏覽器的DHTML特效，屏蔽了部分(fēn)潛在的客戶；不易用的代碼，殘障人士無法浏覽網站等等。這是一(yī)種惡性循環，是一(yī)種巨大(dà)的浪費(fèi)。
如何解決這些問題呢？有識之士早已開(kāi)始思考，需要建立一(yī)種普遍認同的标準來結束這種無序和混亂。商(shāng)業公司(Netscape、Microsoft等)也終于認識到統一(yī)标準的好處，因此在W3C（W3C.org）的組織下(xià)，網站标準開(kāi)始被建立（1998年2月10日發布XML1.0爲标志(zhì)），并在網站标準組織（webstandards.org）的督促下(xià)推廣執行。
簡單說，網站标準的目的就是：
提供最多利益給最多的網站用戶
确保任何網站文擋都能夠長期有效
簡化代碼、降低建設成本
讓網站更容易使用，能适應更多不同用戶和更多網路設備
當浏覽器版本更新，或者出現新的網絡交互設備時，确保所有應用能夠繼續正确執行。
對于網站設計和開(kāi)發人員(yuán)來說，遵循網站标準就是使用标準；對于你的網站用戶來說，網站标準就是最佳體(tǐ)驗。
訪問量排名世界第4，中(zhōng)國第1的新浪網站，也遭遇非标準DHTML的問題。在最新發布的Netscape7和Mozila1.6浏覽器中(zhōng)，新浪首頁的漂浮廣告全部失效，層疊擠在頁面左下(xià)角。也許那些廣告主認爲損失這些潛在的用戶無所謂。（截圖日期2004年4月12日）
二．什麽是網站标準
網站标準不是某一(yī)個标準，而是一(yī)系列标準的集合。網頁主要由三部分(fēn)組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的标準也分(fēn)三方面：結構化标準語言主要包括XHTML和XML，表現标準語言主要包括CSS，行爲标準主要包括對象模型（如W3C DOM）、ECMAScript等。這些标準大(dà)部分(fēn)由W3C起草和發布，也有一(yī)些是其他标準組織制訂的标準，比如ECMA（European Computer Manufacturers Association）的ECMAScript标準。我(wǒ)(wǒ)們來簡單了解一(yī)下(xià)這些标準：
1．結構标準語言
（1）XML
XML是The Extensible Markup Language(可擴展标識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發布的XML1.0，參考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一(yī)樣，XML同樣來源于SGML，但XML是一(yī)種能定義其他語言的語。XML最初設計的目的是彌補HTML的不足，以強大(dà)的擴展性滿足網絡信息發布的需要，後來逐漸用于網絡數據的轉換和描述。關于XML的好處和技術規範細節這裏就不多說了，網上有很多資(zī)料，也有很多書(shū)籍可以參考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可擴展标識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0（參考http://www.w3.org/TR/xhtml1）。XML雖然數據轉換能力強大(dà)，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還爲時過早。因此，我(wǒ)(wǒ)們在HTML4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現HTML向XML的過渡。
2. 表現标準語言
CSS是Cascading Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2（參考http://www.w3.org/TR/CSS2/）。W3C創建CSS标準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式XHTML相結合能幫助設計師分(fēn)離(lí)外(wài)觀與結構，使站點的訪問及維護更加容易。
3.行爲标準
（1）DOM
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範（http://www.w3.org/DOM/），DOM是一(yī)種與浏覽器，平台，語言的接口，使得你可以訪問頁面其他的标準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設計師和開(kāi)發者一(yī)個标準的方法，讓他們來訪問他們站點中(zhōng)的數據、腳本和表現層對像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标準腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
三．遵循标準的網站與傳統網站的區别
傳統網站隻是印刷媒體(tǐ)的延伸，設計目标是保證在4-6個主流浏覽器版本中(zhōng)看起來一(yī)緻。通常的特征是：
以表格爲基礎的布局。
内容與表現方式混雜(zá)在一(yī)起。典型的例子是<font>标簽。
垃圾代碼（非标準代碼）。
不易用的代碼。
語義不正确的代碼。比如<b>不解釋的話(huà)，你根本不明白(bái)這是字體(tǐ)加粗的意思。
而采用網站标準建立的網站是一(yī)個能夠接受各種用戶和各種設備的廣泛的交流溝通工(gōng)具。一(yī)般特征是：
語義正确的标識。即使用能夠表達含義的标簽。保證代碼可以在文本浏覽器、PDAs、搜索引擎中(zhōng)被正确理解。
正确有效的代碼。通過W3C代碼校驗（http://validator.w3.org/）的就是正确代碼。
對人、機都易用的代碼。能夠接受廣泛的用戶和設備的訪問，
用CSS分(fēn)離(lí)表現層和内容。使代碼更簡潔、下(xià)載速度更快，批量修改和定制表現形式更容易。
四．采用網站标準的好處和缺點
1．好處
對網站浏覽者的好處：
文件下(xià)載與頁面顯示速度更快；
内容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；
内容能被更廣泛的設備所訪問（包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等等）
用戶能夠通過樣式選擇定制自己的表現界面
所有頁面都能提供适于打印的版本
對網站所有者的好處：
更少的代碼和組件，容易維護
帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當 ESPN.com 使用 CSS改版後，每天節約超過兩兆字節（terabytes）的帶寬。
更容易被搜尋引擎搜索到
改版方便，不需要變動頁面内容
提供打印版本而不需要複制内容
提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網站必須達到一(yī)定的易用性，其他國家也有類似的要求。
2．缺點
需要花費(fèi)更多時間來學習标準
依然需要注意浏覽器的兼容問題
用 CSS 來實現某些表現反而比表格更爲麻煩
五．怎麽改善現有網站
我(wǒ)(wǒ)們大(dà)部分(fēn)的設計師依舊(jiù)在采用傳統的表格布局、表現與結構混雜(zá)在一(yī)起的方式來建立網站。學習使用XHTML+CSS的方法需要一(yī)個過程，使現有網站符合網站标準也不可能一(yī)步到位。最好的方法是循序漸進，分(fēn)階段來逐步達到完全符合網站标準的目标。如果你是新手，或者對代碼不是很熟悉，也可以采用遵循标準的編輯工(gōng)具，例如Dreamweaver MX 2004，它是目前支持CSS标準最完善的工(gōng)具。
1．初級改善
爲頁面添加正确的DOCTYPE
很多設計師和開(kāi)發者都不知(zhī)道什麽是DOCTYPE，DOCTYPE有什麽用。DOCTYPE
是document type的簡寫。主要用來說明你用的XHTML或者HTML是什麽版本。浏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。所以，如果你不注意設置了錯誤的DOCTYPE，結果會讓你大(dà)吃一(yī)驚。XHTML1.0提供了三種DOCTYPE可選擇：
過渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嚴格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
對于我(wǒ)(wǒ)們初級改善來說，隻要選用過渡型的聲明就可以了。它依然可以兼容你的表格布局、表現标識等，不至于讓你覺得變化太大(dà)，難以掌握。
Tip:你懶得輸入上面過渡型代碼的話(huà)，可以訪問http://www.macromedia.com/網站的首頁，然後查看源代碼，把head區同樣的代碼拷貝粘貼就可以了。
設定一(yī)個名字空間（Namespace）
直接在DOCTYPE聲明後面添加如下(xià)代碼：
<html XMLns="http://www.w3.org/1999/xhtml" >
一(yī)個namespace是收集元素類型和屬性名字的一(yī)個詳細的DTD，namespace聲明允許你通過一(yī)個在線地址指向來識别你的namespace。隻要照樣輸入代碼就可以。
聲明你的編碼語言
爲了被浏覽器正确解釋和通過标識校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下(xià)：
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
這裏聲明的編碼語言是簡體(tǐ)中(zhōng)文GB2312，你如果需要制作繁體(tǐ)内容，可以定義爲BIG5。
用小(xiǎo)寫字母書(shū)寫所有的标簽
XML對大(dà)小(xiǎo)寫是敏感的，所以，XHTML也是大(dà)小(xiǎo)寫有區别的。所有的XHTML元素和屬性的名字都必須使用小(xiǎo)寫。否則你的文檔将被W3C校驗認爲是無效的。例如下(xià)面的代碼是不正确的：
<TITLE>公司簡介</TITLE>
正确的寫法是：
<title>公司簡介</title>
同樣的，<P>改成<p>，<B>改成<b>等等。這步轉換很簡單。
爲圖片添加 alt 屬性
爲所有圖片添加alt屬性。alt屬性指定了當圖片不能顯示的時候就顯示供替換文本，這樣做對正常用戶可有可無，但對純文本浏覽器和使用屏幕閱讀機的用戶來說是至關重要的。隻有添加了alt屬性，代碼才會被W3C正确性校驗通過。注意的是我(wǒ)(wǒ)們要添加有意義的alt屬性，象下(xià)面這樣的寫法毫無意義：
<img src=”logo_unc_120x30.gif” alt=” logo_unc_120x30.gif”>
正确的寫法：
<img src=”logo_unc_120x30.gif” alt=”UNC公司标志(zhì)，點擊返回首頁”>
給所有屬性值加引号
在HTML中(zhōng)，你可以不需要給屬性值加引号，但是在XHTML中(zhōng)，它們必須被加引号。
例：height=”100”，而不能是height=100。
關閉所有的标簽
在XHTML中(zhōng)，每一(yī)個打開(kāi)的标簽都必須關閉。就象這樣：
<p>每一(yī)個打開(kāi)的标簽都必須關閉。</p>
<b>HTML可以接受不關閉的标，XHTML就不可以。</b>
這個規則可以避免HTML的混亂和麻煩。舉例來說：如果你不關閉圖像标簽，在一(yī)些浏覽器中(zhōng)就可能出現CSS顯示問題。用這種方法能确保頁面和你設計的一(yī)樣顯示。需要說明的是：空标簽也要關閉，在标簽尾部使用一(yī)個正斜杠“/”來關閉它們自己。例如：
<br />
<img src="webstandards.gif" />
經過上述七個規則處理後，頁面就基本符合XHTML1.0的要求。但我(wǒ)(wǒ)們還需要校驗一(yī)下(xià)是否真的符合标準了。我(wǒ)(wǒ)們可以利用W3C提供免費(fèi)校驗服務（http://validator.w3.org/）。發現錯誤後逐個修改。在後面的資(zī)源列表中(zhōng)我(wǒ)(wǒ)們也提供了其他校驗服務和對校驗進行指導的網址，可以作爲W3C校驗的補充。當最後通過了XHTML驗證，恭喜你已經向網站标準邁出了一(yī)大(dà)步。不是想象中(zhōng)的那麽難吧！
2．中(zhōng)級改善
接下(xià)來我(wǒ)(wǒ)們的改善主要在結構和表現相分(fēn)離(lí)上，這一(yī)步不象第一(yī)步那麽容易實現，我(wǒ)(wǒ)們需要觀念上的轉變，以及對CSS2技術的學習和運用。但學習任何新知(zhī)識都需要花點時間的，不是嗎(ma)？訣竅在于邊做邊學。假如你一(yī)直采用表格布局，根本沒用過 CSS，也不必急于跟表格布局說再見，你可以先用樣式表代替 font 标簽。随着你學到的越多，你能做的就越多。好，一(yī)起來看看我(wǒ)(wǒ)們需要做哪些事：
用CSS定義元素外(wài)觀
我(wǒ)(wǒ)們在寫标識時已經養成習慣，當希望字體(tǐ)大(dà)點就用<h1>，希望在前面加個點符号就用<li>。我(wǒ)(wǒ)們總是想<h1>的意思是大(dà)的，<li>的意思是圓點，<b>的意思是“加粗文本”。而實際上， <h1>能變成你想要的任何樣子，通過CSS，<h1>能變成小(xiǎo)的字體(tǐ)，<p>文本能夠變成巨大(dà)的、粗體(tǐ)的，<li>能夠變成一(yī)張圖片等等。我(wǒ)(wǒ)們不能強迫用結構元素實現表現效果，我(wǒ)(wǒ)們應該使用CSS來确定那些元素的外(wài)觀。例如，我(wǒ)(wǒ)們可以使原來默認的6級标題可以看起來大(dà)小(xiǎo)一(yī)樣：
h1, h2, h3, h4, h5, h6{
font-family: 宋體(tǐ), serif;
font-size: 12px;
}
用結構化元素代替無意義的垃圾
許多人可能從來都不知(zhī)道HTML和XHTML元素設計本意是用來表達結構的。我(wǒ)(wǒ)們很多人已經習慣用元素來控制表現，而不是結構。例如，一(yī)段列表内容可能會使用下(xià)面這樣的标識：
句子一(yī)<br />
句子二<br />
句子三<br />
如果我(wǒ)(wǒ)們采用一(yī)個無序列表代替會更好：
<ul>
<li>句子一(yī)</li>
<li>句子二</li>
<li>句子三</li>
</ul>
你或許會說“但是<li>顯示的是一(yī)個圓點，我(wǒ)(wǒ)不想用圓點”。事實上，CSS沒有設定元素看起來是什麽樣子，你完全可以用CSS關掉圓點。
給每個表格和表單加上id
給表格或表單賦予一(yī)個唯一(yī)的、結構的标記，例如
<table id="menu">
接下(xià)來，在書(shū)寫樣式表的時候，你就可以創建一(yī)個“menu”的選擇器，并且關聯一(yī)個CSS規則，用來告訴表格單元、文本标簽和所有其他元素怎麽去(qù)顯示。這樣，不需要對每個<td>标簽附帶一(yī)些多餘的、占用帶寬的表現層的高、寬、對齊和背景顔色等等屬性。隻需要一(yī)個附着的标記（标記“menu”的id标記），你就可以在一(yī)個分(fēn)離(lí)的樣式表内爲幹淨的、緊湊的代碼标記進行特别的表現層處理。
中(zhōng)級改善我(wǒ)(wǒ)們這裏先列主要的三點，但其中(zhōng)包含的内容和知(zhī)識點非常多，需要我(wǒ)(wǒ)們逐步學習和掌握，直到最後實現完全采用CSS而不才用任何表格實現布局。限于本文是引導推廣之意，不展開(kāi)詳述。
最後我(wǒ)(wǒ)們特别需要補充介紹的是網站的易用性(Accessibility)和交互設計改善，易用性與網站标準有着标準聯系緊密，和網站标準一(yī)樣，都是爲了使我(wǒ)(wǒ)們的網站接受更多的用戶訪問。1990年W3C建立了Web Accessibility Initiative（WAI），給網站建造者提供實現可訪問性的方法和策略（http://www.w3.org/WAI/GL/）。提高易用性和研究交互設計（推薦VB之父Alan Cooper的About Face2.0一(yī)書(shū)）的策略能提高你的開(kāi)發技術，開(kāi)闊視野。提高你作爲專業網頁設計師的價值，使你更具競争力。這正是每個網站所有者和每個設計師或開(kāi)發者要努力達到的目标。
六．網站标準的資(zī)源
1．網站标準
http://www.zeldman.com/
http://webstandards.org/
http://webstandardsgroup.org/
http://www.nypl.org/styleguide/
2．有語義代碼
http://brainstormsandraves.com/articles/semantics/structure/
3．校驗（Validation ）
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
http://webboy.net/presentation/validation.cfm
4．易用性（Accessibility ）
http://www.joeclark.org/
http://www.accessify.com/
http://www.juicystudio.com/
5．樣式表CSS
http://webboy.net/presentation/ict2004/01.htm
http://webboy.net/presentation/ict2004/02.htm
http://webboy.net/presentation/ict2004/03.htm
http://westciv.com/style_master/academy/css_tutorial/
http://css.maxdesign.com.au
http://www.thenoodleincident.com/tutorials/css/
6．實例站點(XHTML+CSS)
http://www.macromedia.com/
http://www.k10k.net
http://www.fyrebase.com/
http://www.onetruefit.com/
http://pixeltable.com/
http://www.fishmarketing.net/
附．參考文章及網站
Jeffrey Zeldman（www.zeldman.com）著作《Design with Web Standards》，該書(shū)已經由電子工(gōng)業出版社引進，即将發行中(zhōng)文版。
Max Design的文章：《The benefits of Web Standards to your visitors, your clients and you!》http://www.maxdesign.com.au/presentation/benefits/index.htm
Mark Pilgrim 《Dive Into Accessibility》http://diveintoaccessibility.org
網站标準組織www.webstandards.org
網站标準團體(tǐ)www.webstandardsgroup.org
本文觀點：遵循國際網站标準（Web Standards）進行網站設計和改善。
閱讀對象：網站設計人員(yuán)、web應用開(kāi)發人員(yuán)
關鍵字：Web Standards、XML、XHML、CSS、DOM、DOCTYPE、Accessibility
前言
網絡上的變革每天都在發生(shēng)，當我(wǒ)(wǒ)們覺得網站設計技術已經非常簡單和熟悉的時候。國外(wài)網站設計标準化的概念早已悄悄的形成和迅速“蔓延”，自2000年起，大(dà)部分(fēn)新發行的浏覽器版本都開(kāi)始支持網站标準。主流的網頁編輯工(gōng)具也開(kāi)始全面支持網站标準，甚至一(yī)些軟件幾乎完全由XML文件組成，例如Dreamweaver MX。一(yī)些著名的大(dà)型商(shāng)業網站開(kāi)始采用網站标準來重新構建（例如體(tǐ)育資(zī)訊www.espn.com），另外(wài)一(yī)些則拒絕非标準浏覽器浏覽它們的網站（例如連線雜(zá)志(zhì)www.wired.com）。衆多的設計網站(例如：www.k10k.net) 和個人網站更是标準推廣的先行者，紛紛轉向采用XHTML+CSS來建立。2004年2月4日XML1.1推薦标準正式發布，标志(zhì)着網站設計的标準時代已經到來。
國外(wài)網站标準的聲勢洶湧，但國内業界顯得有些後知(zhī)後覺或者毫無興趣，讓我(wǒ)(wǒ)們來看看國内三大(dà)門戶網站首頁對網站标準的遵循情況：
校驗項目 校驗目标網站 校驗結果
代碼校驗(XHTML)
(校驗地址：http://validator.w3.org/、
(http://www.htmlhelp.com/tools/validator/ ) www.sina.com.cn 失敗，混雜(zá)的HTML，未達到XHTML1。黃色警報：字符集錯誤。(定義了GB2312，但頁内使用了非GB2312字符)。非标準代碼43處。
www.163.com 失敗，混雜(zá)的HTML，未達到XHTML1。紅色警報：未定義DOCTYPE。非标準代碼41處。
www.sohu.com 失敗，混雜(zá)的HTML，未達到XHTML1。黃色警報：字符集錯誤。非标準代碼38處。
CSS2校驗
(校驗地址：http://jigsaw.w3.org/css-validator/validator-uri.html ) www.sina.com.cn 25處錯誤。
www.163.com 1處警告，10處錯誤。
www.sohu.com 1處警告，15處錯誤。
校驗結果顯示所有門戶網站都沒有符合網站标準，甚至連HTML4.0标準都沒有遵循。舉例來說：<FONT>标簽，早在1998年4月HTML4.0标準中(zhōng)就已經被W3C列爲“不建議使用(deprecated)”标簽。但我(wǒ)(wǒ)們的三大(dà)門戶網站首頁上都有不少類似<font color=red>的代碼。這裏的簡單列表，目的不是批評這些網站做得不好（事實上大(dà)部分(fēn)的大(dà)型商(shāng)業站點都通不過W3C嚴格的正确性校驗），有很多的原因造成這種狀況，例如采用老的信息發布系統，網頁設計人員(yuán)的技術和意識不夠等等。我(wǒ)(wǒ)們隻是想說明一(yī)點：連比較規範的上市公司的網站都沒有意識到遵循标準，其他規模教小(xiǎo)的商(shāng)業網站就更不用說，國内對網站标準沒有足夠的重視。
讓我(wǒ)(wǒ)們趕緊跟上新時代的步伐，一(yī)起來了解一(yī)下(xià)網站标準吧。
一(yī)．爲什麽要建立網站标準
我(wǒ)(wǒ)們大(dà)部分(fēn)人都有深刻體(tǐ)驗，每當主流浏覽器版本的升級，我(wǒ)(wǒ)們剛建立的網站就可能變得過時，我(wǒ)(wǒ)們就需要升級或者重新建造一(yī)遍網站。例如1996-1999年典型的“浏覽器大(dà)戰”，爲了兼容Netscape和IE，網站不得不爲這兩種浏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我(wǒ)(wǒ)們也需要制作一(yī)個新版本來支持這種新技術或新設備，例如支持手機上網的WAP技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜(zá)浪費(fèi)了我(wǒ)(wǒ)們大(dà)量的帶寬；針對某種浏覽器的DHTML特效，屏蔽了部分(fēn)潛在的客戶；不易用的代碼，殘障人士無法浏覽網站等等。這是一(yī)種惡性循環，是一(yī)種巨大(dà)的浪費(fèi)。
如何解決這些問題呢？有識之士早已開(kāi)始思考，需要建立一(yī)種普遍認同的标準來結束這種無序和混亂。商(shāng)業公司(Netscape、Microsoft等)也終于認識到統一(yī)标準的好處，因此在W3C（W3C.org）的組織下(xià)，網站标準開(kāi)始被建立（1998年2月10日發布XML1.0爲标志(zhì)），并在網站标準組織（webstandards.org）的督促下(xià)推廣執行。
簡單說，網站标準的目的就是：
提供最多利益給最多的網站用戶
确保任何網站文擋都能夠長期有效
簡化代碼、降低建設成本
讓網站更容易使用，能适應更多不同用戶和更多網路設備
當浏覽器版本更新，或者出現新的網絡交互設備時，确保所有應用能夠繼續正确執行。
對于網站設計和開(kāi)發人員(yuán)來說，遵循網站标準就是使用标準；對于你的網站用戶來說，網站标準就是最佳體(tǐ)驗。
訪問量排名世界第4，中(zhōng)國第1的新浪網站，也遭遇非标準DHTML的問題。在最新發布的Netscape7和Mozila1.6浏覽器中(zhōng)，新浪首頁的漂浮廣告全部失效，層疊擠在頁面左下(xià)角。也許那些廣告主認爲損失這些潛在的用戶無所謂。（截圖日期2004年4月12日）
二．什麽是網站标準
網站标準不是某一(yī)個标準，而是一(yī)系列标準的集合。網頁主要由三部分(fēn)組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的标準也分(fēn)三方面：結構化标準語言主要包括XHTML和XML，表現标準語言主要包括CSS，行爲标準主要包括對象模型（如W3C DOM）、ECMAScript等。這些标準大(dà)部分(fēn)由W3C起草和發布，也有一(yī)些是其他标準組織制訂的标準，比如ECMA（European Computer Manufacturers Association）的ECMAScript标準。我(wǒ)(wǒ)們來簡單了解一(yī)下(xià)這些标準：
1．結構标準語言
（1）XML
XML是The Extensible Markup Language(可擴展标識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發布的XML1.0，參考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一(yī)樣，XML同樣來源于SGML，但XML是一(yī)種能定義其他語言的語。XML最初設計的目的是彌補HTML的不足，以強大(dà)的擴展性滿足網絡信息發布的需要，後來逐漸用于網絡數據的轉換和描述。關于XML的好處和技術規範細節這裏就不多說了，網上有很多資(zī)料，也有很多書(shū)籍可以參考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可擴展标識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0（參考http://www.w3.org/TR/xhtml1）。XML雖然數據轉換能力強大(dà)，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還爲時過早。因此，我(wǒ)(wǒ)們在HTML4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現HTML向XML的過渡。
2. 表現标準語言
CSS是Cascading Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2（參考http://www.w3.org/TR/CSS2/）。W3C創建CSS标準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式XHTML相結合能幫助設計師分(fēn)離(lí)外(wài)觀與結構，使站點的訪問及維護更加容易。
3.行爲标準
（1）DOM
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範（http://www.w3.org/DOM/），DOM是一(yī)種與浏覽器，平台，語言的接口，使得你可以訪問頁面其他的标準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設計師和開(kāi)發者一(yī)個标準的方法，讓他們來訪問他們站點中(zhōng)的數據、腳本和表現層對像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标準腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
三．遵循标準的網站與傳統網站的區别
傳統網站隻是印刷媒體(tǐ)的延伸，設計目标是保證在4-6個主流浏覽器版本中(zhōng)看起來一(yī)緻。通常的特征是：
以表格爲基礎的布局。
内容與表現方式混雜(zá)在一(yī)起。典型的例子是<font>标簽。
垃圾代碼（非标準代碼）。
不易用的代碼。
語義不正确的代碼。比如<b>不解釋的話(huà)，你根本不明白(bái)這是字體(tǐ)加粗的意思。
而采用網站标準建立的網站是一(yī)個能夠接受各種用戶和各種設備的廣泛的交流溝通工(gōng)具。一(yī)般特征是：
語義正确的标識。即使用能夠表達含義的标簽。保證代碼可以在文本浏覽器、PDAs、搜索引擎中(zhōng)被正确理解。
正确有效的代碼。通過W3C代碼校驗（http://validator.w3.org/）的就是正确代碼。
對人、機都易用的代碼。能夠接受廣泛的用戶和設備的訪問，
用CSS分(fēn)離(lí)表現層和内容。使代碼更簡潔、下(xià)載速度更快，批量修改和定制表現形式更容易。
四．采用網站标準的好處和缺點
1．好處
對網站浏覽者的好處：
文件下(xià)載與頁面顯示速度更快；
内容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；
内容能被更廣泛的設備所訪問（包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等等）
用戶能夠通過樣式選擇定制自己的表現界面
所有頁面都能提供适于打印的版本
對網站所有者的好處：
更少的代碼和組件，容易維護
帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當 ESPN.com 使用 CSS改版後，每天節約超過兩兆字節（terabytes）的帶寬。
更容易被搜尋引擎搜索到
改版方便，不需要變動頁面内容
提供打印版本而不需要複制内容
提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網站必須達到一(yī)定的易用性，其他國家也有類似的要求。
2．缺點
需要花費(fèi)更多時間來學習标準
依然需要注意浏覽器的兼容問題
用 CSS 來實現某些表現反而比表格更爲麻煩
五．怎麽改善現有網站
我(wǒ)(wǒ)們大(dà)部分(fēn)的設計師依舊(jiù)在采用傳統的表格布局、表現與結構混雜(zá)在一(yī)起的方式來建立網站。學習使用XHTML+CSS的方法需要一(yī)個過程，使現有網站符合網站标準也不可能一(yī)步到位。最好的方法是循序漸進，分(fēn)階段來逐步達到完全符合網站标準的目标。如果你是新手，或者對代碼不是很熟悉，也可以采用遵循标準的編輯工(gōng)具，例如Dreamweaver MX 2004，它是目前支持CSS标準最完善的工(gōng)具。
1．初級改善
爲頁面添加正确的DOCTYPE
很多設計師和開(kāi)發者都不知(zhī)道什麽是DOCTYPE，DOCTYPE有什麽用。DOCTYPE
是document type的簡寫。主要用來說明你用的XHTML或者HTML是什麽版本。浏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。所以，如果你不注意設置了錯誤的DOCTYPE，結果會讓你大(dà)吃一(yī)驚。XHTML1.0提供了三種DOCTYPE可選擇：
過渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嚴格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
對于我(wǒ)(wǒ)們初級改善來說，隻要選用過渡型的聲明就可以了。它依然可以兼容你的表格布局、表現标識等，不至于讓你覺得變化太大(dà)，難以掌握。
Tip:你懶得輸入上面過渡型代碼的話(huà)，可以訪問http://www.macromedia.com/網站的首頁，然後查看源代碼，把head區同樣的代碼拷貝粘貼就可以了。
設定一(yī)個名字空間（Namespace）
直接在DOCTYPE聲明後面添加如下(xià)代碼：
<html XMLns="http://www.w3.org/1999/xhtml" >
一(yī)個namespace是收集元素類型和屬性名字的一(yī)個詳細的DTD，namespace聲明允許你通過一(yī)個在線地址指向來識别你的namespace。隻要照樣輸入代碼就可以。
聲明你的編碼語言
爲了被浏覽器正确解釋和通過标識校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下(xià)：
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
這裏聲明的編碼語言是簡體(tǐ)中(zhōng)文GB2312，你如果需要制作繁體(tǐ)内容，可以定義爲BIG5。
用小(xiǎo)寫字母書(shū)寫所有的标簽
XML對大(dà)小(xiǎo)寫是敏感的，所以，XHTML也是大(dà)小(xiǎo)寫有區别的。所有的XHTML元素和屬性的名字都必須使用小(xiǎo)寫。否則你的文檔将被W3C校驗認爲是無效的。例如下(xià)面的代碼是不正确的：
<TITLE>公司簡介</TITLE>
正确的寫法是：
<title>公司簡介</title>
同樣的，<P>改成<p>，<B>改成<b>等等。這步轉換很簡單。
爲圖片添加 alt 屬性
爲所有圖片添加alt屬性。alt屬性指定了當圖片不能顯示的時候就顯示供替換文本，這樣做對正常用戶可有可無，但對純文本浏覽器和使用屏幕閱讀機的用戶來說是至關重要的。隻有添加了alt屬性，代碼才會被W3C正确性校驗通過。注意的是我(wǒ)(wǒ)們要添加有意義的alt屬性，象下(xià)面這樣的寫法毫無意義：
<img src=”logo_unc_120x30.gif” alt=” logo_unc_120x30.gif”>
正确的寫法：
<img src=”logo_unc_120x30.gif” alt=”UNC公司标志(zhì)，點擊返回首頁”>
給所有屬性值加引号
在HTML中(zhōng)，你可以不需要給屬性值加引号，但是在XHTML中(zhōng)，它們必須被加引号。
例：height=”100”，而不能是height=100。
關閉所有的标簽
在XHTML中(zhōng)，每一(yī)個打開(kāi)的标簽都必須關閉。就象這樣：
<p>每一(yī)個打開(kāi)的标簽都必須關閉。</p>
<b>HTML可以接受不關閉的标，XHTML就不可以。</b>
這個規則可以避免HTML的混亂和麻煩。舉例來說：如果你不關閉圖像标簽，在一(yī)些浏覽器中(zhōng)就可能出現CSS顯示問題。用這種方法能确保頁面和你設計的一(yī)樣顯示。需要說明的是：空标簽也要關閉，在标簽尾部使用一(yī)個正斜杠“/”來關閉它們自己。例如：
<br />
<img src="webstandards.gif" />
經過上述七個規則處理後，頁面就基本符合XHTML1.0的要求。但我(wǒ)(wǒ)們還需要校驗一(yī)下(xià)是否真的符合标準了。我(wǒ)(wǒ)們可以利用W3C提供免費(fèi)校驗服務（http://validator.w3.org/）。發現錯誤後逐個修改。在後面的資(zī)源列表中(zhōng)我(wǒ)(wǒ)們也提供了其他校驗服務和對校驗進行指導的網址，可以作爲W3C校驗的補充。當最後通過了XHTML驗證，恭喜你已經向網站标準邁出了一(yī)大(dà)步。不是想象中(zhōng)的那麽難吧！
2．中(zhōng)級改善
接下(xià)來我(wǒ)(wǒ)們的改善主要在結構和表現相分(fēn)離(lí)上，這一(yī)步不象第一(yī)步那麽容易實現，我(wǒ)(wǒ)們需要觀念上的轉變，以及對CSS2技術的學習和運用。但學習任何新知(zhī)識都需要花點時間的，不是嗎(ma)？訣竅在于邊做邊學。假如你一(yī)直采用表格布局，根本沒用過 CSS，也不必急于跟表格布局說再見，你可以先用樣式表代替 font 标簽。随着你學到的越多，你能做的就越多。好，一(yī)起來看看我(wǒ)(wǒ)們需要做哪些事：
用CSS定義元素外(wài)觀
我(wǒ)(wǒ)們在寫标識時已經養成習慣，當希望字體(tǐ)大(dà)點就用<h1>，希望在前面加個點符号就用<li>。我(wǒ)(wǒ)們總是想<h1>的意思是大(dà)的，<li>的意思是圓點，<b>的意思是“加粗文本”。而實際上， <h1>能變成你想要的任何樣子，通過CSS，<h1>能變成小(xiǎo)的字體(tǐ)，<p>文本能夠變成巨大(dà)的、粗體(tǐ)的，<li>能夠變成一(yī)張圖片等等。我(wǒ)(wǒ)們不能強迫用結構元素實現表現效果，我(wǒ)(wǒ)們應該使用CSS來确定那些元素的外(wài)觀。例如，我(wǒ)(wǒ)們可以使原來默認的6級标題可以看起來大(dà)小(xiǎo)一(yī)樣：
h1, h2, h3, h4, h5, h6{
font-family: 宋體(tǐ), serif;
font-size: 12px;
}
用結構化元素代替無意義的垃圾
許多人可能從來都不知(zhī)道HTML和XHTML元素設計本意是用來表達結構的。我(wǒ)(wǒ)們很多人已經習慣用元素來控制表現，而不是結構。例如，一(yī)段列表内容可能會使用下(xià)面這樣的标識：
句子一(yī)<br />
句子二<br />
句子三<br />
如果我(wǒ)(wǒ)們采用一(yī)個無序列表代替會更好：
<ul>
<li>句子一(yī)</li>
<li>句子二</li>
<li>句子三</li>
</ul>
你或許會說“但是<li>顯示的是一(yī)個圓點，我(wǒ)(wǒ)不想用圓點”。事實上，CSS沒有設定元素看起來是什麽樣子，你完全可以用CSS關掉圓點。
給每個表格和表單加上id
給表格或表單賦予一(yī)個唯一(yī)的、結構的标記，例如
<table id="menu">
接下(xià)來，在書(shū)寫樣式表的時候，你就可以創建一(yī)個“menu”的選擇器，并且關聯一(yī)個CSS規則，用來告訴表格單元、文本标簽和所有其他元素怎麽去(qù)顯示。這樣，不需要對每個<td>标簽附帶一(yī)些多餘的、占用帶寬的表現層的高、寬、對齊和背景顔色等等屬性。隻需要一(yī)個附着的标記（标記“menu”的id标記），你就可以在一(yī)個分(fēn)離(lí)的樣式表内爲幹淨的、緊湊的代碼标記進行特别的表現層處理。
中(zhōng)級改善我(wǒ)(wǒ)們這裏先列主要的三點，但其中(zhōng)包含的内容和知(zhī)識點非常多，需要我(wǒ)(wǒ)們逐步學習和掌握，直到最後實現完全采用CSS而不才用任何表格實現布局。限于本文是引導推廣之意，不展開(kāi)詳述。
最後我(wǒ)(wǒ)們特别需要補充介紹的是網站的易用性(Accessibility)和交互設計改善，易用性與網站标準有着标準聯系緊密，和網站标準一(yī)樣，都是爲了使我(wǒ)(wǒ)們的網站接受更多的用戶訪問。1990年W3C建立了Web Accessibility Initiative（WAI），給網站建造者提供實現可訪問性的方法和策略（http://www.w3.org/WAI/GL/）。提高易用性和研究交互設計（推薦VB之父Alan Cooper的About Face2.0一(yī)書(shū)）的策略能提高你的開(kāi)發技術，開(kāi)闊視野。提高你作爲專業網頁設計師的價值，使你更具競争力。這正是每個網站所有者和每個設計師或開(kāi)發者要努力達到的目标。
六．網站标準的資(zī)源
1．網站标準
http://www.zeldman.com/
http://webstandards.org/
http://webstandardsgroup.org/
http://www.nypl.org/styleguide/
2．有語義代碼
http://brainstormsandraves.com/articles/semantics/structure/
3．校驗（Validation ）
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
http://webboy.net/presentation/validation.cfm
4．易用性（Accessibility ）
http://www.joeclark.org/
http://www.accessify.com/
http://www.juicystudio.com/
5．樣式表CSS
http://webboy.net/presentation/ict2004/01.htm
http://webboy.net/presentation/ict2004/02.htm
http://webboy.net/presentation/ict2004/03.htm
http://westciv.com/style_master/academy/css_tutorial/
http://css.maxdesign.com.au
http://www.thenoodleincident.com/tutorials/css/
6．實例站點(XHTML+CSS)
http://www.macromedia.com/
http://www.k10k.net
http://www.fyrebase.com/
http://www.onetruefit.com/
http://pixeltable.com/
http://www.fishmarketing.net/
附．參考文章及網站
Jeffrey Zeldman（www.zeldman.com）著作《Design with Web Standards》，該書(shū)已經由電子工(gōng)業出版社引進，即将發行中(zhōng)文版。
Max Design的文章：《The benefits of Web Standards to your visitors, your clients and you!》http://www.maxdesign.com.au/presentation/benefits/index.htm
Mark Pilgrim 《Dive Into Accessibility》http://diveintoaccessibility.org
網站标準組織www.webstandards.org
網站标準團體(tǐ)www.webstandardsgroup.org
文章來源：http://www.vrchina.com/knowledge/st.html#designing_with_web_standards
475003427