文档标题

<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

• 项目一
• 项目二
• 项目三

<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>

1. 项目一
2. 项目二
3. 项目三

<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>

上海滩

这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。

周润发

和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标

CSS使你不想用传统列表来呈现内容成为可能。导航栏（一个链接的列表）就是一个很好的例子。使用列表作为菜单的好处是当一个浏览器不支持CSS时，这个菜单仍然起作用。

引用

用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是，IE不能识别，并且有些时候， <q>会引起一些可访问性的问题。正因为如此，一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<q>相关问题的看法。

对于那些一段或者好几段的长篇引用，就应当使用 <blockquote>了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在 <blockquote>中的，引用的内容还必须包含在一个元素中，通常是<p>。

属性cite既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。

例如:

<p>我的座佑名<q
cite="http://www.x5.com.cn/">别人的高标准，是我的基本要求。</q>.</p>

我的座佑名别人的高标准，是我的基本要求。.

<p>我的座佑名
<span class="quote">&#8220;别人的高标准，是我的基本要求。
&#8221;</span>.</p>

我的座佑名“别人的高标准，是我的基本要求。”.

<blockquote
cite="http://www.w3cn.org/">
<p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，
为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，
每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；
针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。
这是一种恶性循环，是一种巨大的浪费。
&#8221;</p>
</blockquote>

“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。 ”

强调

<em> 是用作强调的，<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。

例如:

<p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>

强调 的文本通常用斜体显示, 然而， 特别强调的文本通常以粗体显示。

表格

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。为了使数据表格有更强的访问性，了解和使用各种构造表格的组件就很重要了。比如表格标题 (<th>)、摘要(summary 属性)和首部说明 ( <caption>标签).

例如:

<table class="举例" summary="1999年到2003年，列表显示中国的平均人口增长率。">
<caption>中国的年均人口的增长, 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>增长</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>

想了解更多的关于表格及其使用的细节, 请参阅Tables in HTML documents 和 HTML Techniques for Web Content Accessibility Guidelines 1.0.

相关文章:

• SimpleQuiz

  一个很好的资源，告诉您如何用语义化的方法来标记。

5. (X)HTML

使用HTML4.01是可以制作出现代的、结构化的、兼容标准的站点的。然而，为了做到向整洁的语义化的代码的转变，并且为XML和未来的其他标记语言做好准备，建议大家使用XHTML1.0 Strict来创建新的站点，本文中的例子用的就是XHTML1.0 Strict。

XHTML 1.0 是以XML 1.0对HTML 4的改进，它的发展，以用来代替HTML。XHTML 1.0 Strict（这是我一直所倡导的）不支持表现类的标记（HTML 4.01其实也不支持，但是现在我们讨论的是XHTML）。正因为此，XHTML1.0 Strict 就促使了表现与结构的分离。

XHTML 1.1（XHTML的最新版）从技术上说，使用起来有一些复杂。因为规定中声明XHTML 1.1的文档应当使用MIME类型 application/xhtml+xml, 不应当被看作text/html。 并不是严格的禁止使用text/html, 只是不建议使用。 另外一方面，XHTML 1.0 （应当使用 application/xhtml+xml）同样可以使用MIME类型 text/html, 如果它是可兼容的HTML。W3C的注解XHTML Media Types 中包括了MIME类型（W3C推荐使用的类型）的概要。

不幸的是，一些老的浏览器包括IE不能识别MIME类型 application/xhtml+xml, 并且会终止显示源代码，甚至会干脆拒绝显示整个文档。

如果你想使用application/xhtml+xml, 你应当让服务器检验一下读取文档的浏览器是否支持MIME类型，如果能，就使用它，如果不能，就使用text/html。

如果你使用的是PHP作为服务器端的脚本，那么下面的这段脚本能够让你的文档针对不同的浏览器使用不同的MIME类型。

<?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");
}
?>

这个脚本是检测是否用户代理发送了一个包含“application/xhtml+xml”的Accept HTTP头，或者如果用户代理是W3C HTML校验器（不会发送合适的Accept HTTP头的，但是它依然支持 application/xhtml+xml）。如果上面检测的回答是肯定的，文本将被看作 application/xhtml+xml。那些浏览器也会收到一个XML的声明。对于另外的一些浏览器（包括IE的是所有版本），文档都将被看做 text/html。在文档中也没有添加额外的XML声明，因为如果添加的话，会使IE/WIN转化到我们所不希望的Quirks模式。

在Content-Type头部之后,一个被更改过的头部，将被发送到中间的缓存中（比如一些代理服务器），用来告诉他们文档的内容类型随着客户端对文档的请求而改变。

如果想了解更多的PHP检测脚本, 请参考Serving up XHTML with the correct MIME type. 那个脚本对请求客户端的q-rating（它声明了更够很好的支持某种MIME类型）进行了考虑，在发送text/html 文档给不支持 application/xhtml+xml的客户端之前，把XHTML转化成HTML 4。

下面的是一个相似的脚本，针对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"
%>

值得注意的是，当一个文档的MIME type是application/xhtml+xml时，一些浏览器（像Mozilla）是不会显示包含错误的文档的。这在开发过程中是一件好事，但是对于那些刚刚更新完站点且不是XHTML专家的人来说，就会出现一些问题，除非您能确保所有的代码都是规范的。如果出现了这种问题，您可以考虑使用HTML 4.01 Strict来代替XHTML。

下面列出了一些在使用XHTML 1.0 Strict中需要特别注意的地方:

• 永远使用小写字母，让引号伴随者属性: 所有元素和属性的名字都必须使用小写，所有属性值必须使用双引号。

  错误: <A HREF="index.html" CLASS=internal>
  正确: <a href="index.html" class="internal">

• 关闭所有的元素:在HTML中一些元素没有必要被关闭。当下一个元素开始的时候，上一个元素就自动被关闭。XHTML中是不允许这样的。所有元素都必须被关闭，即使其中没有内容（如 <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。

相关文章:

• HTML Versus XHTML

  The Web Standards Project询问W3C是使用HTML 还是XHTML, 为什么？

• Better Living Through XHTML

  一篇A List Apart article 上关于从HTML转换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

  简述了 XHTML 1.0 Strict 和 Transitional的不同之处

• Serving XHTML with the Right MIME Type

  The Web Standards Project 询问the W3C对于HTML和XHTML，应该使用哪种MIME type？

• XHTML Media Types

  告诉您用那种媒体类型来解释XHTML文档

• Bad Tags

  HTML Dog的一个在XHTML中不应当使用的元素和属性的向导。

• Specifying a MIME Type

  一篇关于MIME types 和告诉我们如何根据不同的服务器脚本语言显示不同的内容的文章。

• Serving XHTML 1.0

  W3C的一篇关于mime types 和 XHTML的文章。

Doctype（文档类型）

现在只有很少的HTML文档有一个正确而完整的doctype或者DTD (文档类型声明)。它现在更多的是在起装饰作用而没有什么功能作用，但是就在几年前刚开始的时候，一个doctype的定义，对浏览器解释这个文档起到很大的作用。

所有的HTML和XHTML文档都必须使它的doctype声明合法化。 doctype可以告诉我们在文档中使用的是什么版本的HTML和XHMTL，也决定了校验器以何种方式校验，浏览器以何种模式解释。如果文档中有一个正确而完整的doctype，许多浏览器将会转换到标准模式，那就意味着与CSS的规范更加接近了。因为浏览器不必再把时间用在弥补、解释不规范的HTML上了，所以文档的显示速度也加快了。这同样也会减少在不同浏览器上显示的差异性。

下面的doctype声明是针对XHTML 1.0 Strict的，它将会促使拥有“文档类型转换器”的浏览器使用他们的标准模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

相关文章:

• Fix Your Site With the Right DOCTYPE!

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

• Activating the Right Layout Mode Using the Doctype Declaration

  介绍了不同doctype声明对拥有文档类型转换器的浏览器的影响。

• List of valid DTDs you can use in your document

  W3C官方的正确doctype声明的列表。

字符编码

所有的XHTML文档都应当定义他们的字符编码。

最好的网页编码方法是配置你的网络服务器，使其发送带有字符编码的HTTP content-type头部。关于如何使用去做的具体细节，请参阅你所使服务器软件的说明。

如果你使用的是Apache，你可以通过在你的.htaccess文件中添加一两条规则来定义字符编码。例如，你的所有文件使用的都是utf-8, 添加下面的语句:

AddDefaultCharset utf-8

定义具有相同扩展名的文件的字符编码,则使用下面的代码：

AddCharset utf-8 .html

如果你的服务器允许你用PHP脚本时，你可以使用以下的代码来定义字符编码。

<?php
header("Content-Type: application/xhtml+xml; charset=utf-8");
?>

如果你的页面是HTML, 请把application/xhtml+xml换成 text/html。不管是什么原因，如果你不能配置你的服务器使其定义为你所使用的字符编码，你可以在<head>中使用<meta> 。即使你的服务器配置正确了，这也是个定义字符编码的好方法。

例如, 下面的<meta>告诉浏览器这是一个使用ISO-8859-1字符编码的文档:

<meta
http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />

h1 {
font-weight:bold;
}

<link rel="stylesheet" type="text/css" href="styles.css"
/>

<style type="text/css">
@import url("styles.css");
</style>

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