《重构HTML:改善Web应用的设计(修订版)》——2.2 验证器

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介:

本节书摘来自异步社区《重构HTML:改善Web应用的设计(修订版)》一书中的第2章,第2.2节,作者: 【美】Elliotte Rusty Harold 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 验证器

即使没有人去遵守,这确实还是HTML的标准。判断网站是否遵守HTML标准的一种方法是,通过验证服务来运行页面。验证结果可以让人有所启发,为你提供修复的明确细节以及一个预估工作量的良好建议。

2.2.1 W3C标记验证服务
对于公开页面,可选的验证器是W的标记验证服务。只要输入需检查页面的URL,就可以看到结果了。图2-1是这个服务验证我博客的一个示例。


8713c359bcdcb8717071dd1b092fd1885c9315fc

看起来是我记错了blockquote元素的语法,错把cite当做source属性了。这个服务比我想象中的要好。我修正后重新检查的结果如图2-2所示,现在它是有效的了。


8cc69150a8cb49fe897eaa5ad8e39b350a233a9a

通常没有必要检查网站的每个页面,因为大部分的错误都是重复的。一般来说,一旦你确定了某种错误,就有可能找到源头并自动修正问题。比如,上面的例子我只要简单地在其他页面搜索

这个页面现在比刚开始的要更清晰了。接着我检查了一个我所能找到最古老的、很少维护的页面,它产生了144个不同的错误。

私密验证

W诚然可信,但你并不想把内部的私密网页提交到W上。实际上,处理医学、财务和其他私人数据时,这样做可能是违法的。
这种形式的验证对编写是有利的,对于网站的抽查以确定可能的工作量也很有用,即使是单一的页面。但在某种程度上,你必须检查网站的所有页面而不只是少数的几页。因此,自动化的批处理的验证器就显得很有必要了。

2.2.2 日志验证程序
W标记验证服务促使了日志验证程序(Log Validator)的诞生,它是一个用Perl写的命令行工具,用于检查整个网站。它还可以使用Web服务器的日志文件算出最流行的页面,并从这些页面开始分析。显然,与一年100次点击量的页面相比,你会更在意一个每分钟100次单击的页面。日志验证程序为你提供方便的待修复问题清单,并以页面的严重性和流行性排序。代码清单2-1显示了这样一份记录清单的开头部分。

代码清单2-1 日志验证程序的输出结果

Results for module HTMLValidator
****************************************************************
Here are the 10 most popular invalid document(s) that I could
find in the logs for www.elharo.com.

 Rank  Hits  #Error(s)                Address
------ ------ ----------- -------------------------------------
1    2738  21     http://www.elharo.com/blog/feed/atom/
2    1355  21     http://www.elharo.com/blog/feed/
3    1231  3      http://www.elharo.com/blog/
4    1127  6      http://www.elharo.com/
6    738  3      http://www.elharo.com/blog/networks
/2006/03/18/looking-for-a-router/feed/
11   530  3      http://www.elharo.com/journal
/fruitopia.html
20   340  1      http://www.elharo.com/blog
/wp-comments-post.php
23   305  3      http://www.elharo.com/blog/birding
/2006/03/15/birding-at-sd/
25   290  4      http://www.elharo.com/journal
/fasttimes.html
26   274  1      http://www.elharo.com/journal/

这份输出清单中前两个页面属于Atom feed文档而非HTML文件,因此可以置之不理。但访问量排行第3和第4的页面就棘手了,因为它们分别是我的博客主页和网站主页,因此毫无疑问需要修复问题。因为访问量排行第5的页面是有效的,所以没有在这份清单中显示出来。访问量排行第11、25和26的页面是XML前的页面,不属于XHTML。它们无效并不奇怪,但因为它们仍有点击量,所以也是需要修复的。

访问量排行第20的页面也肯定有一处错误,不过那是用于发表评论的一个脚本罢了。当验证器试图对它使用方法GET而不是POST时,它接收到的只能是一个空白页面。虽然不是一个大问题,但或许我需要给GET一个完整的评论清单来修复它。或者我更应该简单地配置这个脚本返回HTTP error 405 Method Not Allowed,而不是依赖于200 OK和一个空白文档。

之后就是那些流量不是很大的各个页面了。从顶部开始,并顺路往下开始工作吧。

2.2.3 xmllint
你也可以使用通用的XML验证器,比如xmllint,它在很多UNIX机器上都默认安装,也可以在Windows平台上使用。

使用通用的XML验证器检查HTML既有优点,也有缺点。优点是可以把良构检查与有效性检查相互分离。通常,先修复良构问题,再去修复有效性问题更容易。实际上这也是本书的组织顺序。良构比有效性更重要。

使用普通XML验证器的第一个不足是,它不会捕捉HTML特定的问题,这些问题在DTD中没有规定得特别清楚。比如,它不会注意到a元素嵌套到另一个a元素的问题(尽管在实践中这个问题不是很常见)。第二个不足是它必须实际地读取DTD,不会设想它所检查文档的任何东西。

使用xmllint检查良构是非常简单的事,只需在命令行中指出需要检查的本地文件的地址或远程文件的URL。使用--noout选项指定不打印文档自身,而使用--loaddtd则允许解析实体引用。比如:

$ xmllint --noout --loaddtd http://www.aw.com
http://www.aw-bc.com/:118: parser error : Specification mandate
value for attribute nowrap
<TD class="headerBg" bgcolor="#99" nowrap align="left">
                        ^
http://www.aw-bc.com/:118: parser error :
attributes construct error
<TD class="headerBg" bgcolor="#99" nowrap align="left">
                        ^
http://www.aw-bc.com/:118: parser error : Couldn't find end of
Start Tag TD line 118
<TD class="headerBg" bgcolor="#99" nowrap align="left">
                        ^
http://www.aw-bc.com/:120: parser error : Opening and ending
tag mismatch: IMG line 120 and A
 Benjamin Cummings" WIDTH="84" HEIGHT="64" HSPACE="0"
VSPACE="0" BORDER="0"></A>
...

在第一次运行这样的报表时,错误信息的数量往往使人气馁。千万不要认输——从头开始,逐一解决。大部分的错误都可归类为某种常见的分类中,本书稍后会讨论到,所以你可以一起解决它们。比如在这个例子中,第一个错误是nowrap属性缺少相应的值。你可以通过搜索nowrap并替换为nowrap="nowrap"轻易搞定。实际上通过多文件的搜索和替换,修复整个网站也不过5分钟。(本章后面我会给出更具体的细节。)

修改完后再次运行验证器。每进行一次修改,你看到的错误应该会更少,尽管偶尔会出现新的错误。简单地重复这个过程,直到消灭所有的良构错误。接下来的问题是,img元素使用的是起始标签(start-tag)而不是空元素标签(empty-element tag)。虽然这是个麻烦的标签,但也可以通过搜索BORDER="0">并替换为border="0"/>修复大部分问题。虽然不能找出img元素的所有问题,但确实可以修复大量类似的问题。

从清单中的第一个错误而不是随机挑一个错误着手修复是非常重要的。通常一个先出现的错误会导致更多的良构问题,忽略起始标签或结束标签引起的问题更是如此。修复先出现的错误往往可以免除后续的错误。

实现良构后,接着是检查有效性。只需在命令行加上--valid选项,比如:

$xmllint –noout –loaddtd –valid valid_aw.html
这很可能会显示更多需要检查和修复的错误,尽管通常都是些小问题。但基本的解决方法还是一样的:从顶端开始顺路而下,直到解决所有的问题。

2.2.4 编辑器

很多HTML编辑器都有内置的页面验证支持。比如,在BBEdit中,你可以到Markup菜单项上选择Check/Document Syntax来验证正在编辑的页面;在Dreamweaver中,可以使用右键菜单中的Validate Current Document选项(不过要确保验证器设置为XHTML而非HTML)。从本质上说,这些工具只不过是通过如xmllint这样的解析器来检查文档是否有问题。

如果你使用的是Firefox,应该安装Chris Pederick的Web Developer插件。这样,你就可以通过Tools/Web Developer/Tools/Validate HTML菜单项快速验证任何页面了,它会把当前页面载入W验证器中。另外这个插件还提供了大量的有用选项。

无论你使用哪一种工具和技术来搜索标记错误,验证都是向XHTML重构的第一步。如果能看到问题之所在,那么问题已经解决了一半

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
2天前
|
前端开发 安全 JavaScript
构建高效Web应用:前后端分离架构的实践
【9月更文挑战第4天】在数字时代,Web应用已成为企业与用户互动的主要平台。本文将介绍如何通过前后端分离的架构设计来构建高效的Web应用,探讨该架构的优势,并分享实现过程中的关键步骤和注意事项。文章旨在为开发者提供一种清晰、高效的开发模式,帮助其在快速变化的市场环境中保持竞争力。
|
7天前
|
中间件 编译器 数据处理
在web开发中应用管道过滤器
【9月更文挑战第1天】本文介绍管道-过滤器架构将数据处理流程分解为一系列独立组件,通过管道连接,适用于数据流处理如图像处理、编译器设计等。通过具体实例说明了Gin如何有效支持管道-过滤器风格的设计,构建高性能Web服务。
25 9
|
7天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
18 1
|
7天前
|
Rust 安全 开发者
惊爆!Xamarin 携手机器学习,开启智能应用新纪元,个性化体验与跨平台优势完美融合大揭秘!
【8月更文挑战第31天】随着互联网的发展,Web应用对性能和安全性要求不断提高。Rust凭借卓越的性能、内存安全及丰富生态,成为构建高性能Web服务器的理想选择。本文通过一个简单示例,展示如何使用Rust和Actix-web框架搭建基本Web服务器,从创建项目到运行服务器全程指导,帮助读者领略Rust在Web后端开发中的强大能力。通过实践,读者可以体验到Rust在性能和安全性方面的优势,以及其在Web开发领域的巨大潜力。
18 0
|
7天前
|
开发者 Java 前端开发
Struts 2验证框架:如何让数据校验成为Web开发的隐形守护者?揭秘前后端一致性的秘诀
【8月更文挑战第31天】在现代Web开发中,数据验证对确保应用健壮性和良好用户体验至关重要。随着前后端分离架构的普及,保证数据校验一致性尤为关键。Struts 2 验证框架基于 JavaBean 验证 API(JSR 303/JSR 380),允许开发者通过注解或 XML 配置轻松定义验证规则,确保输入数据在执行业务逻辑前已通过验证。此外,Struts 2 支持与前端 JavaScript 验证相结合,确保前后端数据校验一致,提升用户体验。通过注解、XML 配置和资源文件,开发者可以轻松定义和调整验证规则,实现前后端一致的数据校验,提高应用健壮性。
16 0
|
7天前
|
Java 缓存 数据库连接
揭秘!Struts 2性能翻倍的秘诀:不可思议的优化技巧大公开
【8月更文挑战第31天】《Struts 2性能优化技巧》介绍了提升Struts 2 Web应用响应速度的关键策略,包括减少配置开销、优化Action处理、合理使用拦截器、精简标签库使用、改进数据访问方式、利用缓存机制以及浏览器与网络层面的优化。通过实施这些技巧,如懒加载配置、异步请求处理、高效数据库连接管理和启用GZIP压缩等,可显著提高应用性能,为用户提供更快的体验。性能优化需根据实际场景持续调整。
29 0
|
7天前
|
Java 数据库连接 Spring
Struts 2 插件开发竟如魔法盛宴,为框架注入超能力,开启奇幻编程之旅!
【8月更文挑战第31天】在Web开发中,Struts 2插件开发允许我们在不改动框架核心代码的前提下,通过创建实现特定接口的Java类来扩展框架功能、调整其行为或促进与其他框架(如Spring、Hibernate)的集成,从而更好地满足特定业务需求。遵循良好的设计原则与实践,能够确保插件的高效稳定运行并提升整体项目的可维护性。具体步骤包括创建项目、定义插件类、实现初始化与销毁逻辑,并将插件部署至应用中。
28 0
|
7天前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
18 0
|
7天前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
17 0
|
7天前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
14 0
下一篇
DDNS