HTML 编码规范

很多初学者对编码规范不以为然,认为对项目开发没有帮助,甚至会觉得影响学习和开发的进度。或者经过一段时间的学习,已经形成了自己的风格,所以就不愿去学习编码规范。这种想法是很危险的。

什么是编码规范

以 HTML 开发为例,编码规范是开发人员长期积累的经验,形成了一种良好统一的书写风格,这种风格无论是在个人开发,还是团队开发或二次开发中起到事半功倍的效果。

遵循编码规范的好处有:

  • 编码规范是对团队开发成员的基本要求。

  • 开发人员可以了解代码,理清楚程序的框架。

  • 提高可读性,有利于设计人员交流。

  • 防止 HTML 初学者自创风格并养成终生习惯。

  • 有利于网站的维护。

编码规范是一种总结性的说明,并不是强制性的规则。

HTML 编码规范原则

  • 规范性:确保您的代码规范,趋于 HTML5 ,远离 XHTML 。

  • 简洁性:保证代码的最简化,避免使用多余的空格、空行,尽量使用具有语义的元素。避免使用样式属性和行为属性。

HTML 语法规范

1.小写。虽然 HTML 源代码不区分大小写,但是建议 HTML 标签、HTML 属性全部小写。

2.“<”和“>”是任何标签的开始和结束。元素的标签要用这对尖括号括起来,并且结束标签总是在开始的标记前加一个斜杠(/)。

3.标签嵌套。标签与标签之间可以嵌套。

<h1><center>HTML 编码规范</center></h1>

4.标签闭合。双标签必须闭合(也就是必须成对出现),单标签不闭合。

<!-- 正确示例 -->
<br>

<!-- 错误示例 -->
<br/>

HTML 注释规范

1.必要的注释。解释代码的用途等。

2.模块注释。建议不使用模块结束注释。建议不要使用模块的结束注释,因为会不太美观,又会加重文件负荷。

<!-- 导航模块 -->
<div class="navbar">
...
<div/>
<!-- /导航模块 不建议使用 -->

HTML 文档规范

1.文档类型声明及编码: 统一使用 HTML5 标准文档类型,声明类型为<!DOCTYPE html>

注意:文档类型声明之前,不允许出现任何非空字符。

2.建议样式文件外链至<head>和</head>标签之间;JavaScript文件外链至页面底部,加快页面第一时间显示于用户眼前。

3.嵌套缩进。使用制表符(<Tab>)缩进,缩进单位为4个空格左右。

4.列表元素、块元素、表格元素都放在新的一行。

5.保证代码的最简化,避免使用多余的空格、空行。

6.引入样式文件或JavaScript文件时, 须省略默认类型声明。不用指定type属性,因为 text/csstext/javascript 分别是它们的默认值。

<link rel="stylesheet" href="..." />
<script src="..."></script>

HTML 属性规范

1.属性值使用双引号,不要使用单引号。

2.建议重要图片标签需加上alt属性值。

<img src="..." alt="这是一张图片">

3.在页面中尽量避免使用style属性,即style="color:#FFF"。

HTML 元素规范

1.尽量使用无兼容性问题的 HTML 自身标签, 比如span, em, strong, label等标签。

2.标题根据重要性用h*(同一页面只能有一个h1标签), 段落标记用<p>(避免使用<br>), 列表用<ul>。

3.避免冗余标签。