20.5　验证代码

发现页面上的错误(如图20.5.1所示)的一种重要方法就是使用验证器，如图20.5.2所示。HTML验证器可以对代码和语言规则进行比较，并将其发现的不一致的情况显示为错误或警告。它还可以提示语法错误，无效的元素、属性和值，以及错误的元素嵌套（如图20.5.3所示）。它无法判断内容是不是由最能描述它的元素进行标记的，因此编写语义化的HTML还得靠你自己（参见1.2节）。CSS验证器的工作原理也是类似的。

图20.5.1　图像右边的文字本不该这么大。我已经检查了CSS，问题不是出于设置了很大的font-size值。问题出在哪儿呢

将页面放到万维网上之前，不需要确保它们通过验证器的检查，完全没有错误。实际上，大多数网站都有一些错误。而且，W3C的CSS验证器会将用于属性名称的厂商前缀标记为错误，但这并不意味着你应该将这些厂商前缀从样式表中移除（关于厂商前缀，参见第14章）。

浏览器可以处理很多类型的错误（同时忽略一些其他的错误），从而以它们能实现的最佳方式将页面呈现出来。因此，即便页面在验证时有错误，也可能看不出来。不过，有时错误会直接影响页面的显示（如图20.5.1所示）或行为。因此，应该使用验证器尽可能地排除代码中的错误。

验证器能找到的错误的示例参见20.3节和20.4节。

验证代码的步骤

• 首先使用http://html5.validator.nu(参见图20.5.2和图20.5.3)或W3C的http://validator.w3.org对HTML进行检查。更多信息参见头两条提示。

图20.5.2　将需要检查的URL粘贴到Address（地址）字段。选择Show Source（显示源代码）选项（在默认情况下是未选中的），这样HTML源代码就会出现在验证器找到的错误的下方，有错误的HTML片段会突出显示

图20.5.3　在第9行发现错误，原因是没有使用结束标记，错误地加上了另一个

• 修复标出来的HTML错误，保存修改。需要的话，将文件再次上传到服务器，再重复第1步。

• 可以使用http://jigsaw.w3.org/css-validator/检查CSS错误。如果样式表包含CSS3特性，一定要在Profile（配置）下拉菜单中选择“CSS level 3”（CSS版本3），如图20.5.4所示。否则，验证器会标示出比实际多的错误。

图20.5.4　在默认情况下，验证器选择的配置为“CSS level 2.1”（CSS版本2.1）。如果样式表中包含CSS3，则应选择“CSS level 3”。否则，验证器会显示更多的错误，因为CSS 2.1不包含CSS3的许多特性

提示　W3C的验证器（http://validator.w3.org/）使用的是http://html5.validator.nu/提供的验证引擎，因此使用这两种都可以。W3C的错误消息更易读，但不会对HTML源代码的错误部分突出显示。

提示　可以通过输入URL（参见图20.5.1）、上传HTML文件以及将HTML粘贴到验证器三种方式对HTML进行验证。如果使用上传或复制粘贴的方式，不必将文件上传到服务器就可以进行检查了。

提示　一个HTML错误可能导致多个验证器报错结果。例如，缺少一个结束标记会导致多条错误消息（参见图20.5.3）。如果修复了这个结束标记的问题，所有这些后续错误就都不存在了。因此，应该按照从上往下的顺序，一次修复少量错误后就立刻再次验证，看看其他的问题是否也已解决。

提示　HTML5对代码的格式要求是很宽松的。例如，它并不关心像img这样的空元素的结束方式，因此和都是有效的。验证器无法判断代码在这些方面是不是一致的。如果你想确保代码的一致性，可以将HTML页面提交到HTML Lint（http://lint.brihten.com/html/）。它可以检查空元素是否结束，开始标记和结束标记是否为小写字母，属性是否为小写字母，等等。