分享程序员开发的那些事...
更新时间：2022-10-04 16:02:36
本节书摘来自华章计算机《Web前端开发***实践》一书中的第3章，第3.1节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
标准的HTML代码指的是HTML代码符合W3C的最新标准，而在页面的HTML代码中包含有任何规范之外的或者是不推荐的标签和属性都是不符合标准的。W3C定义了所有规范的HTML标签及其属性，目前正式的版本是HTML5，HTML5中定义的大部分内容已经被所有的高级浏览器支持，所以并不妨碍在页面中使用这些已经广泛被支持的新标签和新属性。本章将贴近W3C标准，介绍如何构建标准的页面HTML代码。
一个符合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）。
它验证的结果非常详细，每项错误或者警告都有对应的解释，因此它也是不错的学习工具。它的缺点是不够方便，尤其是在开发过程中需要持续验证的情况下。个人推荐使用的工具是HTML Validator，它是一个Firefox浏览器的插件，其方便之处在于可以在查看页面的同时验证页面。此插件的核心是基于一个开源的项目HTML Tidy，是由W3C的Dave Raggett开发的。HTML Tidy相比于W3 Validator验证，强大的地方在于它不仅验证代码是否标准，还会自动纠正和美化代码。单击图3-2右侧的“Clean up the page”按钮，就可以美化页面的代码。
需要强调的是，验证页面并不能保证开发者编写高质量的代码。验证页面的代码就像在写文章的过程中检查错别字以及语法错误一样，目的只是找到页面中直观的错误。页面代码符合标准只是基本要求，编写高质量的页面代码，还要注意很多细节，后续的章节会详细讨论如何编写高质量的页面代码。