4. 結(jié)構(gòu)和表現(xiàn)

當(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)很重要。

相關(guān)文章:

Why tables for layout is stupid

在Seybold 2003上的一個(gè)演講幻燈演示

語(yǔ)義化的HTML

分離結(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)題做標(biāo)記, 要用<h1>、<h2>、 <h3>、<h4>、<h5>或者 <h6>，這完全取決于標(biāo)題的等級(jí)。<h1>是最高的等級(jí)。

例如:

<h1>文檔標(biāo)題</h1>
<h2>次級(jí)標(biāo)題</h2>

文檔標(biāo)題

次級(jí)標(biāo)題

段落

用<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>

項(xiàng)目一
項(xiàng)目二
項(xiàng)目三

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

項(xiàng)目一
項(xiàng)目二
項(xiàng)目三
<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>上海灘

這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經(jīng)典的劇集。 當(dāng)年在香港播出以后，產(chǎn)生了巨大的轟動(dòng)效應(yīng)。

周潤(rùn)發(fā)

和所有偉大的影星一樣，周潤(rùn)發(fā)印證了一個(gè)時(shí)代，一個(gè)香港電影的黃金時(shí)代。 風(fēng)衣墨鏡、冷血雙槍、陽(yáng)光微笑，都封存膠片之中，當(dāng)我們回首尋望的時(shí)候，發(fā)哥已被刻為一個(gè)時(shí)代的坐標(biāo)

CSS使你不想用傳統(tǒng)列表來(lái)呈現(xiàn)內(nèi)容成為可能。導(dǎo)航欄（一個(gè)鏈接的列表）就是一個(gè)很好的例子。使用列表作為菜單的好處是當(dāng)一個(gè)瀏覽器不支持CSS時(shí)，這個(gè)菜單仍然起作用。

出處：藍(lán)色理想
責(zé)任編輯：紅色黑客

上一頁(yè) 為什么使用Web標(biāo)準(zhǔn)以及校驗(yàn) 下一頁(yè) 了解基礎(chǔ)變化

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論