# HTML 编码规范

本节对 HTML 的使用提出一些基本的要求，目的为了减少错误，统一整体风格，方便管理和维护。

使用 2 个空格做为一个缩进层级，不允许使用 4 个空格或 tab 字符。需确认
每行不得超过 120 个字符。过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。
class 必须单词全字母小写，单词间以 - 分隔。
元素 id 必须保证页面唯一。id 不唯一使用 document.getElementById 时可能导致难以追查的问题。
同一页面，应避免使用相同的 name 与 id。
标签名必须使用小写字母。
HTML 标签的使用应该遵循标签的语义。

下面是常见标签语义

p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表

<!-- good -->
<p>
  Esprima serves as an important <strong>building block</strong> for some
  JavaScript language tools.
</p>

<!-- bad -->
<div>
  Esprima serves as an important <span class="strong">building block</span> for
  some JavaScript language tools.
</div>

1
2
3
4
5
6
7
8
9
10
11

在 head 中引入页面需要的所有 CSS 资源。在页面渲染的过程中，新的 CSS 可能导致元素的样式重新计算和绘制，页面闪烁。
JavaScript 应当放在页面末尾，或采用异步加载。将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。
属性值必须用双引号包围。不允许使用单引号，不允许不使用引号。
使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

<!DOCTYPE html>

引入 CSS 时必须指明 rel="stylesheet"。

<link rel="stylesheet" src="page.css" />

样式放置于外部 CSS 中，行为放置于外部 JavaScript 中。结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。
使用 button 元素时必须指明 type 属性值。

button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。

<button type="submit">提交</button> <button type="button">取消</button>

CSS 编码规范 →