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

简介: 使用Firefox扩展验证HTML内容   当前的浏览器都能很好地实现W3C DOM标准。只要创建的内容能遵循标准HTML或XHTML,就几乎能得到所有浏览器的支持。   不过通常说起来简单,做起来就不那么容易了。

使用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个优先级。

Ajax基础教程(5)- 5.2 使用Firefox扩展验证HTML内容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(原来的浏览器)。

Ajax基础教程(5)- 5.2 使用Firefox扩展验证HTML内容

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

Ajax基础教程(5)- 5.2 使用Firefox扩展验证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自动地填入进行验证的页面地址,并开始验证过程。

Ajax基础教程(5)- 5.2 使用Firefox扩展验证HTML内容

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

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

Ajax基础教程(5)- 5.2 使用Firefox扩展验证HTML内容

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

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

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

目录
相关文章
|
25天前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
23天前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
9天前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
98 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
|
23天前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
20天前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
24天前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
24天前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
1月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
43 11
|
6天前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
13 0
|
1月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`<img>`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`<a>`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
42 13