我們?cè)?jīng)為本節(jié)撰寫(xiě)的標(biāo)題是：“XHTML : 簡(jiǎn)單的規(guī)則，容易的方針。”原因之一是，本節(jié)討論的規(guī)則和方針是簡(jiǎn)單和容易的。原因之二是，一本簡(jiǎn)單和容易的 WEB 設(shè)計(jì)圖書(shū)，就像超級(jí)市場(chǎng)的新式的免費(fèi)商品一樣，雖然常見(jiàn)卻可以有效地吸引人的眼球，這樣的東西可以刺激人的興趣，并且鼓勵(lì)人們嘗試。

我確實(shí)希望本節(jié)的內(nèi)容可以激發(fā)你的興趣，并鼓勵(lì)你去嘗試。為什么這么說(shuō)呢？因?yàn)橐坏┠阏莆樟吮菊掳暮?jiǎn)單容易的理念，你就會(huì)重新思考網(wǎng)頁(yè)運(yùn)作的方式，并開(kāi)始改變建造它們的方法。然而我并不希望你只是將代碼重新改寫(xiě)一遍。我希望你可以實(shí)實(shí)在在地以另一種方式思考和工作。

另一方面，重構(gòu)才是 XHTML 真正的意義。

在本章，我們將研究結(jié)構(gòu)化標(biāo)記的機(jī)制和涵義。如果你正在將網(wǎng)站標(biāo)準(zhǔn)融入你的開(kāi)發(fā)項(xiàng)目，你或許會(huì)覺(jué)得本章的內(nèi)容有些熟悉。不過(guò)即便是這方面的老手，也會(huì)從本章發(fā)現(xiàn)意外的收獲。

XHTML 規(guī)則概要

將傳統(tǒng)的 HTML 轉(zhuǎn)換為 XHTML 1.0 是快捷且無(wú)痛的，只要你遵守一些簡(jiǎn)單的規(guī)則和容易的方針。不管是否使用過(guò) HTML，都不會(huì)妨礙你使用 XHTML。

• 使用恰當(dāng)?shù)奈臋n類(lèi)型聲明和命名空間。
• 使用 meta 元素聲明你的內(nèi)容類(lèi)型。
• 使用小寫(xiě)字母書(shū)寫(xiě)所有的元素和屬性。
• 為所有的屬性值加引號(hào)。
• 為所有的屬性分配值。
• 關(guān)閉所有的標(biāo)簽。
• 使用空格和斜線關(guān)閉空標(biāo)簽。
• 不要在注釋中寫(xiě)雙下劃線。
• 確保小于號(hào)及和號(hào)為 < 和 &

Unicode 和其他字符集

XML、XHTML、和HTML 4.0 文檔的默認(rèn)字符集是 Unicode，一個(gè)由 Unicode 聯(lián)盟定義的標(biāo)準(zhǔn)。Unicode 是一套全面的字符集，它為每個(gè)字符提供了一個(gè)特定的唯一的數(shù)字，不論平臺(tái)、程序和語(yǔ)言。Unicode 也是我們擁有的最接近通用字母表的事物，盡管它并不是一個(gè)字母表，而是一套數(shù)字映射方案。

盡管 Unicode 是 web 文檔默認(rèn)的字符集，開(kāi)發(fā)人員依然可以自由地選擇更適合他們的其他字符集。比方說(shuō)，美國(guó)和西歐的網(wǎng)站常常使用 ISO-8859-1 (Latin-1) 編碼，而中華人民共和國(guó)的國(guó)家標(biāo)準(zhǔn)是 gb2312。

為表達(dá)語(yǔ)義而標(biāo)記文檔，而不是為了樣式

記住：請(qǐng)最大限度地使用 CSS 來(lái)進(jìn)行布局。在 web 標(biāo)準(zhǔn)的世界里，XHTML 標(biāo)記與表現(xiàn)無(wú)關(guān)，它只與文檔結(jié)構(gòu)有關(guān)。

結(jié)構(gòu)良好的文檔可以向?yàn)g覽器傳達(dá)盡可能多的語(yǔ)義，不論是瀏覽器位于掌上電腦還是時(shí)髦的桌面圖形瀏覽器。結(jié)構(gòu)良好的文檔都能向用戶(hù)傳達(dá)可視化的語(yǔ)義，即使是在老的瀏覽器，或是在被用戶(hù)關(guān)閉了 CSS 的現(xiàn)代瀏覽器中。

不是每個(gè)站點(diǎn)都能立即拋棄 HTML 表格布局。CSS 的發(fā)明者，W3C，直到 2002 年 11 月才將官方網(wǎng)站轉(zhuǎn)換為 CSS 布局。然而，即使是頑固的唯標(biāo)準(zhǔn)主義者也不總是將表現(xiàn)從結(jié)構(gòu)中完全分離處理，至少在 XHTML 1 中是做不到的。但是現(xiàn)在，我們可以向這個(gè)理想邁出重大的一步，通過(guò)將表現(xiàn)從結(jié)構(gòu)中分離（或者說(shuō)將數(shù)據(jù)從設(shè)計(jì)中），即使是混合的傳統(tǒng)的布局也可從中受益。

下面有一些提示，可以幫助你通過(guò)更結(jié)構(gòu)化的方式進(jìn)行思維：

提綱內(nèi)的色彩

在語(yǔ)法學(xué)校，我們中的大部分人都被迫使用標(biāo)準(zhǔn)的提綱格式來(lái)寫(xiě)文章。現(xiàn)在，我們成為了設(shè)計(jì)師，可以多么自由地?cái)[脫提綱的限制，然后大膽地投身于獨(dú)特的個(gè)人表達(dá)的自由領(lǐng)域（也許我們的宣傳冊(cè)和商業(yè)站點(diǎn)還不是那么獨(dú)特和個(gè)人化）。但是至少我們不會(huì)再受到提綱的困擾了。

實(shí)際上，依照 HTML，我們應(yīng)該將內(nèi)容結(jié)構(gòu)化為有組織的層級(jí)。在瀏覽器不支持 CSS 的時(shí)期，我們無(wú)法在交付可供銷(xiāo)售的布局的同時(shí)做到這一點(diǎn)。但是今天，在將我們的設(shè)計(jì)不折不扣地實(shí)現(xiàn)的同時(shí)，我們有能力交付內(nèi)在結(jié)構(gòu)良好的文檔。

當(dāng)你將供網(wǎng)絡(luò)使用的文本進(jìn)行標(biāo)記，或者當(dāng)你將已有的文本文檔轉(zhuǎn)換為網(wǎng)頁(yè)時(shí)，請(qǐng)使用傳統(tǒng)提綱的這些條目進(jìn)行思考。

<h1>我的主題</h1>
<p>介紹性文字</p>
<h2>補(bǔ)充性的觀點(diǎn)</h2>
<p>相關(guān)文字</p>

同時(shí)，避免使用已被廢棄的 HTML 元素比如 <font>，或者無(wú)語(yǔ)義的元素比如 <br />，來(lái)模擬其實(shí)不存在的邏輯結(jié)構(gòu)。

比如，不要像這樣做：

<font size="7">我的主題</font><br />
介紹性文字<br /><br />
<font size="6">補(bǔ)充性的觀點(diǎn)</font><br />
相關(guān)文字<br />

根據(jù)它們的意義使用元素，而不是根據(jù)它們的外觀

我們中一些人已經(jīng)陷在了一個(gè)壞習(xí)慣中，當(dāng)我們僅僅需要一個(gè)大號(hào)字的文本時(shí)使用h1，或者在我們需要在前面加一個(gè)圓點(diǎn)符號(hào)時(shí)使用 li。就像我們?cè)谇懊娴恼鹿?jié)討論過(guò)的，瀏覽器一直都習(xí)慣于將設(shè)計(jì)屬性強(qiáng)加于 HTML 元素之上。我們都一直習(xí)慣于認(rèn)為，h1 意味著大號(hào)字，而li意味著圓點(diǎn)，或者 blockquote 意味著文本縮進(jìn)。我們中的大多數(shù)人還在使用結(jié)構(gòu)化元素模擬表現(xiàn)效果的方式來(lái)胡亂地寫(xiě)作 HTML。

同樣地，假如設(shè)計(jì)師希望所有的標(biāo)題使用相同的字號(hào)，她會(huì)將所有的標(biāo)題設(shè)置為 h1，即使這么做毫無(wú)結(jié)構(gòu)化語(yǔ)義可言。

<h1>這是主標(biāo)題，在我將文本按照提綱格式組織的情況下。</h1>
<h1>這不是主標(biāo)題，但是我希望它與上面的標(biāo)題使用一樣的字體，但是我不知該如何使用CSS。</h1>
<h1>這根本不是一個(gè)標(biāo)題。但是我非常希望頁(yè)面中的文字使用相同的字體，以達(dá)到我希望的，
如果我了解CSS，就可以在不打亂文檔結(jié)構(gòu)的情況下達(dá)到這個(gè)設(shè)計(jì)。</h1>

我們必須把我們的小把戲放到一邊，然后開(kāi)始根據(jù)元素的語(yǔ)義來(lái)使用它們，而不是根據(jù)它們看上去的樣子。實(shí)際上，h1可以成為你希望的任何樣子。通過(guò) CSS，h1 可以成為非粗體的小號(hào)的羅馬字體，而 p 文本可以成為粗體的大號(hào)字，li 也可以沒(méi)有圓點(diǎn)（你或者可以使用小貓小狗或者公司標(biāo)志的 PNG,GIF 或者 JPEG 圖片取而代之）等等。

從今天開(kāi)始，我們將要使用 CSS 來(lái)決定元素的外觀。我們甚至可以根據(jù)元素在頁(yè)面中或者在站點(diǎn)中所在的位置來(lái)改變它們的外觀。 CSS 可以將表現(xiàn)從結(jié)構(gòu)中徹底抽離，并且允許你按照你喜歡的樣式來(lái)格式化任何元素。

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

你為什么要這么做呢？這么做的目的是為了在圖形瀏覽器中獲得品牌化的外觀和感覺(jué)的同時(shí)，在文本瀏覽器、無(wú)線設(shè)備、HTML 格式的電子郵件中，文檔的結(jié)構(gòu)得到保留。

我們并不想在關(guān)于 XHTML 的章節(jié)講述更多 CSS 方面的技術(shù)。我們只是希望展示文檔結(jié)構(gòu)和可視表達(dá)是兩個(gè)完全不同的事物，并且結(jié)構(gòu)化元素應(yīng)被用來(lái)轉(zhuǎn)換文本，而不是強(qiáng)加顯示效果。

使用結(jié)構(gòu)化元素，而不是無(wú)意義的垃圾

由于我們已經(jīng)忘記或者根本不知道 HTML 和 XHTML 的用途是傳達(dá)結(jié)構(gòu)化的意義，許多 HTML 爭(zhēng)論者這樣使用標(biāo)簽來(lái)插入列表：

項(xiàng)目一<br />
項(xiàng)目二<br />
項(xiàng)目三<br />

考慮一下使用有序或者無(wú)序列表取而代之：

<ul>
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
</ul>

"但是li給我一個(gè)圓點(diǎn)，而我不需要圓點(diǎn)！"你也許會(huì)這么說(shuō)。根據(jù)上面的章節(jié)，CSS不對(duì)元素被期望的外觀做任何假定。它等待你來(lái)告訴它你所期待的元素外觀。關(guān)閉圓點(diǎn)是 CSS 的最基本的能力。它有能力使列表看起來(lái)和普通文本沒(méi)有兩樣，也可以使列表看起來(lái)像圖形導(dǎo)航欄，具有完整的反轉(zhuǎn)效果。

所以，請(qǐng)使用列表元素來(lái)標(biāo)記列表。相似地，使用 strong 來(lái)代替 b，使用 em 代替 i，等等。在大多數(shù)桌面瀏覽器缺省狀態(tài)下，strong 的顯示效果和 b 相同，而 em 和 i 相同，同時(shí)也可以在不破壞文檔結(jié)構(gòu)的情況下創(chuàng)建你期待的視覺(jué)效果。

盡管 CSS 不會(huì)為任何元素的顯示作假設(shè)，瀏覽器卻作了很多假設(shè)，并且我們還沒(méi)有碰到一個(gè)將 strong 顯示為其他效果而不是粗體字的瀏覽器（除非是被設(shè)計(jì)師創(chuàng)建的 CSS 指示以其他方式顯示）。假如你擔(dān)心某個(gè)陌生的瀏覽器不會(huì)將 strong 顯示為粗體字，你可以編寫(xiě)這么一條 CSS 規(guī)則：

strong {
	font-weight: bold;
	font-style: normal;
	}

視覺(jué)元素和結(jié)構(gòu)

web 標(biāo)準(zhǔn)不僅要求我們使用何種科技，而且還要遵守使用這些技術(shù)的方式。使用 XHTML 來(lái)編寫(xiě)標(biāo)記，同時(shí)使用 CSS 來(lái)處理一部分或者全部的布局，并不一定會(huì)使站點(diǎn)更易用更輕便，同時(shí)節(jié)約多少帶寬。就像我們?cè)谠缙谑褂玫募夹g(shù)那樣，XHTML 和 CSS 也會(huì)被誤用和濫用。冗長(zhǎng)的 XHTML 和冗長(zhǎng)的 HTML 一樣，都會(huì)浪費(fèi)用戶(hù)的帶寬和時(shí)間。冗長(zhǎng)的過(guò)度的 CSS 也不能完全的代替表現(xiàn) HTML 代碼；這只不過(guò)是一種糟糕的東西被另一種代替了而已。