There is also an English vision English.
T?m?dokumentti on saatavilla my?s suomeksi.
Consultez l’article en version fran?aise.
Dit document is ook beschikbaar in het Nederlands.
Detta dokument finns ?ven p?svenska.
本文闡述了Web標準是如何使一個開發(fā)者建設(shè)網(wǎng)站更加的節(jié)省時間與金錢，如何使瀏覽者獲得更好的瀏覽經(jīng)歷，以及他們的原因。同時，討論中還涉及到一些方法，準則和好的實例用來幫助您建設(shè)一個對盡可能多的人都充滿親和力的高質(zhì)量的網(wǎng)站。
在90年代后期，當互聯(lián)網(wǎng)和web逐漸成為主流時，Web瀏覽器的開發(fā)商還沒有完全的支持CSS（層疊式樣式表，對于Web開發(fā)人員來說，他們可以用CSS來控制Html文檔的表現(xiàn)）?？紤]到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以這種對CSS支持的不足也是可以理解的。
由于瀏覽器對CSS的支持不夠，再加上一些平面設(shè)計師的要求（這些要求與他們經(jīng)常與印刷品打交道有關(guān)）導致他們?yōu)榱丝刂凭W(wǎng)頁的視覺表現(xiàn)而濫用HTML。一個典型的例子就是，當設(shè)計師可以用 border=”0″來隱藏表格的邊框時，用隱藏表格來控制布局的方法同樣被使用。另一個例子是對“transparent”（透明）的使用，同樣是不可見，他們卻使用空白的GIF圖片來控制布局。
由于HTML從來就沒被用來控制一個文檔的表現(xiàn)，導致大量的亂碼、非法代碼、瀏覽器的專用代碼和屬性就被隨意的使用了?！靶ｒ灐边@個詞也很少被人問津。對于這些代碼來說，標簽湯（tag soup）是一個很形象的名字。
新版本的web瀏覽器的發(fā)布，使得對CSS的支持得到了加強與擴展，但是并沒有達到它應(yīng)有的水平。盡管瀏覽器的開發(fā)商對CSS支持的步伐很緩慢，但是現(xiàn)在已經(jīng)有許多瀏覽器選擇了支持CSS，此時，不應(yīng)該再有任何理由再像以前那樣使用HTML了，應(yīng)該讓它恢復本來的面貌：去描述文檔的結(jié)構(gòu) ，而不是它的表現(xiàn)。 正因為此，我們現(xiàn)在才能夠用CSS來達到其本來的目的了。
Web標準是一些規(guī)范的集合，是由W3C和其他的標準化組織共同制定的，以用它來創(chuàng)建和解釋網(wǎng)頁的基本內(nèi)容。這些規(guī)范是專門為了那些在網(wǎng)上發(fā)布的可向后兼容的文檔所設(shè)計，使其能夠被大多數(shù)人所訪問。
本文關(guān)注的是XHTML 1.0 Strict（代表結(jié)構(gòu)）、CSS Level 1和Level 2（代表表現(xiàn)）、ECMAScript 262（代表腳本–并不是指那些腳本的例子）。
當一個文檔被認為離Web標準不遠了的時候，那就意味著，除了具有上面所提到的技術(shù)，還應(yīng)當：
注意，“能夠在任何瀏覽器中顯示”并不意味著“在任何一個瀏覽器中顯示的效果相同”。使一個文檔在不同的瀏覽器和平臺上都有相同的顯示效果是不可能的，除非您僅僅使用圖片，因為發(fā)布在網(wǎng)上的文檔將被不同的操作系統(tǒng)上的不同的瀏覽器軟件所顯示，并顯示在不同大小與質(zhì)量的顯示器上（或者顯示在非顯示器上），瀏覽者也可能改變了瀏覽器的默認字體或者其他喜好。希望這些能使您減少了一些挫折感。每一個做網(wǎng)頁的人都應(yīng)該了解，一些技術(shù)上的先決條件我們不得不考慮，就像那些出書、拍電影、拍電視的人一樣，他們也有一些其他方面的前提必須要考慮。
一些Web開發(fā)人員和Web設(shè)計師對使用Web標準持抵觸態(tài)度。普遍的看法是它太難了
，不管它是怎么運作
，我使用的那些軟件總會創(chuàng)建出一些不規(guī)范的代碼。
.
學習新的技術(shù)并放棄您所熟知的技術(shù)，這很容易引起情緒上的反感，并產(chǎn)生抵觸的情緒。然而，如果您很理智的觀察一下現(xiàn)在的形勢，將會發(fā)現(xiàn)，通過學習和使用Web標準會得到許多好處。舉幾個例子：
Web標準可以為網(wǎng)站的創(chuàng)建者節(jié)省時間與金錢，還可以為網(wǎng)站的瀏覽者提供一個更好的經(jīng)歷。此外，Web標準是未來的。如果你還沒有使用We b標準，那么現(xiàn)在應(yīng)該開始動手了，否則你會落伍的。
W3C的文章，介紹如何改進你網(wǎng)站代碼的質(zhì)量。
Web標準計劃的聲明。
Web標準計劃的一篇文章，對Web和為什么使用它是一件好事進行了闡述。
告訴您一個公司是如何通過使用Web標準而盈利。
寫給那些營銷、通信、IT領(lǐng)域中的管錢人。
校驗是一個控制的過程，在這個過程中，文檔必須遵守語言的規(guī)則。你可以通過對比，檢查出文本中的拼寫或語法錯誤。
規(guī)范是網(wǎng)頁開發(fā)中的一個重要部分。許多很難被發(fā)現(xiàn)的錯誤可以在驗證中發(fā)現(xiàn)。錯誤可能是一個微不足道的打字錯誤，也可能是嚴重的元素和屬性的不規(guī)范錯誤。
不幸的是，許多人并不驗證他們的文檔。一些人或許根本不知道驗證這回事，還有一些人想不起來去驗證，甚至還有一些人故意的逃避驗證。這種情況的出現(xiàn)，大部分的責任要歸咎于Web瀏覽器的開發(fā)商。大多數(shù)的瀏覽器都會去盡全力的去解釋不規(guī)范的HTML代碼，并努力的去猜測作者的意圖，以此來避免顯示錯誤的信息。這種行為就導致了如今混亂代碼的泛濫。這種標記的問題是，它帶來了一些不可預測的結(jié)果，因為它依靠的是Web瀏覽器錯誤的處理。
沒有任何原因不去驗證您的HTML和CSS。相反，它還會給您帶來許多好處。
Why we won’t help you 是Mark寫的一篇闡述驗證優(yōu)點的文章，十分的棒。里面還解釋了為什么如果您在驗證您的網(wǎng)站之前去求助，那么想從論壇和郵件列表中的人取得幫助會非常的困難。
一些HTML編輯器（像BBEdit和Homesite）都嵌入了校驗工具。如果你的開發(fā)工具里沒有嵌入校驗的話，你可以使用W3C的校驗服務(wù)，可在線使用：
理解校驗顯示的錯誤提示可能有一些困難。一個位于文檔前面的錯誤可能會導致另外幾個額外的錯誤。改了第一個錯誤后，通常你就會減少一定數(shù)量的錯誤了。下面這個網(wǎng)址，將有一些常見錯誤提示的說明： Common XHTML Validation Errors
確保你的代碼是完全規(guī)范的，總是一件好事，但是當一些校驗的錯誤很難避免時，就會有一些特殊的情況。其中最常見的的例子就是在一篇文檔中嵌入FLASH或者一些其他需要插件的內(nèi)容。下面是關(guān)于這個問題的相關(guān)文章 Flash Satay: Embedding Flash While Supporting Standards和Embedding flash without <embed>.
當討論Web標準時，一些事情總是被提及，那就是結(jié)構(gòu)和表現(xiàn)分離的重要性。剛開始的時候理解結(jié)構(gòu)和表現(xiàn)的不同之處可能很困難，特別是如果你不習慣于思考文檔的語義結(jié)構(gòu)時。然而，理解這點是很重要的，因為，當結(jié)構(gòu)和表現(xiàn)分離后，用CSS文檔來控制表現(xiàn)就是很容易的一件事了。
結(jié)構(gòu)是由文檔中的主體部分，再加上語義化、結(jié)構(gòu)化的標記。
表現(xiàn)是你賦予內(nèi)容的一種樣式。在大多數(shù)情況下，表現(xiàn)就是文檔看起來的樣子，但是它同樣可以影響一個文檔“聽”起來的樣子—-畢竟不是每個人使用的都是圖像化的瀏覽器。
盡可能的把結(jié)構(gòu)和表現(xiàn)相分離。理論上講，你應(yīng)該用一個HTML文檔來保存內(nèi)容與結(jié)構(gòu)，用一個CSS文檔來控制整個文檔的表現(xiàn)。
如今表現(xiàn)與結(jié)構(gòu)的分離在網(wǎng)上還不是很普遍。大多數(shù)網(wǎng)站上的HTML代碼既缺少語義也缺少結(jié)構(gòu)。
為了使表現(xiàn)和結(jié)構(gòu)相分離，你必須用CSS來代替表格去控制一個文檔的表現(xiàn)。當你習慣于用表格來布局的時候，這將使你感覺很奇怪很不適應(yīng)，但是，這并不像它看上去的那么困難。你可以在網(wǎng)上找到許多可用的幫助，它的好處太多了，所以它確實值得您去花時間去轉(zhuǎn)變一下思想，這點很重要。
在Seybold 2003上的一個演講幻燈演示。
分離結(jié)構(gòu)與表現(xiàn)的另一個重要方面是使用語義化的標記來構(gòu)造文檔內(nèi)容。一個XHTML元素的存在就意味被標記內(nèi)容的那部分有相應(yīng)的結(jié)構(gòu)化的意義，沒有理由使用其他的標記。換句話說，不要讓CSS使一個HTML元素看起來就像另一個HTML元素，比如用<s pan>來代替<h1>標記標題。
通過使用語義化的HTML，你將會使文檔中的不同部分對于任何瀏覽器都變得有意義，無論瀏覽器是現(xiàn)今PC上的最新的圖象化瀏覽器，還是不支持CSS的老瀏覽器，或者還是Unix shell中的文本瀏覽器。
為了給標題做標記, 要用<h1>、<h2>、 <h3>、<h4>、<h5>或者 <h6>，這完全取決于標題的等級。<h1>是最高的等級。
<h1>文檔標題</h1><h2>次級標題</h2>
用<p>來標記段落。不要使用 <br /> 來生成段落間的空行。用CSS來控制段落間的空隙（Margins），這個空隙可以確保段落標記的正確無誤。
<p>浪奔浪流，萬里滔滔江水永不休，淘盡了世間事，混作滔滔一片潮流，是喜是愁，浪里分不清歡笑悲憂，成功失敗，浪里看不出有未有。愛你恨你問君知否，似大江一發(fā)不收，轉(zhuǎn)千灣轉(zhuǎn)千灘，也未平復此中爭斗，又有喜又有愁，就算分不清歡笑悲憂，仍愿翻百千浪，在我心中起伏夠。</p>
浪奔浪流，萬里滔滔江水永不休，淘盡了世間事，混作滔滔一片潮流，是喜是愁，浪里分不清歡笑悲憂，成功失敗，浪里看不出有未有。愛你恨你問君知否，似大江一發(fā)不收，轉(zhuǎn)千灣轉(zhuǎn)千灘，也未平復此中爭斗，又有喜又有愁，就算分不清歡笑悲憂，仍愿翻百千浪，在我心中起伏夠。
一些事物的羅列應(yīng)使用列表來顯示。在XHTML中有三種列表的方法：無序、有序和自定義。
無序列表, 就是我們所熟知的圓圈列表, 以 <ul>開始，以</ul>結(jié)束。每一個列表項都包含在<li>之中。
有序列表，以<ol>開始，以 </ol>結(jié)束。
自定義列表有一些不同，可以用來標記一些列表項和描述，以<dl>開始，以 </dl>結(jié)束。每一個被描述的項目，要包含在<dt>中，而描述的內(nèi)容要包含在<dd>中。
<ul><li>項目一</li><li>項目二</li><li>項目三</li></ul>
<ol><li>項目一</li><li>項目二</li><li>項目三</li></ol>
<dl><dt>上海灘</dt><dd>這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經(jīng)典的劇集。當年在香港播出以后，產(chǎn)生了巨大的轟動效應(yīng)。</dd><dt>周潤發(fā)</dt><dd>和所有偉大的影星一樣，周潤發(fā)印證了一個時代，一個香港電影的黃金時代。風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發(fā)哥已被刻為一個時代的坐標。</dd></dl>
CSS使你不想用傳統(tǒng)列表來呈現(xiàn)內(nèi)容成為可能。導航欄（一個鏈接的列表）就是一個很好的例子。使用列表作為菜單的好處是當一個瀏覽器不支持CSS時，這個菜單仍然起作用。
用<q>來標記簡短的單行引用。Web瀏覽器會自動識別在<q> 之間的內(nèi)容。不幸的是，IE不能識別，并且有些時候， <q>會引起一些可訪問性的問題。正因為如此，一些人建議盡量不要使用 <q>,手動的插入引用標記。在一個包含適當?shù)念惖?<span>中加入單行的引用內(nèi)容，那么就可以用CSS來給引用設(shè)計樣式了，但是這個沒有語義上的意義。 您可以讀讀Mark Pilgrim寫的The Q tag 關(guān)于處理<q>相關(guān)問題的看法。
對于那些一段或者好幾段的長篇引用，就應(yīng)當使用 <blockquote>了。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在 <blockquote>中的，引用的內(nèi)容還必須包含在一個元素中，通常是<p>。
屬性cite既可以與<q> 一起用，也可以與<blockquote>一起用，用來提供引用內(nèi)容的來源地址。需要注意的是，如果你使用 <span>來代替 <q>標記引用內(nèi)容,那么你就不能使用 cite屬性了。
<p>我的座佑名<q cite=”http://www.x5.com.cn/”>別人的高標準，是我的基本要求。</q>.</p>
我的座佑名別人的高標準，是我的基本要求。
.
<p>我的座佑名<span class=”quote”>“別人的高標準，是我的基本要求?！?lt;/span>.</p>
我的座佑名“別人的高標準，是我的基本要求。”.
<blockquote cite=”http://www.w3cn.org/”><p>“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時，我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的”瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個新版本來支持這種新技術(shù)或新設(shè)備，例如支持手機上網(wǎng)的WAP技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費?！?lt;/p></blockquote>
“我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網(wǎng)站就可能變得過時，我們就需要升級或者重新建造一遍網(wǎng)站。例如1996-1999年典型的”瀏覽器大戰(zhàn)”，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個新版本來支持這種新技術(shù)或新設(shè)備，例如支持手機上網(wǎng)的WAP技術(shù)。類似的問題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費。 ”
<em> 是用作強調(diào)的，<strong>是用作重點強調(diào)的。 大部分瀏覽器用斜體顯示強調(diào)的內(nèi)容，用粗體來顯示重點強調(diào)的內(nèi)容，然而，這是沒有必要的，如果是為了確定強調(diào)內(nèi)容的顯示方式，最好的方法就是使用CSS來定義他們的表現(xiàn)。當你想要的只是視覺上的效果時，就不要使用強調(diào)了。
<p><em>強調(diào)</em> 的文本通常用斜體顯示，然而， <strong>特別強調(diào)</strong> 的文本通常以粗體顯示。</p>
強調(diào) 的文本通常用斜體顯示, 然而， 特別強調(diào)的文本通常以粗體顯示。
XHTML中的表格不應(yīng)用來布局。然而如果是為了標記列表的數(shù)據(jù)，就應(yīng)該使用表格了。為了使數(shù)據(jù)表格有更強的訪問性，了解和使用各種構(gòu)造表格的組件就很重要了。比如表格標題 (<th>)、摘要(summary 屬性)和首部說明 ( <caption>標簽).
<table class=”舉例” summary=”1999年到2003年，列表顯示中國的平均人口增長率。”><caption>中國的年均人口的增長, 1999-2003</caption><thead><tr><td> </td><th scope=”col”>1999</th><th scope=”col”>2000</th><th scope=”col”>2001</th><th scope=”col”>2002</th><th scope=”col”>2003</th></tr></thead><tbody><tr><th>人口</th><td scope=”row”>8 861 426</td><td scope=”row”>8 882 792</td><td scope=”row”>8 909 128</td><td scope=”row”>8 940 788</td><td scope=”row”>8 975 670</td></tr><tr><th>增長</th><td scope=”row”>7 104</td><td scope=”row”>21 366</td><td scope=”row”>26 368</td><td scope=”row”>31 884</td><td scope=”row”>34 882</td></tr></tbody></table>
| 1999 | 2000 | 2001 | 2002 | 2003 | |
|---|---|---|---|---|---|
| 人口 | 8 861 426 | 8 882 792 | 8 909 128 | 8 940 788 | 8 975 670 |
| 增長 | 7 104 | 21 366 | 26 368 | 31 884 | 34 882 |
想了解更多的關(guān)于表格及其使用的細節(jié), 請參閱Tables in HTML documents 和 HTML Techniques for Web Content Accessibility Guidelines 1.0.
一個很好的資源，告訴您如何用語義化的方法來標記。
使用HTML4.01是可以制作出現(xiàn)代的、結(jié)構(gòu)化的、兼容標準的站點的。然而，為了做到向整潔的語義化的代碼的轉(zhuǎn)變，并且為XML和未來的其他標記語言做好準備，建議大家使用XHTML1.0 Strict來創(chuàng)建新的站點，本文中的例子用的就是XHTML1.0 Strict。
XHTML 1.0 是以XML 1.0對HTML 4的改進，它的發(fā)展，以用來代替HTML。XHTML 1.0 Strict（這是我一直所倡導的）不支持表現(xiàn)類的標記（HTML 4.01其實也不支持，但是現(xiàn)在我們討論的是XHTML）。正因為此，XHTML1.0 Strict 就促使了表現(xiàn)與結(jié)構(gòu)的分離。
XHTML 1.1（XHTML的最新版）從技術(shù)上說，使用起來有一些復雜。因為規(guī)定中聲明XHTML 1.1的文檔應(yīng)當使用MIME類型 application/xhtml+xml, 不應(yīng)當被看作text/html。 并不是嚴格的禁止使用text/html, 只是不建議使用。 另外一方面，XHTML 1.0 （應(yīng)當使用 application/xhtml+xml）同樣可以使用MIME類型 text/html, 如果它是可兼容的HTML。W3C的注解XHTML Media Types 中包括了MIME類型（W3C推薦使用的類型）的概要。
不幸的是，一些老的瀏覽器包括IE不能識別MIME類型 application/xhtml+xml, 并且會終止顯示源代碼，甚至會干脆拒絕顯示整個文檔。
如果你想使用application/xhtml+xml, 你應(yīng)當讓服務(wù)器檢驗一下讀取文檔的瀏覽器是否支持MIME類型，如果能，就使用它，如果不能，就使用text/html。
如果你使用的是PHP作為服務(wù)器端的腳本，那么下面的這段腳本能夠讓你的文檔針對不同的瀏覽器使用不同的MIME類型。
<?phpif (stristr($_SERVER[HTTP_ACCEPT], “application/xhtml+xml”) || stristr($_SERVER[“HTTP_USER_AGENT”],”W3C_Validator”)) {header(“Content-Type: application/xhtml+xml; charset=iso-8859-1”);header(“Vary: Accept”);echo(“<?xml version=\”1.0\” encoding=\”iso-8859-1\”?>\n”);}else {header(“Content-Type: text/html; charset=iso-8859-1”);header(“Vary: Accept”);}?>這個腳本是檢測是否用戶代理發(fā)送了一個包含“application/xhtml+xml”的Accept HTTP頭，或者如果用戶代理是W3C HTML校驗器（不會發(fā)送合適的Accept HTTP頭的，但是它依然支持 application/xhtml+xml）。如果上面檢測的回答是肯定的，文本將被看作 application/xhtml+xml。那些瀏覽器也會收到一個XML的聲明。對于另外的一些瀏覽器（包括IE的是所有版本），文檔都將被看做 text/html。在文檔中也沒有添加額外的XML聲明，因為如果添加的話，會使IE/WIN轉(zhuǎn)化到我們所不希望的Quirks模式。
在Content-Type頭部之后,一個被更改過的頭部，將被發(fā)送到中間的緩存中（比如一些代理服務(wù)器），用來告訴他們文檔的內(nèi)容類型隨著客戶端對文檔的請求而改變。
如果想了解更多的PHP檢測腳本, 請參考Serving up XHTML with the correct MIME type. 那個腳本對請求客戶端的q-rating（它聲明了更夠很好的支持某種MIME類型）進行了考慮，在發(fā)送text/html 文檔給不支持 application/xhtml+xml的客戶端之前，把XHTML轉(zhuǎn)化成HTML 4。
下面的是一個相似的腳本，針對ASP（VBSscript）:
<%If InStr(Request.ServerVariables(“HTTP_ACCEPT”), “application/xhtml+xml”) > 0 Or InStr(Request.ServerVariables(“HTTP_USER_AGENT”), “W3C_Validator”) > 0 ThenResponse.ContentType = “application/xhtml+xml”Response.Write(“<?xml version=””1.0″” encoding=””iso-8859-1″”?>” & VBCrLf);ElseResponse.ContentType = “text/html”End IfResponse.Charset = “iso-8859-1″%>
值得注意的是，當一個文檔的MIME type是application/xhtml+xml時，一些瀏覽器（像Mozilla）是不會顯示包含錯誤的文檔的。這在開發(fā)過程中是一件好事，但是對于那些剛剛更新完站點且不是XHTML專家的人來說，就會出現(xiàn)一些問題，除非您能確保所有的代碼都是規(guī)范的。如果出現(xiàn)了這種問題，您可以考慮使用HTML 4.01 Strict來代替XHTML。
下面列出了一些在使用XHTML 1.0 Strict中需要特別注意的地方:
永遠使用小寫字母，讓引號伴隨者屬性: 所有元素和屬性的名字都必須使用小寫，所有屬性值必須使用雙引號。
錯誤: <A HREF=”index.html” CLASS=internal>
正確: <a href=”index.html” class=”internal”>
關(guān)閉所有的元素:在HTML中一些元素沒有必要被關(guān)閉。當下一個元素開始的時候，上一個元素就自動被關(guān)閉。XHTML中是不允許這樣的。所有元素都必須被關(guān)閉，即使其中沒有內(nèi)容（如 <img>）
錯誤: <li>Item 1正確: <li>Item 1</li>
錯誤: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
正確: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
錯誤: <br>
正確: <br />
錯誤: <img src=”image.jpg” alt=””>
正確: <img src=”image.jpg” alt=”” />
屬性不能被縮減: 在HTML里，一些屬性可以被縮減。而XHTML則不允許這樣做。
錯誤: <input type=”checkbox” id=”checkbox1″ name=”checkbox1″ checked>
正確: <input type=”checkbox” id=”checkbox1″ name=”checkbox1″ checked=”checked” />
不要使用被排斥的元素: 一些元素和屬性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允許的，而在XHTML 1.0 Strict下則不被支持(還有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (對于某些元素)和 background。
The Web Standards Project詢問W3C是使用HTML 還是XHTML, 為什么？
一篇A List Apart article 上關(guān)于從HTML轉(zhuǎn)換XHTML的文章。
詳細的闡述了如何使用XHTML和CSS。
W3C給您解釋XHTML 1.0 和 HTML 4的不同之處。
簡述了 XHTML 1.0 Strict 和 Transitional的不同之處
The Web Standards Project 詢問the W3C對于HTML和XHTML，應(yīng)該使用哪種MIME type？
告訴您用那種媒體類型來解釋XHTML文檔
HTML Dog的一個在XHTML中不應(yīng)當使用的元素和屬性的向?qū)А?/P>
一篇關(guān)于MIME types 和告訴我們?nèi)绾胃鶕?jù)不同的服務(wù)器腳本語言顯示不同的內(nèi)容的文章。
W3C的一篇關(guān)于mime types 和 XHTML的文章。
現(xiàn)在只有很少的HTML文檔有一個正確而完整的doctype或者DTD (文檔類型聲明)。它現(xiàn)在更多的是在起裝飾作用而沒有什么功能作用，但是就在幾年前剛開始的時候，一個doctype的定義，對瀏覽器解釋這個文檔起到很大的作用。
所有的HTML和XHTML文檔都必須使它的doctype聲明合法化。 doctype可以告訴我們在文檔中使用的是什么版本的HTML和XHMTL，也決定了校驗器以何種方式校驗，瀏覽器以何種模式解釋。如果文檔中有一個正確而完整的doctype，許多瀏覽器將會轉(zhuǎn)換到標準模式，那就意味著與CSS的規(guī)范更加接近了。因為瀏覽器不必再把時間用在彌補、解釋不規(guī)范的HTML上了，所以文檔的顯示速度也加快了。這同樣也會減少在不同瀏覽器上顯示的差異性。
下面的doctype聲明是針對XHTML 1.0 Strict的，它將會促使擁有“文檔類型轉(zhuǎn)換器”的瀏覽器使用他們的標準模式。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
一篇A List Apart的文章，告訴您如何以及為什么要使用doctype。
介紹了不同doctype聲明對擁有文檔類型轉(zhuǎn)換器的瀏覽器的影響。
W3C官方的正確doctype聲明的列表。
所有的XHTML文檔都應(yīng)當定義他們的字符編碼。
最好的網(wǎng)頁編碼方法是配置你的網(wǎng)絡(luò)服務(wù)器，使其發(fā)送帶有字符編碼的HTTP content-type頭部。關(guān)于如何使用去做的具體細節(jié)，請參閱你所使服務(wù)器軟件的說明。
如果你使用的是Apache，你可以通過在你的.htaccess文件中添加一兩條規(guī)則來定義字符編碼。例如，你的所有文件使用的都是utf-8, 添加下面的語句:
AddDefaultCharset utf-8
定義具有相同擴展名的文件的字符編碼,則使用下面的代碼：
AddCharset utf-8 .html
如果你的服務(wù)器允許你用PHP腳本時，你可以使用以下的代碼來定義字符編碼。
<?phpheader(“Content-Type: application/xhtml+xml; charset=utf-8”);?>
如果你的頁面是HTML, 請把application/xhtml+xml換成 text/html。不管是什么原因，如果你不能配置你的服務(wù)器使其定義為你所使用的字符編碼，你可以在<head>中使用<meta> 。即使你的服務(wù)器配置正確了，這也是個定義字符編碼的好方法。
例如, 下面的<meta>告訴瀏覽器這是一個使用ISO-8859-1字符編碼的文檔:
<meta http-equiv=”content-type” content=”text/html;charset=ISO-8859-1″ />
The Web Standards Project詢問W3C，作者應(yīng)該如何定義字符編碼。
一篇介紹不同類型字符編碼的文章
告訴您如何在HTML中使用通用的和專有的字符。
一篇教您選擇和聲明字符編碼的教程。
CSS過去經(jīng)常被用來定義字體的屬性，而現(xiàn)在可以用它來控制整個文檔的布局。然而，為了有效的用CSS來控制布局，需要做一些不同的處理，這種不同是跟用表格布局相對比的。
為了CSS可以高效的控制布局，結(jié)構(gòu)化、語義化的XHTML是必不可少的。
正如前面所提到的，在過去幾年，瀏覽器對CSS的支持程度已經(jīng)改進了很多。不幸的是，瀏覽器的開發(fā)商好象對實施開放的標準并不感興趣，所以不同瀏覽器對CSS的支持程度也大相徑庭。就算是支持程度最好的瀏覽器，在軟件中仍然有一些bug，使得瀏覽器以錯誤的方式運行。
現(xiàn)在(2004), 對CSS支持比較好的瀏覽器有Mozilla (還有以Gecko為內(nèi)核的: Firefox, Camino, Netscape 6+), Opera和Safari (還有以 WebCore為內(nèi)核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并沒有如此好的CSS支持程度，但是它將讓你為其做出大量的基礎(chǔ)工作。Internet Explorer 5/Mac對CSS 1的支持很出色, 但是卻不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些問題值得你去注意。早期版本的IE以及Netscape 6以前的版本就沒有必要提及了。
因為現(xiàn)在大多數(shù)人都使用IE/WIN，所以你將不得不讓它成為特殊分子。這并不是說，你不能或者不應(yīng)該使用有更好支持CSS能力的瀏覽器來提高他們的設(shè)計能力。
現(xiàn)在在用的瀏覽器中，并不是所有的瀏覽器都有很好的CSS支持能力，使其能夠具有解釋用CSS布局的優(yōu)秀圖形化站點的能力。幸運的是，對于大多數(shù)網(wǎng)站，只有很小比例的訪問者還在使用不能解釋CSS的老瀏覽器。
值得注意的是，這些人并不會被排斥在外的。在90年代，瀏覽器檢驗?zāi)_本是一個很流行的方法，它告訴那些使用“錯誤”瀏覽器的使用者一個新的網(wǎng)址，那個網(wǎng)址告訴他們?nèi)ド墳g覽器，好重新連接到那個網(wǎng)站。
現(xiàn)在，你可以以一種更好的辦法應(yīng)付不被支持的瀏覽器。使用邏輯化、語義化的一個最大的好處就是它使文檔在沒有CSS時，仍然可以使用和訪問。表現(xiàn)（就是文檔看上去的樣子）在一個支持性好的瀏覽器中也將呈現(xiàn)的不一樣，但是它的內(nèi)容將永遠不變，大多數(shù)情況，對于訪問網(wǎng)站的人來說，內(nèi)容實際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個沒有樣式的頁面，要比把他們排斥在外要好的原因。
有好幾種方式去解決這個問題：一種最常見的方法是使用 @import來鏈接相應(yīng)的的CSS文件。Netscape 4和老的瀏覽器不支持@import所以將不會導入CSS文件。還有許多方法來向瀏覽器隱藏CSS。大多數(shù)隱藏CSS的方法是利用了瀏覽器對CSS解釋時的漏洞。這意味著總會存在瀏覽器通過升級彌補漏洞的危險。所以越少的依賴CSS hacks（CSS漏洞）越好。
很明顯的，你可以使用服務(wù)器端技術(shù)去做一個瀏覽器檢測，然后針對不同的瀏覽器，發(fā)送不同的CSS文件。如果你這么做了，你必須要確保檢測腳本是通用的，以避免因為瀏覽器的升級或者新的瀏覽器發(fā)布導致發(fā)送錯誤的CSS文件。
Eric Meyer講述了針對特定的瀏覽器隱藏CSS的四種方法。
隱藏CSS技術(shù)大薈萃。
介紹用不同方法來加強使用現(xiàn)今瀏覽器的人們的體驗。
有以下幾種方法使一個HTML文檔中的元素應(yīng)用CSS。
把所有的CSS規(guī)則都寫在一個或幾個單獨的文件中，這種做法有許多優(yōu)點。HTML文檔會變得非常的小，CSS文件被存在瀏覽器的緩存中，僅僅需要下載一次即可，并且你只需要修改一個文件就可以改變整個網(wǎng)站的樣式。一個外鏈式的CSS文件，見如下:
h1 {font-weight:bold;}注意:在外鏈的CSS中沒有<style>標簽。
你可以使用 <link>標簽來把一個CSS鏈接到HTML文檔中:
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
或者在<style>中使用一個@import標簽 :
<style type=”text/css”>@import url(“styles.css”);</style>
通過使用style屬性,你可以直接的在HTML中應(yīng)用CSS:
<h1 style=”font-weight:bold;”>Rubrik</h1>
這種情況，應(yīng)盡量的避免，因為他把結(jié)構(gòu)和表現(xiàn)混在一起了。
內(nèi)嵌式CSS是寫在<style>標簽中，也是寫在文檔的<head>中:
<style type=”text/css”>h1 {font-weight:bold;}</style>這種情況也應(yīng)該盡量避免，最好還是把HTML和CSS用單獨的文件存放。
關(guān)于CSS導入和media類型的說明。
一條CSS的規(guī)則是由一個選擇器和一個或多個聲明組成。選擇器決定了CSS規(guī)則可作用于文檔中的哪個或哪些元素。一個屬性和一個值組成了一個聲明，聲明要用大括號（{}）括起來，并且每個聲明要用分號（；）結(jié)束。
一個簡單的CSS規(guī)則如下:
p {color:#0f0;font-weight:bold;}這個例子中, p就是選擇器,表示這條規(guī)則將作用于文檔中的所有被<p>包圍的內(nèi)容。這個規(guī)則中，有兩條聲明，它們共同作用，使 <p>中的內(nèi)容所有字體為綠色并且加粗。
想了解更詳細的CSS規(guī)則，可以參閱 CSS Beginner’s Guide, CSS from the Ground Up或者一個CSS手冊。
一個實用CSS技巧列表
John Gallant和Holly Bergevin告訴您如何書寫緊湊的CSS。
一篇很好的介紹不同的CSS選擇器及其是如何起作用的文章。
當我們剛開始學CSS時，很容犯一些錯誤：使用不必要的XHTML元素、多余的類和額外的 <div>。并不是說這些代碼是不規(guī)范的，而是它與一些原則（如結(jié)構(gòu)與表現(xiàn)相分離，使用簡單的整潔的標記）相矛盾。
下面是一個使用不必要XHTML元素的例子:
<h3><em>Headline</em></h3>
如果你想使標題行變成斜體，可以使用CSS來重新定義 <h3>元素:
h3 {font-style:italic;}下面是一個使用多余的類的例子:
<div id=”main”><div class=”maincontent”><p class=”maincontenttext”>CSS的用法的奧秘很多</p></div></div>
下面這么寫可能更好:
<div id=”main”><div><p>CSS的用法的奧秘很多</p></div></div>
為了控制div#main中的元素，你可以在CSS代碼中使用相關(guān)的的選擇器，例如:
div#main p {/* rules */}多數(shù)情況下，CSS允許你把想要的樣式來定義XHTML，而不用增加額外的的標記。但是有的時候，增加一些額外的代碼也是必要的。
很明顯，一旦你去很認真的學習使用CSS，你一定會發(fā)現(xiàn)某些問題，這些問題可能是由誤解造成的，可能是由對規(guī)則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個好建議的薈萃，有Dave Shea整理，下面還將有一些重要的而且是Dave沒有提及的小竅門。
先校驗:在調(diào)試的時候，先由校驗開始吧，HTML和CSS都要進行校驗。許多問題都是由不規(guī)范代碼引起的。
先在最先進的瀏覽器中調(diào)試，然后才輪到其他的瀏覽器: 如果你剛開始就用對CSS支持不好的瀏覽器調(diào)試，那么你所編的CSS將會逐漸適應(yīng)這種錯誤的處理。當你繼續(xù)在更先進的瀏覽器中測試，一些你所不希望的內(nèi)容就會出現(xiàn)了。最好還是首先在一個有很好標準兼容性的瀏覽器中運行，然后再把代碼拿到老一點的瀏覽器中去測試。
理解CSS的盒模型:為了獲得一個元素的實際的寬度和高度，你需要用padding和border來增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。
假設(shè)你有如下的CSS代碼:
div.box {width:300px;padding:20px;border:10px solid;}所以這個div的總寬度是360px.
10px + 20px + 300px + 20px + 10px = 360px
在Internet Explorer 5.*/Win中，實際上總寬度為300px, 內(nèi)容的寬度為240px.
300px – 10px – 20px – 20px – 10px = 240px
為了繞過這個問題, 你同樣可以使用CSS hack來給不同的瀏覽器提供不同的值，或者你盡量避免在同一個元素中同時定義width 和 padding或者width和border。
想了解關(guān)于CSS盒模型的更詳細內(nèi)容，請參閱 Box model。
為非零的數(shù)值加上單位:CSS要求一些屬性值（如width、 height、font-size）必須要有單位。當屬性值為0時是可以例外的。在那種情況下，沒有單位也是必須的，因為0就是0，什么單位也都無所謂了。
理解漂浮物:盡管漂浮物這個概念很難理解，但是它很重要，因為CSS中會頻繁的使用它來布局。有一些關(guān)于漂浮物的好文章，如Containing Floats、Floatutorial和Float: The Theory。
“LoVe/HAte?” 按照如下順序為鏈接定義偽類：Link, Visited, Hover, Active.
“TRouBLed?”當使用簡寫來定義margin、padding和border時, 他們的順序是從上開始的順時針方向: 上、右、下、左。
以其功能給CLASS和ID命名，而不是它的表現(xiàn): 如果你有一個CLASS名為.smallblue, 過后你決定用它來定位文本，使其為大號、紅色，那么CLASS的名字就會被弄混淆的。最好能用名字來描述功能和結(jié)構(gòu)，如.copyright和.im portant。
CSS是個敏感的東西:當HTML屬性中的 class和id與CSS一起使用時，那可就要小心了。 (參見CSS2 syntax and basic data types).
檢查你的ID:文檔中一個元素只能使用一個id，且id必須唯一，而class可以被多個元素所共享。
使用合法的字符為class和 id命名: Class和id的名字只能由數(shù)字、字母和連字符組成，數(shù)字和連字符是不可以開頭的。(參見 CSS2 syntax and basic data types).
正確的注釋:CSS的注釋是以/*開頭，以*/結(jié)尾的:
/* This is a comment */
有很多例子和階梯教程指導您如何使用CSS布局。建議您從簡單的例子開始，學習它的原理，然后再去學習復雜的布局。
一個例子，介紹如何創(chuàng)建有頭部和尾部的雙欄布局。
不同CSS布局展示
可訪問性并不是單單針對殘疾人，盡管這是這是一個創(chuàng)建具有可訪問性站點的一個主要原因。一個具有親和力的站點對任何人來說，顯示效果都同樣出色，無論他是不是殘疾人。它可以被更多使用不同瀏覽器或瀏覽設(shè)備的人所訪問。
有一種對可訪問性站點的常見誤解，認為它與眾不同，或者不如那些不具有可訪問性的站點具有視覺吸引力。
這有一個例子將告訴您可訪問性是如何給每一個人造福的：一個網(wǎng)站有一個表單，用它來進行注冊參加一個研討會，表單中，你可以選擇去參加三個城市中的一個城市的研討會。每一個城市名字旁邊都有一個單選按扭。如果表單的創(chuàng)建者沒有可訪問性的意識，那么使用圖像瀏覽器的人就不得不把鼠標放到很小的單選按扭上，然后點擊它來選擇城市。如果開發(fā)者了解可訪問性，并且在每個按扭旁邊用 <label>標記說明，那么您就可以點擊城市的名字來選擇地點了。那么，您認為哪種方法使表單使用更簡便呢？
使用語義化、結(jié)構(gòu)化的XHTML將使你走向可訪問性站點之路。要對可訪問性的文檔有一個基礎(chǔ)的概念，嘗試使用一個文字化的瀏覽器（如：< a href=”http://lynx.browser.org/”>Lynx）看看內(nèi)容是否依然起作用。雖然這離通過可訪問性的驗證（這是你必須去做的）還差很遠，但是這是一個好的開始。
許多網(wǎng)頁設(shè)計師喜歡使用框架把瀏覽窗口分割成幾個獨立的部分，每部分都是由獨立的HTML文檔組成，這樣做對某些程序（比如一個區(qū)域網(wǎng)的應(yīng)用程序）可能很好，但是在公眾網(wǎng)上，使用框架將存在許多缺點:
robots.txt文件告訴搜索引擎不要把次級頁面編到索引中，以此來解決上面的問題。其他的一些網(wǎng)站則用ja;vascript把通過搜索引擎過來的訪問者送到首頁。如果你的目標就是獲得少量的瀏覽者，這兩種方法都是可行的。 此外，你這是在給自己找麻煩?？蚣軐⑹挂粋€網(wǎng)站在技術(shù)上更復雜。
把“不要使用表格布局”解釋成“不要使用表格”對一些人來說沒什么區(qū)別。這個并不是如何去解釋的問題。如果你想標記一個列表數(shù)據(jù)，理所當然應(yīng)該使用表格，這才是表格應(yīng)當起的作用。然而，有一點很重要：當你建立數(shù)據(jù)表格時，有許多方法可使他們更具有邏輯性和可訪問性。
告訴你如何建立具有可訪問性的表格
如何為列表數(shù)據(jù)建立表格
表單通常是沒必要去使用的，而且使用起來很困難，部分的原因是因為他們是用不合邏輯的方法建立的，部分是因為基本的HTML代碼并沒有使用標簽（標簽可以使表單更具有可訪問性，更容易使用）。一些相關(guān)的標簽（如<label>、<fieldset>和 <legend>）是存在的，而且是應(yīng)該被使用的。
一個普遍的問題是用什么給表單布局。一些人說，可以把一個表單看作一個列表數(shù)據(jù)，可以用表格來構(gòu)造，然而還有一些人提議用CSS來布局。兩種方法都是可用的，但是如果你用的是表格，請確保這個表格是有意義的，而且要保證當一個包含表單的表格被線性后是可用的。
WebAIM上的一篇關(guān)于可訪問性的表單文章。
一篇文章介紹了創(chuàng)建更好更具有可訪問性表單的基礎(chǔ)知識。
不要依靠ja;vascript。許多人（包括你自己）可能都會認為如果把ja;vascript從他們的瀏覽器中移除，就可以更加安全或者可以避免彈出窗口。他們也可能正在使用的瀏覽器壓根就不支持ja;vascript。根據(jù)TheCounter.com的調(diào)查，6%的Web用戶不使用ja;vascript, 而根據(jù)W3Schools.com的調(diào)查，這個百分比為8%。
大多數(shù)情況，使用ja;vascript的地方，對訪問者都沒什么好處。當然有一些例子顯示ja;vascript能夠給訪問者提供更好的體驗。一個例子就是校驗表單的輸入。
值得注意的是這并不是說您不應(yīng)該使用ja;vascript。而是說你不應(yīng)該創(chuàng)建一個依靠ja;vascript運行的網(wǎng)站
同樣的事也適用于cookies。如果瀏覽者不接受他們的網(wǎng)站就拒絕運行，那么你的cookie就使用錯了。
這部分跟Web標準和可訪問性無關(guān)，但是把它放在這是因為一個URL的創(chuàng)建方式將對搜索引擎如何把站點編入索引以及它對訪問者的可用程度都有很大的影響。
一些搜索引擎機器人不能跟蹤以字符串結(jié)尾的地址。這種地址通常出現(xiàn)在一些把內(nèi)容動態(tài)的存在數(shù)據(jù)庫的網(wǎng)站里，看起來就像下面這樣:
http://yourdomain.com/products.asp?item=34627393474632&id=4344
最簡單的創(chuàng)建對搜索引擎機器人和人們都有易的URL的方法是改變它看起來的樣子，使URL看起來就像直接的某個目錄，上面的URL應(yīng)該改變成:
http://yourdomain.com/products/item/34627393474632/id/4344/
Web服務(wù)器將會解釋新的URL，并在內(nèi)部把它轉(zhuǎn)換成原始的URL，最終以字符串結(jié)束。這部分的結(jié)尾是一些站點的網(wǎng)址，上面將會有更多的相關(guān)信息。
一個更好的改變URL的方法（多少有一些麻煩）是徹底的把看到的URLS改寫成人們易讀的方式:
http://yourdomain.com/products/flowers/tulips/
這種URLs的好處是搜索引擎機器人將把你的站點更好的收入到索引中，對于大家來說，它的可讀性也更強，并使你避免了泄漏你所使用的服務(wù)器方技術(shù)。因為在URLS中，并沒有顯示服務(wù)器專有文件的擴展名，如 .asp、.cf、.cgi 和 .jsp,這會使你更容易的更改服務(wù)器器方的技術(shù)，所以這種URLs顯得十分的必要。
如果你選擇使用包含字符串的URLs，把&編譯成HTML的實體&是很重要的。如果你不這么做，一些瀏覽器會替你完成這個工作，好象這是他們應(yīng)該做的。當他們碰到&，就把它看作一個實體的開始。如果緊接著&后的文本符合HTML中的一個實體，瀏覽器就會轉(zhuǎn)變這個URL，大多數(shù)情況，這將會破壞URL中的字符串。
還有一件事值得一提，對于大多數(shù)站點，使用 www這個次級域名是不必要的。應(yīng)該用 http://yourdomain.com/來代替 http://www.yourdomain.com/。更多的內(nèi)容請參閱no-www.org。無論你使不使用www，配置你的服務(wù)器地址，使其指向http://www.yourdo main.com/， http://yourdomain.com/也是同樣的道理。
闡述了各種URLs將產(chǎn)生的問題，以及如何使你的URLs更加的出色。
URLs為什么應(yīng)該以反斜杠結(jié)束，這樣的好處是什么？
一些關(guān)于URLs的文章和教程
一個詳盡的解釋，針對沒有對&編碼所產(chǎn)生的問題，以及其校驗的問題。
精選的一些可供參考的書籍、站點和郵件列表。
一個實例，告訴您如何使用CSS
上一部的續(xù)集
一本詳盡的CSS參考書
網(wǎng)站重構(gòu)—-國內(nèi)已有譯本
一本詳盡闡述可訪問性及如何創(chuàng)建可訪問性的書
W3C的官方定義
W3C的官方定義
一個郵件列表，討論CSS的實際用途和應(yīng)用程序。
一個收集了大量HTML、CSS教程、文章和參考文獻的站點。
樣式表的魅力，他們使用的都是相同的XHTML
幾篇寫得非常好的CSS文章
文章、證明、瀏覽器的漏洞等等
一個在線周刊，探討設(shè)計、發(fā)展、和WEB內(nèi)容的含義同時還關(guān)注著標準化設(shè)計的相關(guān)技術(shù)，以及給我們帶來的好處。
一個熱忠于開發(fā)網(wǎng)絡(luò)的郵件列表。大多數(shù)與Web設(shè)計和Web開發(fā)相關(guān)內(nèi)容列表里都有討論。
W3C的官方規(guī)范
一個好網(wǎng)站，上面已介紹。
Joe Clark寫的一本關(guān)于可訪問性的書的在線版。
深入親和力—-網(wǎng)上已有中文版本。
W3C的關(guān)于可訪問性站點的官方向?qū)А?/P>
W3C搜集的與站點可訪問性校驗與提高有關(guān)的文章。
一個堅持標準的民間聯(lián)盟，
為網(wǎng)站制作者提供一些促使Web標準成為客戶商業(yè)需求選擇的必要資料，在這個網(wǎng)站上有兩篇值得一讀的文章What Every Web Site Owner Should Know About Standards: A Web Standards Primer和The Way Forward with Web Standards.
Dave Shea的一篇面向想開始使用WEB標準的人的向?qū)А?/P>
W3C的官方規(guī)范
第三次提到它，值得一看。