代码规范

Web 标准不是某一个标准，而是由 W3C（万维网联盟，World Wide Web Consortium）和其他标准化组织制定的一系列标准的集合。

**万维网联盟（World Wide Web Consortium，以下简称W3C）**创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。它的使命是开发促进万维网发展、确保万维网互操作性的通用协议，从而尽展万维网的全部潜能。

狭义的 Web 标准是指网页设计的 DIV + CSS 化，广义的 Web 标准是指网页设计要符合 W3C 和 ECMA 规范。

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

对应的标准也有三方面：

  • 结构化标准语言主要包括 XHTML 和 XML；

  • 表现标准语言主要包括 CSS；

  • 行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

这些标准大部分由 W3C 起草和发布，也有一些是其他标准组织制订的标准，比如 ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。

结构标准语言

  • XML（The Extensible Markup Language，可扩展标识语言）

    目前推荐遵循的是 W3C 于2000年10月6日发布的 XML1.0。和 HTML 一样，XML 同样来源于 SGML，但 XML 是一种能定义其他语言的语言。XML 最初设计的目的是弥补 HTML 的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于 XML 的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。　 　

  • XHTML （The Extensible HyperText Markup Language，可扩展标识语言）

    目前推荐遵循的是 W3C 于2000年1月26日推荐 XML1.0。XML 虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用 XML 还为时过早。因此，我们在 HTML4.0 的基础上，用 XML 的规则对其进行扩展，得到了 XHTML。简单的说，建立 XHTML 的目的就是实现 HTML 向 XML 的过渡。　 　

表现标准语言

CSS是Cascading Style Sheets 层叠样式表的缩写。

目前推荐遵循的是 W3C 于1998年5月12日推荐CSS2。W3C 创建 CSS 标准的目的是以 CSS 取代 HTML 表格式布局、帧和其他表现的语言。纯 CSS 布局与结构式 XHTML 相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。　

行为标准

  • DOM （Document Object Mode，文档对象模型）

    根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 解决了Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。　

  • ECMAScript

    ECMAScript 是 ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JAVAScript）。目前推荐遵循的是 ECMAScript 262。

怎样通过W3C标准的验证？

  • 图片的 alt="" 属性必须每张图片都加上，而且对齐属性用 CSS 来定义。

  • 每个文档必须加上DTD声明。

    !DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type。

  • RSS 的 XML 通过时其中的域名地址必须与检测的地址一致，否则会报错。

  • 标签的链接属性加上 JAVASCRIPT 事件时必须为#空链，不能为 javascript:; 或 javascript:void(null);

  • 同一个页面当中，同名的 ID 会产生冲突。所以以 ID 定义样式的必须改成类引用。

  • 不可省略双引号或单引号。这个是指属性，标准是双引号~，但，单引号也能通过验证。

  • 标签之间不可错位嵌套。

  • 所有的标签都使用小写。

  • 所有的标签中含有的属性必须有值(官方的说法)。

  • 标签必须配对完成，单标签必须以/关闭。

  • JS 和 CSS 外部引入文件必须加上类型定义。

  • 所有的样式全部写在外部文件。用类名定义。在使用的地方引用。

  • 页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“

  • 不能缺少 title 标签

为什么要遵循Web标准？

因为不同的浏览器可能会解析出不一致的结果，所以开发者经常需要努力地开发多版本，通过 web 标准-----可以显示统一的内容，从而大大提高开发效率。

使用 Web 标准主要有以下几个好处：

  • 让 Web 的发展前景更广阔

  • 内容能被更广泛的设备访问

  • 更容易被搜寻引擎搜索

  • 降低网站流量费用

  • 使网站更易于维护

  • 提高页面浏览速度等

总结来说：让机器能更好的读懂代码，让人（自己、其他开发者）能更好的读懂代码。

另外，遵循 Web 标准，创建易维护的代码是一个项目成功与否的关键。易维护的代码意味着具有如下特性：

  • 阅读性好：如良好的注释和命名规范，有文档；

  • 具有一致性：看起来如同一个人编写；

  • 代码的松耦合、高度模块化：将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码。HTML、CSS、JS 三个层面都要考虑模块化。

什么是高质量代码？

高质量代码有三要素：可读性、可维护性、可变更性。

  • 代码的可读性： 是指代码让人容易阅读、跟踪和理解的程度。

  • 代码的可维护性： 是指理解、改正、改动、改进代码的难易程度。

  • 代码的可变更性：是指开发完成后，为应对需求的变更或者新需求而进行的代码修改，其所需要付出的代价。

代码的可变更性是建立在代码的可维护性上的，而代码的可维护性又是建立在代码的可读性上。提高代码的可读性可以为代码阅读者节约时间和精力，Debug、扩展功能或是性能优化的前提条件是你要读懂代码。

参考资料

W3C 标准教程

上一页TypeScript使用指南下一页前端规范

最后更新于