XiaoZhu.com: 制作符合W3C规范的网页(第一部分)

制作符合W3C规范的网页

2004年9月11日

Version 1.00

Author: piggybank

Mail: play@xiaozhu.com

HomePage: http://www.xiaozhu.com

CopyLeft: 非商业用途转载请保证文章完整性并注明出处，否则请与我联系，谢谢。

出处：http://blog.xiaozhu.com/play/category/77.aspx

---

本文的内容将涉及到W3C万维网联盟的HTML4.01以及XHTML1.0两个标准。阅读本文需要具备HTML基本知识。本文将为如何简单快速地让你的网页符合HTML4.01/XHTML1.0标准提供基本的信息。具体的例子可以参考http://www.xiaozhu.com（右下角的三个图标）。

本文结构如下：

1、 前言

2、 验证你的网页

3、 修正现有的网页

4、 同时兼容HTML4.01/XHTML1.0

5、 相关编辑工具

6、 后话

本文并不想讨论HTML4.01/XHTML1.0等等的具体细节，只关心如何很快就能实现我们的目标——通过W3C验证器的验证。

有关HTML4.01详细内容可以查阅 W3C 官方文档：http://www.w3.org/TR/html401/

有关XHTML1.0详细内容可以查阅 W3C 官方文档：http://www.w3.org/TR/xhtml1/  

在实际的认证过程中，简单兼容 HTML4.01/XHTML1.0 并没有那么复杂。只要编写HTML代码的时候遵循本文第三节介绍的基本原则，绝大部分网页都能符合HTML4.01/XHTML1.0标准。并且在第四节，本文将就HTML4.01与XHTML1.0之间小小的矛盾的解决方法做一些讨论。配合本文后面第五节介绍的相关工具软件，将大量的HTML转换成符合标准的HTML4.01/XHTML并不是一件难事。

前言

从HTML诞生至今，在协议不断发展的过程中，各大浏览器产商为了“鼓励”人们制作网页，从而“纵容”了人们各种各样的不良习惯。同时，它们为了占据“标准制订”的制高点，也不遗余力地发展出各种特性加入到HTML和相关的技术里。于是，有了现在乱糟糟的局面：各种各样语法错误的HTML都能够得到各种浏览器的很好的“支持”。而这样的局面如果任其发展下去，我们的WWW万维网今后就会一团糟。

百花齐放不好么？这将是信息交换的一个很大的障碍——试想，互联网的出现以及我们使用互联网是为了什么？好在，越来越多的人都意识到了这个问题，并试图纠正它。

W3C，万维网联盟，一个负责制订并维护着我们所熟悉的万维网的诸多标准和协议的组织（你可以通过 http://www.w3c.org 或者 http://www.w3.org 来访问它）在1999年12月24日在先前发布的HTML4.0版本的基础上修正发布了HTML4.01并将之作为建议标准。2000年1月26日在HTML4.01的基础上发布了其XML版本XHTML1.0，并将之作为建议标准（之后发布的XHTML1.1作为候选建议标准）。

（附注：除此之外，W3C还作了些什么？可以从这里看到：http://www.w3c.org/TR/ ）

何谓“建议标准”？

假如强制要求各浏览器仅支持HTML4.01/XHTML1.0，则会有大量的（数不清）网页将无法被正确浏览。所以，发布它们时仅仅是作为“建议标准”——也就是说并不要求浏览器软件强制执行的标准。但，如果一个标准——哪怕是“建议标准”得不到支持，那么制订它又有什么意义呢？

于是，让我们试着来制作符合建议标准的网页吧——真的一点儿也不难。下一步，让我们先来验证一下现有的网页。

验证你的网页

既然有规范，就要对目标是否符合规范进行检验。好在作为标准制订者的W3C同时给我们提供了在线验证服务。此外，也可以借助一些其它的软件来验证我们的网页是否符合相关标准。

使用W3C验证器

在浏览器输入 http://validator.w3.org/ 将会出现图1所示的页面：

图1

W3C验证器可以通过输入一个网页的地址或者上传一个HTML文件的方式来进行验证。显然，前者比较方便。

验证器的基本用法

让我们在第一个输入框里分别输入 http://www.w3china.org、http://www.w3c.org 和 http://www.xiaozhu.com 试试看，验证结果分别为图2、图3、图4。

图2

图3

图4

在图2中可以看到http://www.w3china.org（名为：中国W3C标准研究组织，不清楚与W3C什么关系）的网页并没有通过验证。而事实上，验证器根本没能正确地识别出该网页的文档类型 DocType。（附注：在第三节将会介绍DocType）

在图3中可以看到 http://www.w3c.org 通过了 XHTML1.0 Strict 验证。

在图4中可以看到 http://www.xiaozhu.com 也就是本人的网页通过了 HTML4.01 Transitional 验证。（附注：有关 Strict 和 Transitional 的区别将在下一节中介绍）

其中，我们注意一下标有数字的部分：

1、            W3C建议在通过了验证的网页上放置所通过的标准的图标，以告知浏览者（包括一些特别的软件）该网页具备的可交换能力——符合的标准。浏览者可以通过点击该图标方便地检验该网页；

2、            Extended Interface：在这里可以进一步设置验证器的其它设置，比如设置检验所采用的标准、网页编码等等；

3、            通过了验证，就可以将这一段代码引用到你的网页中了。

验证器的高级用法

下面我们来看看验证器的更多功能。在图4中点击数字2所指示的“Extended Interface”，或者在浏览器输入：http://validator.w3.org/detailed.html，我们将看到如图5所示内容：

图5

输入要验证的网页的地址，随后根据需要选择1、编码类型；2、需要验证的标准（文档类型）。如果不确定，也可以让验证器自动识别。然后点击：Validate this page

在这里，我们可以选择Doctype来验证一下 http://www.xiaozhu.com/

图6

图7

当我们调整了验证器的参数，对http://www.xiaozhu.com强制采用XHTML1.0标准来进行验证，结果如图7，显然并不理想 ^oo^

由此可知http://www.xiaozhu.com 符合HTML4.01标准，却不符合XHTML1.0标准。前面已经介绍过：XHTML1.0是HTML4.01的XML体现方式。显然它们之间存在的差异主要来自于XML于HTML的不同。但这并不是问题，在下面一节中将介绍一些简单的要点让你的Web快速通过HTML4.01和XHTML1.0验证，很快获得在Web中放入W3C认证图标的资格。在本文的最后将讨论如何“同时”兼容这两个标准，届时就可以像XiaoZhu.com那样把HTML4.01/XHTML1.0的两个验证图标都放在Web上了。