《Web前端开发最佳实践》——第3章 标准的HTML代码3.1 验证代码是否符合标准

简介:

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章,第3.1节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

第3章 标准的HTML代码

标准的HTML代码指的是HTML代码符合W3C的最新标准,而在页面的HTML代码中包含有任何规范之外的或者是不推荐的标签和属性都是不符合标准的。W3C定义了所有规范的HTML标签及其属性,目前正式的版本是HTML5,HTML5中定义的大部分内容已经被所有的高级浏览器支持,所以并不妨碍在页面中使用这些已经广泛被支持的新标签和新属性。本章将贴近W3C标准,介绍如何构建标准的页面HTML代码。

3.1 验证代码是否符合标准

一个符合W3C标准的网页会有什么重要的意义呢?这是一个讨论了很多年的话题,虽然有很多人在强调Web标准的重要性,可是比较遗憾的是这个话题并没有引起足够的重视,甚至有一些大的互联网公司的官方网站也很难通过W3C标准的检查。除了一些客观历史原因(如页面建立的时间久远、页面维护成本等)之外,我想这主要是前端技术还不够成熟的表现,只关注页面外在的表现而忽略了页面本身代码的质量。这些大的互联网公司的网站都没有起到带头的作用,其他的一些网站的页面代码质量就可想而知了。因此,在讨论页面标准化之前,先来说说一个标准的页面具有哪些优点。
1.标准的页面会保证浏览器正确地渲染
尽管主流浏览器有很好的纠错能力,使得一些错误并不会影响页面的显示,但是不同的浏览器处理错误的方式不尽相同,很难保证所有平台的所有客户端都能正确地兼容不规范的或者错误的代码。而使用符合标准的HTML标签和CSS样式,能最大限度地保证页面在不同浏览器正常地进行解析,同时还能最大限度地保证在未来的各种客户端中正常解析。
2.网页能更容易被搜索引擎搜寻,提高网站的搜索排名
这一个优点是大家反复提到的。随着搜索引擎的普及,越来越多的用户从各种搜索引擎中查询需要的信息,网站的维护者也是想尽各种办法来提高在搜索引擎中的排名,从而提高网站的用户访问量。据统计,编写标准的页面基本上完成了一半的搜索引擎优化工作。各搜索引擎使用的网络“爬虫”不同于Web浏览器,“爬虫”的目的是读懂网站的内容,并找出网站中的关键字。良好的页面结构可以帮助搜索引擎准确地理解网站的内容,比如合理使用标题标签< h1 >到< h6 >、设置< img >标签中的alt属性、选择更标准且更有语义化的标签等。网络“爬虫”会根据标签的语义和标签上的一些属性值来判断标签的内容所要表达的意思。
3.提高网站的易用性
提高网站的易用性指的是让网站能被更多的用户访问,尤其是被一些视力或者肢体障碍用户等所访问。美国的某些地方甚至有专门的法律来要求发布的网站必须要达到一定的易用性。这样就可让那些特殊用户通过辅助的设备来阅读网站,这些辅助设备只会关注页面中的主要内容,并把内容以独特的形式(如通过语音阅读等)传达给用户。而符合标准的HTML和CSS组成的网页则会让辅助设备更容易识别,更准确地提取页面的主体内容。
4.网页更好维护和扩展
这一点是针对网页开发的。W3C的Web标准是被普遍接受的标准,页面的多个开发者如果遵循统一的标准,则会更好地理解和维护已有的页面。标签、样式以及行为分离的标准页面显然具有好的扩展性。
既然标准页面有这么多的好处,那么在前端的页面开发中如何做到编写的代码符合标准呢?编写标准的页面代码,首先要熟悉标准。W3C定义了很多相关的标签、样式和行为标准,开发者只有深刻地理解了这些标准,才能编写出高质量的前端页面代码。除此之外,最直接有效的方式是使用工具来持续验证页面代码(主要是HTML和CSS代码)的标准性。
早在2009年,在W3C的社区中出现过一项有关是否需要验证页面的调查,结果是大部分人赞成验证,并且有很多理由来说明验证页面代码的好处。除了包括如上标准页面本身的优点之外,验证页面的过程也使得开发者提高了自身的技术技能和职业素养。下面是常用的页面验证方式。
验证页面代码最直接的方式是用W3C提供的一项免费的验证服务W3 Validator。它提供了3种验证方式:URL、文件上传、直接输入代码(见图3-1)。


<a href=https://yqfile.alicdn.com/cc0901969bf6085429d8c64fc2eb1d1fdba441a4.png" >

它验证的结果非常详细,每项错误或者警告都有对应的解释,因此它也是不错的学习工具。它的缺点是不够方便,尤其是在开发过程中需要持续验证的情况下。个人推荐使用的工具是HTML Validator,它是一个Firefox浏览器的插件,其方便之处在于可以在查看页面的同时验证页面。此插件的核心是基于一个开源的项目HTML Tidy,是由W3C的Dave Raggett开发的。HTML Tidy相比于W3 Validator验证,强大的地方在于它不仅验证代码是否标准,还会自动纠正和美化代码。单击图3-2右侧的“Clean up the page”按钮,就可以美化页面的代码。


<a href=https://yqfile.alicdn.com/b1f6badd943ed70ab9a0e37596881a2dd9092142.png" >

需要强调的是,验证页面并不能保证开发者编写高质量的代码。验证页面的代码就像在写文章的过程中检查错别字以及语法错误一样,目的只是找到页面中直观的错误。页面代码符合标准只是基本要求,编写高质量的页面代码,还要注意很多细节,后续的章节会详细讨论如何编写高质量的页面代码。

相关文章
|
9天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
36 19
|
9天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
9天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
18天前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
11 0
|
18天前
|
Java 开发者 JavaScript
Struts 2 开发者的秘籍:隐藏的表单标签库功能,能否成为你下个项目的大杀器?
【8月更文挑战第31天】Struts 2表单标签库是提升Web页面交互体验的神器。它提供丰富的标签,如`&lt;s:textfield&gt;`和`&lt;s:select&gt;`,简化表单元素创建与管理,支持数据验证和动态选项展示。结合示例代码,如创建文本输入框并与Action类属性绑定,显著提升开发效率和用户体验。通过自定义按钮样式等功能,Struts 2表单标签库让开发者更专注于业务逻辑实现。
38 0
|
18天前
|
开发者 Java 前端开发
Struts 2验证框架:如何让数据校验成为Web开发的隐形守护者?揭秘前后端一致性的秘诀
【8月更文挑战第31天】在现代Web开发中,数据验证对确保应用健壮性和良好用户体验至关重要。随着前后端分离架构的普及,保证数据校验一致性尤为关键。Struts 2 验证框架基于 JavaBean 验证 API(JSR 303/JSR 380),允许开发者通过注解或 XML 配置轻松定义验证规则,确保输入数据在执行业务逻辑前已通过验证。此外,Struts 2 支持与前端 JavaScript 验证相结合,确保前后端数据校验一致,提升用户体验。通过注解、XML 配置和资源文件,开发者可以轻松定义和调整验证规则,实现前后端一致的数据校验,提高应用健壮性。
26 0
|
18天前
|
Java 测试技术 容器
从零到英雄:Struts 2 最佳实践——你的Web应用开发超级变身指南!
【8月更文挑战第31天】《Struts 2 最佳实践:从设计到部署的全流程指南》深入介绍如何利用 Struts 2 框架从项目设计到部署的全流程。从初始化配置到采用 MVC 设计模式,再到性能优化与测试,本书详细讲解了如何构建高效、稳定的 Web 应用。通过最佳实践和代码示例,帮助读者掌握 Struts 2 的核心功能,并确保应用的安全性和可维护性。无论是在项目初期还是后期运维,本书都是不可或缺的参考指南。
29 0
|
18天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
42 0
|
18天前
|
安全 Java 云计算
JSF 应用究竟何去何从?云端部署能否成为其全新突破点?快来一探究竟!
【8月更文挑战第31天】本文介绍了将JavaServer Faces(JSF)应用部署到云平台的过程。首先,根据成本、功能、可靠性和安全性选择合适的云平台。接着,展示了构建简单JSF应用的示例代码。最后,以AWS Elastic Beanstalk为例,详细说明了部署流程。部署至云端可提升应用的可用性、扩展性和安全性。
29 0
|
18天前
|
安全 前端开发 PHP
构建与验证表单:传统PHP与Laravel框架的比较分析——探索Web开发中表单处理的优化策略和最佳实践
【8月更文挑战第31天】在 Web 开发中,表单构建与数据验证至关重要。传统 PHP 方法需手动处理 HTML 表单和数据验证,而 Laravel 框架则提供了一种更现代、高效的解决方案。本文通过对比传统 PHP 和 Laravel 的方法,探讨表单构建与验证的最佳实践。Laravel 通过简洁的语法糖、内置的数据过滤和验证机制,显著提升了代码的安全性和可维护性,适用于大型项目或需要快速开发的场景。然而,在追求灵活性的小型项目中,直接使用 PHP 仍是不错的选择。了解两者的优劣,有助于开发者根据项目需求做出最佳决策。
24 0