> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/frontend/dai-ma-gui-fan.md).

# 代码规范

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声明。

  ```html
  !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 标准教程](https://www.w3cschool.cn/xuexiw3c/)