代码规范

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

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

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

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

对应的标准也有三方面:

  • 结构化标准语言主要包括 XHTMLXML

  • 表现标准语言主要包括 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 解决了NetscapedJavascriptMicrosoft Jscript 之间的冲突,给予 web 设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。 

  • ECMAScript

    ECMAScriptECMA(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 标准教程

最后更新于