14.4 验证代码
对于前面提到的常见错误，发现它们的一个重要方法就是使用验证器。HTML验证器可以对代码和语言规则进行比较，并将其发现的不一致的情况显示为错误或警告。它还可以提示语法错误，无效的元素、属性和属性值，以及错误的元素嵌套。但是HTML验证器并不能判断出语义上的问题，所以有关语义方面还是需要自己判断。CSS验证器的工作原理和HTML验证器的工作原理一致。
下面首先介绍如何使用HTML验证器。
1.安装Firebug
Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和AJAX的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果担心它占用太多系统资源，也可以方便地关闭这个插件，甚至针对特定的站点开启这个插件。
首先进入下载网址https：//addons.mozilla.org/zh-CN/firefox/search？q＝firebug＆cat＝all（确保之前已经安装了最新版的Firefox浏览器），然后单击“添加到Firefox”按钮。出现图14-1所示的对话框。
图14-1 安装Firebug
安装完成后，需要重新启动Firefox浏览器。
在安装好插件之后，在Firefox浏览器的“查看”菜单栏下将会出现“Firebug”菜单项，也可使用快捷键F12唤出Firebug插件。
Firebug界面如图14-2所示。
Firebug包含7个标签：控制台、HTML、CSS、脚本，DOM、网络、Cookies。
（1）“控制台”标签：用来显示各种日志信息，同时可以结合Firebug给定的API进行各种测试和跟踪。
（2）“HTML”标签：可以用来视察，编辑网页中的各种HTML元素。
（3）“CSS”标签：可以用来检查网页中和CSS有关的内容。
（4）“脚本”标签：可以设置断点调试JavaScript代码，也可以用来监控JavaScript代码。
（5）“DOM”标签：展示DOM树。
（6）“网络”标签：可以观察从服务器端下载的js文件、图片、Flash等资源的大小，下载所花费的时间等，这也是一个非常有用的功能。
图14-2 Firebug界面
（7）“Cookies”标签：用来调整和修改Cookies。
2.HTML代码验证
使用HTML验证器可以在浏览器解析文档结构之后对结构进行检查，将它与预期的元素嵌套进行比较，可以帮助快速定位标签格式不正确、元素为闭合或者过早闭合等错误。
“HTML”标签是Firebug中的第二个标签。它分两个视图：左边的视图可以查看HTML代码，右边的视图又分为4个子面板——样式、计算出的样式、布局和DOM。灵活运用“HTML”标签中的各种功能，很容易了解一个特定网页的组织结构，包括它的CSS文件，js文件，图片等。
“代码视图”面板位于“HTML”标签的左边，它以层次结构展示HTML代码，不同的关键字标以不同的颜色，相当人性化，而且还允许人们随意将元素进行折叠或展开，这样就很容易使人们快速掌握一个Web页面的大致结构。“代码视图”面板还有一个相当不错的功能，就是可以对即时打开的Web页面中的各种元素进行删除、增加、属性修改等操作，操作后的效果立即在浏览器上展现出来，如图14-3所示。
图14-3 “HTML”标签
在Firebug中审查段落时，Firefox在遇到有错的代码时会将HTML按照语法理解成其他代码，如下面的代码所示：
上面代码中的中＜h1＞和＜p＞嵌套不对，Firefox将它理解成：
Firefox浏览器在解析HTML时，会试着修复错误，并在显示页面时改变文档的底层结构。
3.CSS代码验证
Firebug的CSS验证器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。可以在CSS查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个像素。这时候用CSS调试工具可以轻易地编辑它的位置——可以根据需要随意挪动像素。
如果总记不住常用的样式表有哪些值，可以尝试在CSS验证器中选中一个样式表属性，然后用上、下方向键来改变它的值，它会把可能的值逐个遍历显示，如图14-4所示。
图14-4 CSS验证器
使用Firebug对代码“＜p＞background属性设置背景色，color属性设置字体颜色，即前景色。＜/p＞”进行审查，应用于该元素的CSS显示在右侧。color设置有两个，一个是p元素中的设置，一个是body元素中的设置，其中body元素中的设置被覆盖了。可以跟踪查找样式没有按照预期进行的原因，也可以在CSS中对样式进行编辑，以达到预期的效果，如图14-5所示。
将页面放到公共网站上之前，不需要确认它们已通过验证器的检查。实际上，大多数网站都有一些错误。浏览器可以处理很多类型的错误，从而以它们能实现的最佳方式将页面显示出来。所以即使页面在验证时有错误也可能看不出来。不过，有时错误会直接影响页面的显示，这时就应该使用验证器尽可能排除代码中的错误。下面介绍验证代码的步骤。
4.验证代码
验证代码的步骤如下：
（1）使用http：//html5.validator.nu或http：//validator.w3.org对HTML进行检查。
在http：//html5.validator.nu中，将需要检查的URL粘贴到Address字段（如果没有发布到网络中，就选择“File Upload”选项。也可以选择“Text Field”选项，直接手动输入代码），选择“Show Source”选项，这样HTML源代码就会出现在验证器找到的错误的下方，有错误的HTML片段会突出显示，如图14-6所示。
图14-5 CSS代码错误
图14-6 HTML代码验证
输入上一实例中的错误代码，验证中在第10行发现了错误。
也可以使用http：//validator.w3.org对代码进行验证，W3C的错误消息更易读懂，但不会对HTML源代码的错误部分进行突出显示。
（2）修复标出来的HTML错误，保存修改，再将文件上传到服务器，重复步骤（1）中的操作。