别再纠结了！尽管把你的烦恼交给我们吧，我们会将问题转化为一整套解决方案提供给你！方案的前期咨询根本不需你花一分钱。还不马上咨询？
或许一套通用软件就能让你从烦恼中解脱出来，那就先到我们的软件产品仓库中选一款吧！我们还可以为你提供现有软件的扩展定制，即客户化定制。
购买软件与汉堡包不同，软件产品和软件实施相结合才能发挥作用！没有良好的软件实施，必败！而采用我们的方案或产品，免费获得软件实施支持。
坚持用心建站！ 您只需告知所需要到达的终点，我们将带你一起穿越网站策划、平面设计、页面制作、程序开发和后期维护，享受全程的贴心服务。
何必专门招人负责网站维护呢？你可能反驳招人能兼干其他工作，但是这样就不够专注。而我们提供的网站后期维护更专业，更专注，更划算。24. 检验你的 HTML
- 详细资料
- 发布于 2012年9月18日
- 点击数：5203
序言
你应该已经编写了几个 HTML 网页，它们在浏览器中显示出来的样子也还不错，不过其中的代码可能并不完全正确。要着手查找错误之处，并确保这些网页（以及所有你将来要编写的网页）能跨浏览器正常显示，而且没有任何差错，最好的方法是什么？
答案就是代码检验！在万维网联盟（W3C）及其它一些地方有很多可用的工具，这些工具可以让你对自己网站的代码进行检验。最常用的三种检验工具是：
- W3C 标记检验器：这个标记检验器会首先查看你提交给它进行检查的文档所使用的 （X）HTML 文档类型，然后检查整个文档，并指出文档中哪些地方不符合该文件类型（比如 HTML 中存在错误的地方）。
- W3C 链接检测器：这个链接检测器会仔细地检查你所提交给它的整个文档，并测试文档内的所有链接，以确定不存在死链接（比如 href 属性的值指向的是不存在的资源）。
- W3C CSS 检验器：你可能已经猜到了，这个 CSS 检验器将遍历整份 CSS（或 HTML/CSS）文档，并检查其中的 CSS 是否正确地遵守了 CSS 规范。
在本篇文章中，我只会介绍上述的第一个检验器，即 W3C 标记检验器，内容包括如何使用这个标记检验器，以及如何分析该检验器提交给你的几种具有代表性的检验结果。链接检测器的工作原理和结果是显而易见的，而在阅读了本篇文章和本系列教程中后面的 CSS 专题文章后，CSS 检验器的原理和结果也就不言自明了。
本文的结构如下：
错误
在计算机编程中，一般来说代码的问题包括两大类：
- 语法错误——语法错误是指那些会导致计算机无法正确地执行或编译程序的代码书写错误。
- 编程（或逻辑） 错误——这类错误是指代码没有完全反映出程序员的意图。
在多数编程语言中，第一类错误是很容易被发现的——出现此类错误时，程序会拒绝执行或编译代码，直至错误被修正为止。这样就让程序员在冥思苦想“程序为什么没有按我想象中的那样运行”时，能很容易地发现和修正这类错误。
HTML 不是编程语言。网页中存在的语法错误一般并不会导致浏览器拒绝打开网页（XHTML 在这方面要比 HTML 严格得多——至少在特意被用作 application/xhtml+xml 或 text/xml 时是如此——此外一些文档类型不允许使用某些特定类型的 HTML 元素）。但这（浏览器不会拒绝打开存在语法错误的网页）也是 HTML 得到迅速采用和推广的最主要原因之一。
第一个 Web 浏览器，WorldWideWeb （由 Tim Berners-Lee 编写）同时也是一个编辑器，可以让人们在事先没有学习过 HTML 的情况下创建网页。这个编辑器会生成无效的 HTML。虽然这是可以被修正的，但它建立起了迄今所有浏览器都遵循的一个重要先例——比起向那些不懂或者理应修正网页错误的人抱怨网页中的问题，让人们能够访问网页上的内容显得更为重要。
什么是检验?
尽管浏览器会接受使用糟糕的代码（我们称为无效代码）所编写的网页，并通过尽量猜测网页作者的意图来尽可能好地渲染网页，但检查 HTML 是否编写正确仍然是可能的，而且这是不折不扣的一个好主意，我们称之为“检验” HTML。
检验程序将网页中的 HTML 代码与相对应的文档类型的规则相比较，并告诉你这些代码是否违反了某些规则，以及在哪些地方违反了规则。
为什么要检验?
一些 Web 开发员认为，只要网页在浏览器中看起来还不错，即使其源代码没有通过检验也没关系。他们认为检验是一个理想的目标，而不是一个黑白分明的问题。
这种看法也不能说完全没有道理。HTML 规范本身尚不完善，而且现在看来也已经很过时了。一些存在争议的用法（如让一个有序列表不以“1”起始）也会被检验器认定是无效的 HTML。尽管如此，正如一句格言所说的：
先弄懂规则，才会知道该如何适切地打破成规。
你需要检验你所编写的 HTML，有两个非常有力的理由。
- 人无完人，同样也没有完美的代码——我们都会犯错，如果你清除了所有的代码错误，你所编写的网页的质量就会提高（如，更具有一致性）。
- 浏览器会变化。将来的浏览器在解析无效代码时，可能会更加严格，而不是更宽松。
检验可以作为你的预警系统，用于发现插入在页面内的缺陷，这些缺陷往往会以一种有趣而又无法判断的形式显露出来。当浏览器遇到无效 HTML 时，它不得不根据经验去猜测代码作者的意图——这时不同的浏览器就会得出不同的答案。
不同的浏览器以不同的方式解析无效 HTML
有效的 HTML 是你与浏览器制造商之间唯一的约定。HTML 规范规定了你应该如何编写 HTML，以及浏览器应该如何解析你所编写的文档。近年来，符合 Web 标准的浏览器已能实现以下这种效果：只要你编写的是有效的代码，所有的主流浏览器都会将其解析为一样的结果。不过这基本上还只是适用于 HTML 代码，而浏览器在支持其它标准时还存在着这样那样的差异。
但是如果你提交给浏览器的是一份无效代码，又会发生什么呢？答案是浏览器的错误处理程序将启动，以决定该对这段代码进行什么操作。这相当于是在说：“那么，这是一段无效的代码喽，那我们该怎样将这个网页呈现给终端用户呢？干脆就让我们这么做吧！”
听上去挺不错的，是吧？如果你编写的网页存在几个缺陷，浏览器会帮你填补缺陷？不是这样的，因为不同的浏览器的做法是不一样的。例如：
<p><strong>This text should be bold</p> <p>Should this text be bold? How does the HTML look when rendered?</p> <p><a href="#"></strong>This text should be a link</p> <p>Should this text be a link? How does the HTML look when rendered?</p>
以上这段代码存在的错误有：strong 元素被错误地嵌套在多个区块元素中，而且锚记元素未闭合。当你在不同的浏览器中渲染这段代码时，不同的浏览器解析这段代码的方式是差别很大的：
- Opera 浏览器会让后面的元素成为 bold（粗体）元素的子元素。
- Firefox 浏览器会在段落之间添加额外的 bold（粗体）元素，而这在标记中实际上是没有的。
- Internet Explorer 浏览器会将“This text should be a link”（这应是一个链接）的文本放在创建链接的锚记标签之外。
上面这个例子的原始版本出自 Hallvord Steen 的文章“同样的 DOM 错误，不同的浏览器解析结果”——你可以通过阅读这篇文章，以进一步了解 HTML 错误的处理，以及关于调试工具的一些信息。
上面这些浏览器行为都没有什么不对的；这些不同的行为都是在试图处理不正确的代码，因此都是有其道理的。你应该牢记的基本原则是：尽可能避免在页面源代码中出现无效的标记！
怪异模式
怪异模式也是你所应该了解的。如果浏览器遇到未声明文档类型或不正确地声明文档类型的网页，就会以怪异模式渲染网页。在怪异模式下，浏览器会尽量猜测应该用什么样的规则来检验代码，并尽力处理无效代码。有了这种模式，那些以老式方法编写的网页就依然能被显示，但你现在在编写网页时，一定要正确地声明文档类型，以免浏览器调用怪异模式来渲染网页。
如何检验你的网页
我们已讨论了检验 HTML 的理论知识，现在我们来谈谈比较容易的部分——实际的检验操作！把一个 URL 地址输入检验器，查看网页是否能够通过检验，这确实不难；但由于检验器所提示的错误消息有时候并不太好理解，因此要知道具体有些什么错误，该如何修正这些错误，有时就不那么容易了。下面我将讨论几个例子。
在本节中我们将考察的示例如下（你可以下载或查看该 HTML文档）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Validating your HTML</title>
</head>
<body>
<h2>The tale of Herbet Gruel</h2>
<p>Welcome to my story. I am a slight whisp of a man, slender and fragile, features wrinkled and worn, eyes sunken into their sockets like rabbits cowering in their burrows. The <em>years have not been kind to me</em>, but yet I hold no regrets, as I have overcome all that sought to ail me, and have been allowed to bide my time, making mischief as I travel to and fro, 'cross the unyielding landscape of the <a href="http://outer-rim-rocks.co.uk" colspan="3">outer rim</a>.</p>
<h3>Buster</h3>
<p>Buster is my guardian angel. Before that, he was my dog. Before that, who knows? I lost my dog many moons ago while out hunting geese in the undergrowth. A shot rang out from my rifle, and I called for Buster to collect the goose I had felled. He ran off towards where the bird had landed, but never returned. I never found his body, but I comfort myself with the thought that he did not die; rather he transcended to a higher place, and now watches over me, to ensure my well-being.
<h3>My possessions</h3>
<p>A travelling man needs very little to accompany him on the road:</p>
<ul>
<li>My hat full of memories</li>
<li>My trusty walking cane</li>
<li>A purse that did contain gold at one time</li>
<li>A diary, from the year 1874<li>
<li>An empty glasses case</li>
<li>A newspaper, for when I need to look busy</li>
</ul>
</body>
上面这个简单的网页由 3 个标题、3 个段落、1 个超链接、和 1 个无序列表构成。它使用的检验规则集是 XHTML 1.0 严格型文档类型，因此在检验代码时将依照这个规则集对其进行检验。这个文档存在一些错误，主要使用 W3C 的 HTML 检验器检验后就可以发现。
W3C HTML 检验器
正如前面所介绍的那样，W3C 提供了一个在线的 HTML 检验器——请在这个超链接上按住 ctrl 并单击鼠标右键，然后选择“在新标签中打开”这个选项——这样便于在你查看示例的时候用 tab 键在检验器网页和本篇文章所在的网页之间进行切换。
附注:在 Opera 浏览器中，在网页上按住 ctrl 并单击鼠标右键，选择“检验”选项，可直接使用 W3C 的检验器检验网页。
在检验器界面的顶部，你可以看到 3 个可用的标签：
- 通过 URI 地址进行检验: 你可以输入网上已有网页的 URL 地址，对网页进行检验
- 通过文件上传进行检验: 你可以上传 HTML 文件进行检验
- 通过直接输入进行检验: 你可以把 HTML 文档的内容粘贴到检验窗口中
不论你使用哪种方法，检验结果应该都是一样的。在我看来，要检验这个示例网页，最简单的办法是复制全部代码并粘贴到上面第三个标签所说的检验窗口中。这样你就可以得到如图 1 所示的检验结果：
图 1：示例文档的检验结果——有 17 个错误!
这听起来真让人担心，尤其是当我告诉你这个文档存在的错误不是 17 个的时候！其实用不着灰心——检验器报告的错误比实际存在的错误要多一些，这是因为页面顶部的错误通常会产生级联，这会导致检验器在页面接下来的部分报告更多的错误，因为它会认为有更多的元素看起来都没有闭合或是被不正确地嵌套。你只需了解所提示的错误消息的含义，并找出标记中明显的错误即可。在下面的表 1 中，列出了我为让这个网页通过检验所修正的错误，包括我对为什么会出现该错误的分析，以及我所做的修正。
| 错误提示消息 | 逻辑 | 所做的修正 |
|---|---|---|
| 第 8 行，第 461 列：没有 “colspan”属性 | 我们知道这一行里是有一个 colspan 属性的，并且这个属性是有效的 HTML，但检验器为什么会说这里没有 “colspan” 属性呢？等等，会不会是它被用到了一个不应使用这个属性的元素上了呢？果然，“colspan” 属性被用于 a 元素——这是错误的! |
从 a 元素中删除 colspan 属性。 |
| 第 13 行，第 7 列: 文档类型不允许在此使用 “h3” 元素；遗漏了 “object”、“applet”、“map”、“iframe”、“button”、“ins”、“del” 其中之一的起始标签。<h3>My possessions</h3> | 同样，乍看之下这个检验结果有点奇怪——明明 h3 元素是正确地闭合了呀，而且在这个语境下也是允许使用的。应该注意的是，通常这类错误提示消息意味着附近有个未闭合的元素… |
在当前行中添加一个 p 的结束标签。 |
| 第 19 行，第 40 列: 文档类型不允许在此使用 “li” 元素；遗漏了 “ul”、“ol”、“menu”、“dir” 其中之一的起始标签。<li>A diary, from the year 1874<li> | 这个错误很容易发现——从它提示的那行代码中，一眼就能看见，li元素的结束标签遗漏了（/）。 |
为 li 元素的结束标签加上（/）。 |
| 第 23 行，第 9 列：遗漏了 “html” 的结束标签，但却指定了 OMITTAG NO。</body> | 这个错误也不难发现，即 html 的结束标签被遗漏了。该错误信息说明连你忘了闭合某个标签都能找出来。 |
为 html 元素加上结束标签。 |
在修正了这些错误后，检验器会提示文档已通过检验，如图 2 所示：
图 2：一个所有错误已得到修正的成功信息。
检验 HTML 并不是很难的工作，你只需保持头脑冷静，并要记住自己在用什么文档类型来进行检验。下载或查看修正后的 HTML 文档。
总结
在读完本篇文章后，你应该就能自如地使用 W3C 的在线检验器来检验你所编写的 HTML 了。不过这还只是检验知识的冰山一角——还有很多更加复杂的检验工具可用，我在下面列出了一些。这些工具可以帮助你检验更复杂、更大型的网页。
更多检验工具
- The Opera debug menu
- General validation bookmarklet
- The Firefox web developer toolbar extension
- The IE developer toolbar
- Safari tidy
- HTML tidy
练习题
- 浏览器解析无效的 HTML 时，会发生什么？
- 浏览器解析无效的 HTML 时，为什么会产生问题？
- 通过 HTML 4 严格型文档类型检验的文档中使用 frameset 会导致错误吗？
