例如:

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

1. 項(xiàng)目一
2. 項(xiàng)目二
3. 項(xiàng)目三

<dl>

    <dt>上海灘</dt>

    <dd>這部拍攝于1980年的《上海灘》堪稱(chēng)是香港電視史上最成功、最經(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年的《上海灘》堪稱(chēng)是香港電視史上最成功、最經(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è)菜單仍然起作用。

引用

用<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ù)念?lèi)的 <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">&#8220;別人的高標(biāo)準(zhǔn)，是我的基本要求。

&#8221;</span>.</p>

我的座佑名“別人的高標(biāo)準(zhǔn)，是我的基本要求�！�.

<blockquote 

cite="http://www.w3cn.org/">

    <p>&#8220;我們大部分人都有深刻體驗(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ù)。類(lèi)似的問(wèn)題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；

 針對(duì)某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無(wú)法瀏覽網(wǎng)站等等。

 這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。

&#8221;</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ù)。類(lèi)似的問(wèn)題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；針對(duì)某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無(wú)法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。 ”

強(qiáng)調(diào)

<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>&#160;</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>

想了解更多的關(guān)于表格及其使用的細(xì)節(jié), 請(qǐng)參閱Tables in HTML documents 和 HTML Techniques for Web Content Accessibility Guidelines 1.0.

相關(guān)文章:

• SimpleQuiz

  一個(gè)很好的資源，告訴您如何用語(yǔ)義化的方法來(lái)標(biāo)記。

5. (X)HTML

使用HTML4.01是可以制作出現(xiàn)代的、結(jié)構(gòu)化的、兼容標(biāo)準(zhǔn)的站點(diǎn)的。然而，為了做到向整潔的語(yǔ)義化的代碼的轉(zhuǎn)變，并且為XML和未來(lái)的其他標(biāo)記語(yǔ)言做好預(yù)備，建議大家使用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)類(lèi)的標(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類(lèi)型 application/xhtml xml, 不應(yīng)當(dāng)被看作text/html。 并不是嚴(yán)格的禁止使用text/html, 只是不建議使用。 另外一方面，XHTML 1.0 （應(yīng)當(dāng)使用 application/xhtml xml）同樣可以使用MIME類(lèi)型 text/html, 假如它是可兼容的HTML。W3C的注解XHTML Media Types 中包括了MIME類(lèi)型（W3C推薦使用的類(lèi)型）的概要。

不幸的是，一些老的瀏覽器包括IE不能識(shí)別MIME類(lèi)型 application/xhtml xml, 并且會(huì)終止顯示源代碼，甚至?xí)�干脆拒絕顯示整個(gè)文檔。

假如你想使用application/xhtml xml, 你應(yīng)當(dāng)讓服務(wù)器檢驗(yàn)一下讀取文檔的瀏覽器是否支持MIME類(lèi)型，假如能，就使用它，假如不能，就使用text/html。

假如你使用的是PHP作為服務(wù)器端的腳本，那么下面的這段腳本能夠讓你的文檔針對(duì)不同的瀏覽器使用不同的MIME類(lèi)型。

<?php

if (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)容類(lèi)型隨著客戶端對(duì)文檔的請(qǐng)求而改變。

假如想了解更多的PHP檢測(cè)腳本, 請(qǐng)參考Serving up XHTML with the correct MIME type. 那個(gè)腳本對(duì)請(qǐng)求客戶端的q-rating（它聲明了更夠很好的支持某種MIME類(lèi)型）進(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 Then

    Response.ContentType = "application/xhtml xml"

    Response.Write("<?xml version=""1.0"" encoding=""iso-8859-1""?>" & VBCrLf);

Else

    Response.ContentType = "text/html"

End If

Response.Charset = "iso-8859-1"

%>

值得注重的是，當(dāng)一個(gè)文檔的MIME type是application/xhtml xml時(shí)，一些瀏覽器（像Mozilla）是不會(huì)顯示包含錯(cuò)誤的文檔的。這在開(kāi)發(fā)過(guò)程中是一件好事，但是對(duì)于那些剛剛更新完站點(diǎn)且不是XHTML專(zhuān)家的人來(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中是不答應(yīng)這樣的。所有元素都必須被關(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則不答應(yīng)這樣做。

  錯(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是被答應(yīng)的，而在XHTML 1.0 Strict下則不被支持(還有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (對(duì)于某些元素)和 background。

相關(guān)文章:

• HTML Versus XHTML

  The Web Standards Project詢(xún)問(wèn)W3C是使用HTML 還是XHTML, 為什么？

• Better Living Through XHTML

  一篇A List Apart article 上關(guān)于從HTML轉(zhuǎn)換XHTML的文章。

• The New York Public Library Online Style Guide

  具體的闡述了如何使用XHTML和CSS。

• XHTML 1.0 Differences with HTML 4

  W3C給您解釋XHTML 1.0 和 HTML 4的不同之處。

• XHTML: Differences between Strict & Transitional

  簡(jiǎn)述了 XHTML 1.0 Strict 和 Transitional的不同之處

• Serving XHTML with the Right MIME Type

  The Web Standards Project 詢(xún)問(wèn)the W3C對(duì)于HTML和XHTML，應(yīng)該使用哪種MIME type？

• XHTML Media Types

  告訴您用那種媒體類(lèi)型來(lái)解釋XHTML文檔

• Bad Tags

  HTML Dog的一個(gè)在XHTML中不應(yīng)當(dāng)使用的元素和屬性的向?qū)А?/P>

• Specifying a MIME Type

  一篇關(guān)于MIME types 和告訴我們?nèi)绾胃鶕?jù)不同的服務(wù)器腳本語(yǔ)言顯示不同的內(nèi)容的文章。

• Serving XHTML 1.0

  W3C的一篇關(guān)于mime types 和 XHTML的文章。

Doctype（文檔類(lèi)型）

現(xiàn)在只有很少的HTML文檔有一個(gè)正確而完整的doctype或者DTD (文檔類(lèi)型聲明)。它現(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ì)促使擁有“文檔類(lèi)型轉(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">

相關(guān)文章:

• Fix Your Site With the Right DOCTYPE!

  一篇A List Apart的文章，告訴您如何以及為什么要使用doctype。

• Activating the Right Layout Mode Using the Doctype Declaration

  介紹了不同doctype聲明對(duì)擁有文檔類(lèi)型轉(zhuǎn)換器的瀏覽器的影響。

• List of valid DTDs you can use in your document

  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ù)器答應(yīng)你用PHP腳本時(shí)，你可以使用以下的代碼來(lái)定義字符編碼。

<?php

    header("Content-Type: application/xhtml xml; charset=utf-8");

?>

假如你的頁(yè)面是HTML, 請(qǐng)把application/xhtml xml換成 text/html。不管是什么原因，假如你不能配置你的服務(wù)器使其定義為你所使用的字符編碼，你可以在<head>中使用<meta> 。即使你的服務(wù)器配置正確了，這也是個(gè)定義字符編碼的好方法。

<meta 

http-equiv="content-type" content="text/html;

charset=ISO-8859-1" />

<h1 

style="font-weight:bold;">Rubrik</h1>

<style 

type="text/css">

h1 {

    font-weight:bold;

}

</style>

p {

    color:#0f0;

    font-weight:bold;

}

<h3><em>Headline</em></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 p {

    /* rules */

}

http://yourdomain.com/products.asp?item=34627393474632&id=4344

http://yourdomain.com/products/item/34627393474632/id/4344/

http://yourdomain.com/products/

flowers/tulips/