Web页工具 - 使用Firefox扩展验证HTML内容

使用Firefox扩展验证HTML内容

　　当前的浏览器都能很好地实现W3C DOM标准。只要创建的内容能遵循标准HTML或XHTML，就几乎能得到所有浏览器的支持。

　　不过通常说起来简单，做起来就不那么容易了。不同于C++或Java这样的编译语言，HTML没有编译器可以将人可读的代码翻译为机器可读的二进制代码，要由Web浏览器将人可读的HTML或XHTML代码解释成DOM的内部表示，并适当地将这个内容展现在屏幕上。

　　20世纪90年代末，浏览器之争使得浏览器开发商（如Microsoft和Netscape）纷纷增加了一些专用的HTML标记，以扩大自己的市场份额。出于这个原因，再加上HTML没有严格的编译器，这就导致了大量非标准Web页面的出现。当前的浏览器尽管支持最新的W3C标准，不过也会尽可能地“通融”写得不好的HTML页面。根据HTML页面的doctype（如果有的话），大多数浏览器都有两种呈现模式：strict（严格）和quirks（怪异）。当doctype指示Web页面应遵循某个W3C推荐规约（如HTML 4.1或XHTML 1.0）编写时，Web浏览器就会使用strict模式；当没有doctype，或者页面与指定的doctype有很多冲突时，Web浏览器就使用quirks模式。

　　作为一名开发人员，应当尽力创建遵循某种W3C标准的页面。这么做不仅使你的Web页面在所有现代Web浏览器上可访问，而且由于浏览器可以根据HTML代码创建准确的DOM表示，这也能让你的日子更好过。如果页面写得不好，浏览器可能无法创建DOM的准确表示，就会使用quirks模式来呈现页面。DOM表示不正确，就很难通过JavaScript来访问和修改，特别是无法以跨浏览器的方式来访问。

　　由于HTML没有严格的编译器，怎么确保你写的HTML代码遵循W3C标准呢？幸运的是，Firefox Web浏览器已经有几个扩展，可以很容易地验证你的Web页面。

　　5.2.1　HTML Validator

　　HTML Validator[1]是一个Firefox扩展，它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础，Tidy最初是W3C为验证HTML代码开发的一个工具。HTML Validator把Tidy工具嵌入在Firefox中，这样就能在浏览器中验证页面的源代码，而不必把代码发给第三方进行验证。

　　Tidy会查找HTML错误，并把这些错误归为3类：

　　l　　错误（error）：Tidy无法修正或理解的问题。

　　l　　警告（warning）：Tidy可以自动修正的错误。

　　l　　可访问性警告（accessibility warning）：这些HTML警告对应W3C Web可访问性计划（Web Accessibility Initiative，WAI）定义的3个优先级。

HTML Validator在浏览器的右下角显示页面的状态以及错误个数，从而能在开发周期中提供很快的反馈（见图5-2）。

　　如果选择View→Page Source菜单项查看Web页面的源代码，HTML Validator还能提供更多的帮助。Firefox的view-source（查看源代码）窗口会正常打开，不过还将启用HTML Validator，这个窗口中包括两个新的窗格（见图5-3）。HTML Errors and Warnings（HTML错误和警告）窗格列出在页面中找到的所有错误。点击列表中的任何错误项，源代码主窗口就会显示HTML源代码中有问题的代码行。Help（帮助）窗格详细描述了这个问题，并提供一些修正这个问题的建议。

　　Firefox的view-source窗口的底部包括一个Clean up the Page（清理页面）按钮。点击这个按钮后将打开一个窗口，这个窗口中显示的内容能进一步帮助你修正页面上的错误（见图5-4）。Clean up the Page窗口打开后，窗口的最上面有4个标签：Cleaned Html（清理后的HTML）、Original Html（原来的HTML）、Cleaned Browser（清理后的浏览器）和Original Browser（原来的浏览器）。

　　图5-3　当查看页面的源代码时，HTML Validator会列出HTML源代码中的错误，并提出修正问题的建议

　　图5-4　HTML Validator 的Cleanup the Page对话框给出了新的源代码，这个源代码已经修正了在原来的源HTML代码中发现的错误

　　Cleaned Html标签对Web开发人员最有用。这个标签列出了通过HTML Validator进行修正后的页面源代码。HTML Validator会尽其所能自动修正页面上的所有错误，修正后的输出就列在这个标签下。Original Html标签列出了页面原来的源代码，也就是在HTML Validator处理之前的形式。

　　有时，修正页面上的HTML错误可能会改变浏览器呈现页面的方式，这可能是我们需要的，也可能不是我们希望的。Cleaned Browser标签显示了使用HTML Validator提供的已修正源代码后，页面会是什么样子，而Original Browser标签则显示使用原来的源代码时相应的页面。

　　总之，HTML Validator是一个强大的工具，可以帮助你清理HTML，使之遵循W3C标准和推荐规约。遗憾的是，HTML Validator只能在Windows平台上使用。好在，还有另一个与HTML Validator有类似功能的Firefox扩展，而且在所有平台上都可以使用。

　　5.2.2　Checky

　　Checky[2]是另一个Firefox扩展，可以帮助开发人员编写更好的HTML页面。HTML Validator在本地验证源代码，与此不同，Checky则把页面源代码发送给不同的第三方网站来完成HTML验证。

　　在Firefox中，右键点击任何页面，并选择Checky菜单项（见图5-5）就可以访问Checky。Checky菜单项包含多个子菜单项，分别完成不同的任务。HTML/XHTML菜单项列出了可以提供HTML验证服务的多个网站，点击此列表中的任何网站就会在Firefox中打开一个新的标签，该标签指向这个验证网站。Checky自动地填入进行验证的页面地址，并开始验证过程。

　　图5-5　可以在Firefox中通过上下文菜单来访问Checky

　　如图5-6所示，要验证的代码必须能够在因特网上公开得到，这样验证网站才能访问到其HTML。

　　图5-6　通过Checky访问，使用W3C的在线验证器得到的HTML验证结果

　　通过Checky还可以访问其他网站，这些网站不仅限于验证HTML。Links（链接）菜单会列出能验证页面上所有链接的网站，以确保所有链接连接的URL都确实存在。CSS菜单列出的网站能验证页面上使用的所有CSS文件，以确保这些CSS文件遵循标准CSS规则。

　　你应当花点时间来测试Checky提供的验证网站。通过使用这些验证工具，可以使你的代码更能与标准兼容，而且可以减少手工跟踪问题花费的时间。