《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" >

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

相关文章
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
5天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
9 2
|
5天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
13 2
|
9天前
|
安全 前端开发 JavaScript
如何检查和验证 HTML 中的 CSP 策略是否有效
本文介绍如何检查和验证 HTML 中的 Content Security Policy (CSP) 策略是否有效,包括使用浏览器开发者工具、在线验证工具和常见问题排查方法。
|
11天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
27 3
|
12天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
27 1
|
15天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
31 2
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
16天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
27 2
|
19天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
27 1