用Web标准进行开发

建议与好的实例

原作：Roger Johansson, 456 Berea Street (翻译：x5, x5studio) Last updated 2005-01-15

There is also an English vision English.

内容

1. 简介
2. 历史
3. Web 标准
4. 结构和表现
5. （X）HTML（可扩展超文本置标语言）
6. CSS（层叠式样式表）
7. 可访问性
8. URLs（页面地址）
9. 参考资料
10. 专业词汇

1. 简介

本文阐述了 Web 标准是如何使一个开发者建设网站更加的节省时间与金钱，如何使浏览者获得更好的浏览体验，以及他们的原因。同时，讨论中还涉及到一些方法，准则和好的实例用来帮助您建设一个对尽可能多的人都充满亲和力的高质量网站。

2. 历史

在90年代后期，当互联网和 Web 逐渐成为主流时，Web浏览器的开发商还没有完全的支持 CSS（层叠式样式表，对于 Web 开发人员来说，他们可以用 CSS 来控制 HTML 文档的表现）。考虑到 CSS1 是在1996年制定的，而 CSS2 是在1998年才制定的，所以这种对 CSS 支持的不足也是可以理解的。

由于浏览器缺乏对 CSS 的支持，加上一些美术师需要以设计印刷品的方式来控制页面的外观，导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是，当设计师可以用 border="0" 来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。另一个例子是对透明的——也就是看不见的——空白 GIF 图片来控制布局。

由于 HTML 根本就不是用来控制文档外观的，导致大量的乱码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说，标签汤（tag soup）是一个很形象的名字。

新版本的 Web 浏览器的发布，使得对 CSS 的支持得到了加强与扩展，但是并没有达到它应有的水平。尽管浏览器的开发商对 CSS 支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持 CSS，此时，不应该再有任何理由再像以前那样使用 HTML 了，应该让它恢复本来的面貌：去描述文档的结构 ，而不是它的表现。 正因为此，我们现在才能够用 CSS 来达到其本来的目的。

3. Web标准

什么是 Web 标准？

Web 标准是一些规范的集合，是由 W3C 和其他的标准化组织共同制定的，以用它来创建和解释基于 Web 的内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。

结构化语言

• HTML （超文本置标语言） 4.01
• XHTML （可扩展超文本置标语言） 1.0
• XHTML 1.1
• XML （可扩展标记语言） 1.0

表现类语言

• CSS （层叠式样式表） Level 1
• CSS Level 2 revision 1
• CSS Level 3 （正在开发中）
• MathML （数学置标语言）
• SVG （可变矢量图形）

对象模型

• DOM （文档对象模型） Level 1
• DOM Level 2
• DOM Level 3 Core

脚本语言

• ECMAScript 262 （JavaScript的标准化版本）

本文关注的是 XHTML 1.0 Strict（代表结构）、CSS Level 1 和 Level 2（代表表现）、ECMAScript 262（代表脚本--并不是指那些脚本的例子）。

当一个文档被认为离 Web 标准不远了的时候，那就意味着，除了具有上面所提到的技术，还应当：

• 由符合标准的 XHTML 组成
• 用 CSS 来布局而不是表格
• 使用结构化、语义化的标记
• 能够在任何浏览器中显示

注意，“能够在任何浏览器中显示”并不意味着“在任何一个浏览器中显示的效果相同”。使一个文档在不同的浏览器和平台上都有相同的显示效果是不可能的，即便只用图片也不可能，因为发布在网上的文档将被不同的操作系统上的不同的浏览器软件所显示，并显示在不同大小与质量的显示器上（或者显示在非显示器上），浏览者也可能改变了浏览器的默认字体或者其他喜好。接受这些能使您减少一些挫折感。每一个做网页的人都应该了解，一些技术上的先决条件我们不得不考虑，就像那些出书、拍电影、拍电视的人一样，他们也有一些其他方面的前提必须要考虑。

为什么要使用 Web 标准？

一些 Web 开发人员和 Web 设计师对使用 Web 标准持抵触态度。普遍的看法是它太难了，不管它是怎么运作，我使用的那些软件总会创建出一些不规范的代码。.

学习新的技术并放弃您所熟知的技术，这很容易引起情绪上的反感，并产生抵触的情绪。然而，如果您很理智的观察一下现在的形势，将会发现，通过学习和使用Web标准会得到许多好处。举几个例子：

• 更简易的开发与维护: 使用更具有语义和结构化的 HTML，将让您更加容易、快速的理解他人编写的代码。
• 与未来浏览器的兼容: 当您使用已定义的标准和规范的代码，那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
• 更快的网页下载、读取速度: 更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。
• 更好的可访问性: 语义化的HTML（结构和表现相分离）将让使用读屏器以及不同的浏览设备的读者都能很容易的看到内容。
• 更高的搜索引擎排名: 内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。
• 更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的 CSS 文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

Web 标准可以为网站的创建者节省时间与金钱，还可以为网站的浏览者提供一个更好的体验。此外，Web 标准是未来的发展方向。如果你还没有使用 Web 标准，那么现在应该开始动手了，否则你会落伍的。

相关文章:

• My Web site is standard! And yours?

  W3C 的文章，介绍如何改进你网站代码的质量。

• Fighting for Standards

  Web 标准计划的声明。

• What are web standards and why should I use them?

  Web 标准计划的一篇文章，对 Web 和为什么使用它是一件好事进行了阐述。

• The Business Benefits of Web Standards

  告诉您一个公司是如何通过使用 Web 标准而盈利的。

• Web Standards for Business

  写给那些营销、通信、IT领域中的管钱人。

校验

校验是一个控制的过程，在这个过程中，文档必须遵守语言的规则。这个过程就好像是给文本的拼写和语法作检查一样。

规范是网页开发中的一个重要部分。许多很难被发现的错误可以在校验中发现。错误可能是一个微不足道的打字错误，也可能是严重的元素和属性的不规范错误。

不幸的是，许多人并不校验他们的文档。一些人或许根本不知道校验这回事，还有一些人想不起来去校验，甚至还有一些人故意的逃避校验。这种情况的出现，大部分的责任要归咎于 Web 浏览器的开发商。大多数的浏览器都会去尽全力的去解释不规范的 HTML 代码，并努力的去猜测作者的意图，以此来避免显示错误的信息。这种行为就导致了如今混乱代码的泛滥。这种标记的问题是，它带来了一些不可预测的结果，因为它依靠的是 Web 浏览器错误的处理。

没有任何原因不去校验您的 HTML 和 CSS 。相反，它还会给您带来许多好处。

Why we won’t help you 是 Mark 写的一篇阐述校验优点的文章，十分的棒。里面还解释了为什么如果您在校验您的网站之前去求助，那么想从论坛和邮件列表中的人取得帮助会非常的困难。

一些HTML编辑器（像 BBEdit 和 Homesite ）都嵌入了校验工具。如果你的开发工具里没有嵌入校验的话，你可以使用 W3C 的校验服务，可在线使用:

• （X）HTML: W3C 的标记校验服务
• CSS : W3C 的 CSS 校验服务

理解校验显示的错误提示可能有一些困难。一个位于文档前面的错误可能会导致另外几个额外的错误。改了第一个错误后，通常你就会减少一定数量的错误了。下面这个网址，将有一些常见错误提示的说明： Common XHTML Validation Errors

确保你的代码是完全规范的，总是一件好事，但是当一些校验的错误很难避免时，就会有一些特殊的情况。其中最常见的的例子就是在一篇文档中嵌入 FLASH 或者一些其他需要插件的内容。下面是关于这个问题的相关文章 Flash Satay: Embedding Flash While Supporting Standards 和 Embedding flash without <embed>.

4. 结构和表现

当讨论 Web 标准时，一些事情总是被提及，那就是结构和表现分离的重要性。刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。

结构 是由文档中的主体部分，再加上语义化、结构化的标记。

表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。

尽可能的把结构和表现相分离。理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。

如今表现与结构的分离在网上还不是很普遍。大多数网站上的HTML代码既缺少语义也缺少结构。

用表格布局

为了使表现和结构相分离，你必须用 CSS 来代替表格去控制一个文档的表现。当你习惯于用表格来布局的时候，这将使你感觉很奇怪很不适应，但是，这并不像它看上去的那么困难。你可以在网上找到许多可用的帮助，它的好处太多了，所以它确实值得您去花时间去转变一下思想，这点很重要。

相关文章:

• Why tables for layout is stupid

  在 Seybold 2003 上的一个演讲幻灯演示。

语义化的 HTML

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<span>来代替<h1>标记标题。

通过使用语义化的 HTML ，你将会使文档中的不同部分对于任何浏览器都变得有意义，无论浏览器是现今 PC 上的最新的图象化浏览器，还是不支持 CSS 的老浏览器，或者还是 Unix shell 中的文本浏览器。

标题

为了给标题做标记, 要用 <h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 或者 <h6> ，这完全取决于标题的等级。 <h1> 是最7高的等级。

例如:

<h1>文档标题</h1>
<h2>次级标题</h2>

文档标题

次级标题

段落

用 <p> 来标记段落。不要使用 <br /> 来生成段落间的空行。用 CSS 来控制段落间的空隙（Margins），这个空隙可以确保段落标记的正确无误。

例如:

<p>浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，
浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，
转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，
在我心中起伏够。</p>

浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，在我心中起伏够。

列表

一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法：无序、有序和自定义。

无序列表, 就是我们所熟知的圆圈列表, 以 <ul>开始，以</ul>结束。每一个列表项都包含在<li>之中。

有序列表，以<ol>开始，以</ol>结束。

自定义列表有一些不同，可以用来标记一些列表项和描述，以<dl>开始，以</dl>结束。每一个被描述的项目，要包含在<dt>中，而描述的内容要包含在<dd>中。

例如:

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

中国的年均人口的增长, 1999–2003 1999 2000 2001 2002 2003 人口 增长

8 861 426	8 882 792	8 909 128	8 940 788	8 975 670
7 104	21 366	26 368	31 884	34 882

想了解更多的关于表格及其使用的细节, 请参阅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" />

相关文章:

• WaSP Asks the W3C: Specifying Character Encoding

  The Web Standards Project询问W3C，作者应该如何定义字符编码。

• The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets （No Excuses!）

  一篇介绍不同类型字符编码的文章

• Using national and special characters in HTML

  告诉您如何在HTML中使用通用的和专有的字符。

• Tutorial: Character sets & encodings in XHTML, HTML and CSS （DRAFT）

  一篇教您选择和声明字符编码的教程。

6. CSS

CSS过去经常被用来定义字体的属性，而现在可以用它来控制整个文档的布局。然而，为了有效的用CSS来控制布局，需要做一些不同的处理，这种不同是跟用表格布局相对比的。

为了CSS可以高效的控制布局，结构化、语义化的XHTML是必不可少的。

浏览器的支持

正如前面所提到的，在过去几年，浏览器对CSS的支持程度已经改进了很多。不幸的是，浏览器的开发商好象对实施开放的标准并不感兴趣，所以不同浏览器对CSS的支持程度也大相径庭。就算是支持程度最好的浏览器，在软件中仍然有一些bug，使得浏览器以错误的方式运行。

现在（2004年）, 对CSS支持比较好的浏览器有Mozilla （还有以Gecko为内核的: Firefox, Camino, Netscape 6+）, Opera和Safari （还有以 WebCore为内核的: OmniWeb 4.5 and later）。 Internet Explorer 6/Win并没有如此好的CSS支持程度，但是它将让你为其做出大量的基础工作。Internet Explorer 5/Mac对CSS 1的支持很出色, 但是却不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些问题值得你去注意。早期版本的IE以及Netscape 6以前的版本就没有必要提及了。

因为现在大多数人都使用IE/WIN，所以你将不得不让它成为特殊分子。这并不是说，你不能或者不应该使用有更好支持CSS能力的浏览器来提高他们的设计能力。

现在在用的浏览器中，并不是所有的浏览器都有很好的CSS支持能力，使其能够具有解释用CSS布局的优秀图形化站点的能力。幸运的是，对于大多数网站，只有很小比例的访问者还在使用不能解释CSS的老浏览器。

值得注意的是，这些人并不会被排斥在外的。在90年代，浏览器检验脚本是一个很流行的方法，它告诉那些使用“错误”浏览器的使用者一个新的网址，那个网址告诉他们去升级浏览器，好重新连接到那个网站。

现在，你可以以一种更好的办法应付不被支持的浏览器。使用逻辑化、语义化的一个最大的好处就是它使文档在没有CSS时，仍然可以使用和访问。表现（就是文档看上去的样子）在一个支持性好的浏览器中也将呈现的不一样，但是它的内容将永远不变，大多数情况，对于访问网站的人来说，内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面，要比把他们排斥在外要好的原因。

有好几种方式去解决这个问题：一种最常见的方法是使用@import来链接相应的的CSS文件。Netscape 4和老的浏览器不支持@import所以将不会导入CSS文件。还有许多方法来向浏览器隐藏CSS。大多数隐藏CSS的方法是利用了浏览器对CSS解释时的漏洞。这意味着总会存在浏览器通过升级弥补漏洞的危险。所以越少的依赖CSS hacks（CSS漏洞）越好。

很明显的，你可以使用服务器端技术去做一个浏览器检测，然后针对不同的浏览器，发送不同的CSS文件。如果你这么做了，你必须要确保检测脚本是通用的，以避免因为浏览器的升级或者新的浏览器发布导致发送错误的CSS文件。

相关文章:

• Tricking Browsers and Hiding Styles

  Eric Meyer讲述了针对特定的浏览器隐藏CSS的四种方法。

• CSS Filters and Hacks

  隐藏CSS技术大荟萃。

• Progressive enhancement using CSS

  介绍用不同方法来加强使用现今浏览器的人们的体验。

用不同的方法应用CSS

有以下几种方法使一个HTML文档中的元素应用CSS。

外链式

把所有的CSS规则都写在一个或几个单独的文件中，这种做法有许多优点。HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。一个外链式的CSS文件，见如下:

h1 {
    font-weight:bold;
}

注意: 在外链的CSS中没有<style>标签。

你可以使用<link>标签来把一个CSS链接到HTML文档中:

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

或者在<style>中使用一个@import标签 :

<style type="text/css">
@import url（"styles.css"）;
</style>

直线式

通过使用style属性,你可以直接的在HTML中应用CSS:

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

这种情况，应尽量的避免，因为他把结构和表现混在一起了。

内嵌式

内嵌式CSS是写在<style>标签中，也是写在文档的<head>中:

<style type="text/css">
h1 {
    font-weight:bold;
}
</style>

这种情况也应该尽量避免，最好还是把HTML和CSS用单独的文件存放。

相关文章:

• At-Rules

  关于CSS导入和media类型的说明。

CSS的语法

一条CSS的规则是由一个选择器和一个或多个声明组成。选择器决定了CSS规则可作用于文档中的哪个或哪些元素。一个属性和一个值组成了一个声明，声明要用大括号（{}）括起来，并且每个声明要用分号（；）结束。

一个简单的CSS规则如下:

p {
    color:#0f0;
    font-weight:bold;
}

这个例子中, p就是选择器,表示这条规则将作用于文档中的所有被<p>包围的内容。这个规则中，有两条声明，它们共同作用，使<p>中的内容所有字体为绿色并且加粗。

想了解更详细的CSS规则，可以参阅 CSS Beginner’s Guide, CSS from the Ground Up或者一个CSS手册。

相关文章:

• CSS Crib Sheet

  一个实用CSS技巧列表。

• Writing Efficient CSS

  John Gallant和Holly Bergevin告诉您如何书写紧凑的CSS。

• Selectutorial - CSS selectors

  一篇很好的介绍不同的CSS选择器及其是如何起作用的文章。

多余的元素和类

当我们刚开始学CSS时，很容犯一些错误：使用不必要的XHTML元素、多余的类和额外的<div>。并不是说这些代码是不规范的，而是它与一些原则（如结构与表现相分离，使用简单的整洁的标记）相矛盾。

下面是一个使用不必要XHTML元素的例子:

<h3><em>Headline</em></h3>

如果你想使标题行变成斜体，可以使用CSS来重新定义<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中的元素，你可以在CSS代码中使用相关的的选择器，例如:

div#main p {
    /* rules */
}

多数情况下，CSS允许你把想要的样式来定义XHTML，而不用增加额外的的标记。但是有的时候，增加一些额外的代码也是必要的。

CSS小窍门

很明显，一旦你去很认真的学习使用CSS，你一定会发现某些问题，这些问题可能是由误解造成的，可能是由对规则的不了解或者浏览器的漏洞造成的。 CSS Crib Sheet就是一个好建议的荟萃，有Dave Shea整理，下面还将有一些重要的而且是Dave没有提及的小窍门。

• 先校验: 在调试的时候，先由校验开始吧，HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。

• 先在最先进的浏览器中调试，然后才轮到其他的浏览器: 如果你刚开始就用对CSS支持不好的浏览器调试，那么你所编的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试，一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准兼容性的浏览器中运行，然后再把代码拿到老一点的浏览器中去测试。

• 理解CSS的盒模型: 为了获得一个元素的实际的宽度和高度，你需要用padding和border来增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

  假设你有如下的CSS代码:

  div.box {
      width:300px;
      padding:20px;
      border:10px solid;
  }

  所以这个div的总宽度是360px。

  10px + 20px + 300px + 20px + 10px = 360px

  在Internet Explorer 5.*/Win中，实际上总宽度为300px, 内容的宽度为240px。

  300px - 10px - 20px - 20px - 10px = 240px

  为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值，或者你尽量避免在同一个元素中同时定义width和 padding或者width和border。

  想了解关于CSS盒模型的更详细内容，请参阅 Box model。

• 为非零的数值加上单位: CSS要求一些属性值（如width、height、font-size）必须要有单位。当属性值为0时是可以例外的。在那种情况下，没有单位也是必须的，因为0就是0，什么单位也都无所谓了。

• 理解漂浮物: 尽管漂浮物这个概念很难理解，但是它很重要，因为CSS中会频繁的使用它来布局。有一些关于漂浮物的好文章，如Containing Floats、Floatutorial和Float: The Theory。

• “LoVe/HAte”: 按照如下顺序为链接定义伪类：Link, Visited, Hover, Active。

• “TRouBLed”: 当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。

• 以其功能给CLASS和ID命名，而不是它的表现: 如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本，使其为大号、红色，那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构，如.copyright和.important。

• CSS是个敏感的东西: 当HTML属性中的class和id与CSS一起使用时，那可就要小心了。 （参见CSS2 syntax and basic data types）。

• 检查你的ID: 文档中一个元素只能使用一个id，且id必须唯一，而class可以被多个元素所共享。

• 使用合法的字符为 class 和 id命名: Class 和 id 的名字只能由数字、字母和连字符组成，数字和连字符是不可以开头的。（参见 CSS2 syntax and basic data types）.

• 正确的注释: CSS的注释是以/*开头，以*/结尾的:

  /* This is a comment */

CSS布局

有很多例子和阶梯教程指导您如何使用CSS布局。建议您从简单的例子开始，学习它的原理，然后再去学习复杂的布局。

相关文章:

• Simple 2 column CSS layout

  一个例子，介绍如何创建有头部和尾部的双栏布局。

• CSS Layouts

  不同CSS布局展示。

7. 可访问性

可访问性并不是单单针对残疾人，尽管这是这是一个创建具有可访问性站点的一个主要原因。一个具有亲和力的站点对任何人来说，显示效果都同样出色，无论他是不是残疾人。它可以被更多使用不同浏览器或浏览设备的人所访问。

有一种对可访问性站点的常见误解，认为它与众不同，或者不如那些不具有可访问性的站点具有视觉吸引力。

这有一个例子将告诉您可访问性是如何给每一个人造福的：一个网站有一个表单，用它来进行注册参加一个研讨会，表单中，你可以选择去参加三个城市中的一个城市的研讨会。每一个城市名字旁边都有一个单选按扭。如果表单的创建者没有可访问性的意识，那么使用图像浏览器的人就不得不把鼠标放到很小的单选按扭上，然后点击它来选择城市。如果开发者了解可访问性，并且在每个按扭旁边用<label>标记说明，那么您就可以点击城市的名字来选择地点了。那么，您认为哪种方法使表单使用更简便呢？

使用语义化、结构化的XHTML将使你走向可访问性站点之路。要对可访问性的文档有一个基础的概念，尝试使用一个文字化的浏览器（如：Lynx看看内容是否依然起作用。虽然这离通过可访问性的校验（这是你必须去做的）还差很远，但是这是一个好的开始。

框架

许多网页设计师喜欢使用框架把浏览窗口分割成几个独立的部分，每部分都是由独立的HTML文档组成，这样做对某些程序（比如一个区域网的应用程序）可能很好，但是在公众网上，使用框架将存在许多缺点:

• 你会令浏览者迷惑。 做网页的一个基本原则是每一个页面用一个唯一的URL表示。打破这个原则，你将使浏览者很难明了网站的结构。
• 框架带来了搜索引擎的问题。 一个搜索引擎要把一个框架编入索引中，你就必须提供指向所有页面的链接。从搜索引擎搜到你网站的浏览者也会遇到一些问题，他们很可能访问的是缺少了某些重要信息（导航链接）的文档。一些框架结构的网站试图通过robots.txt诉搜索引擎不要把次级页面编到索引中，以此来解决上面的问题。其他的一些网站则用javascript把通过搜索引擎过来的访问者送到首页。如果你的目标就是获得少量的浏览者，这两种方法都是可行的。
• 框架破坏了书签。 大多数浏览器不能在一个框架网站的页面上使用书签。当你打开书签后，你将打开的是框架设置的默认地址，往往去的都是这个网站的首页。
• 打印变得愈加的困难。 许多浏览者在打印文档的时候，同样会遇到问题。大多数的浏览器都会要求你解开这个框架，否则不能打印。
• 通过E-mail传送链接变得更加的困难。 框架很有效的消除了往一个网站中的页面发送链接的可能性。本质没有变，只是提高了网站的复杂性。
• 使网站具有可访问性变得更加的困难。 这会让那些不使用图形化浏览器（它支持框架）的人遇到问题的。也正因为此，可访问性准则不建议大家使用框架。

此外，你这是在给自己找麻烦。框架将使一个网站在技术上更复杂。

表格

把“不要使用表格布局”解释成“不要使用表格”对一些人来说没什么区别。这个并不是如何去解释的问题。如果你想标记一个列表数据，理所当然应该使用表格，这才是表格应当起的作用。然而，有一点很重要：当你建立数据表格时，有许多方法可使他们更具有逻辑性和可访问性。

相关文章:

• Accessible table

  告诉你如何建立具有可访问性的表格。

• Tables for Tabular Data

  如何为列表数据建立表格。

表单

表单通常是没必要去使用的，而且使用起来很困难，部分的原因是因为他们是用不合逻辑的方法建立的，部分是因为基本的HTML代码并没有使用标签（标签可以使表单更具有可访问性，更容易使用）。一些相关的标签（如<label>、<fieldset>和<legend>）是存在的，而且是应该被使用的。

一个普遍的问题是用什么给表单布局。一些人说，可以把一个表单看作一个列表数据，可以用表格来构造，然而还有一些人提议用CSS来布局。两种方法都是可用的，但是如果你用的是表格，请确保这个表格是有意义的，而且要保证当一个包含表单的表格被线性后是可用的。

相关文章:

• Creating Accessible Forms

  WebAIM上的一篇关于可访问性的表单文章。

• Better Accessible Forms

  一篇文章介绍了创建更好更具有可访问性表单的基础知识。

JavaScript 和 cookies

不要依靠JavaScript。许多人（包括你自己）可能都会认为如果把JavaScript从他们的浏览器中移除，就可以更加安全或者可以避免弹出窗口。他们也可能正在使用的浏览器压根就不支持JavaScript。根据TheCounter.com的调查，6%的Web用户不使用JavaScript, 而根据W3Schools.com的调查，这个百分比为8%。

大多数情况，使用JavaScript的地方，对访问者都没什么好处。当然有一些例子显示Javascript能够给访问者提供更好的体验。一个例子就是校验表单的输入。

值得注意的是这并不是说您不应该使用JavaScript。而是说你不应该创建一个依靠JavaScript运行的网站。

同样的事也适用于cookies。如果浏览者不接受他们的网站就拒绝运行，那么你的cookie就使用错了。

8. URLs（页面地址）

这部分跟Web标准和可访问性无关，但是把它放在这是因为一个URL的创建方式将对搜索引擎如何把站点编入索引以及它对访问者的可用程度都有很大的影响。

一些搜索引擎机器人不能跟踪以字符串结尾的地址。这种地址通常出现在一些把内容动态的存在数据库的网站里，看起来就像下面这样:

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

最简单的创建对搜索引擎机器人和人们都有易的URL的方法是改变它看起来的样子，使URL看起来就像直接的某个目录，上面的URL应该改变成:

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

Web服务器将会解释新的URL，并在内部把它转换成原始的URL，最终以字符串结束。这部分的结尾是一些站点的网址，上面将会有更多的相关信息。

一个更好的改变URL的方法（多少有一些麻烦）是彻底的把看到的URLS改写成人们易读的方式:

http://yourdomain.com/products/flowers/tulips/

这种URLs的好处是搜索引擎机器人将把你的站点更好的收入到索引中，对于大家来说，它的可读性也更强，并使你避免了泄漏你所使用的服务器方技术。因为在URLS中，并没有显示服务器专有文件的扩展名，如 .asp、.cf、.cgi 和 .jsp,这会使你更容易的更改服务器器方的技术，所以这种URLs显得十分的必要。

如果你选择使用包含字符串的URLs，把&编译成HTML的实体&是很重要的。如果你不这么做，一些浏览器会替你完成这个工作，好象这是他们应该做的。当他们碰到&，就把它看作一个实体的开始。如果紧接着&后的文本符合HTML中的一个实体，浏览器就会转变这个URL，大多数情况，这将会破坏URL中的字符串。

还有一件事值得一提，对于大多数站点，使用www这个次级域名是不必要的。应该用http://yourdomain.com/来代替http://www.yourdomain.com/。更多的内容请参阅no-www.org。无论你使不使用www，配置你的服务器地址，使其指向http://www.yourdomain.com/， http://yourdomain.com/也是同样的道理。

相关文章:

• Generating Simple URLs for Search Engines

  阐述了各种URLs将产生的问题，以及如何使你的URLs更加的出色。

• Slash Forward （Some URLs are Better Than Others）

  URLs为什么应该以反斜杠结束，这样的好处是什么？

• Friendly Lasting URLs

  一些关于URLs的文章和教程

• Ampersands and validation

  一个详尽的解释，针对没有对&编码所产生的问

  分享到：
  将SQL Server中所有表的列信息显示出来 | 一个震惊日本的广告:中国人,奇强!!!
  • 2005-05-26 11:54
  • 浏览 759
  • 评论(0)
  • 查看更多