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