"HTML编码规范" 笔记

转自学习网站（百度原创）：https://github.com/ecomfe/spec/blob/master/html-style-guide.md

本文是百度培训网站上关于HTML编码规范的笔记，非博主原创。

前言

HTML 作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致，容易被理解和被维护。

代码风格

缩进与换行

1. [强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
2. [建议] 每行不得超过 120 个字符
3. [强制] class 必须单词全字母小写，单词间以 - 分隔。
4. [强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
5. [强制] 元素 id 必须保证页面唯一。
6. [建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
7. [建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。
8. [强制] 禁止为了 hook 脚本，创建无样式信息的 class。
9. [强制] 同一页面，应避免使用相同的 name 与 id。

标签

1. [强制] 标签名必须使用小写字母。
2. [强制] 对于无需自闭合的标签，不允许自闭合。
3. [强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
4. [强制] 标签使用必须符合标签嵌套规则。
5. [建议] HTML 标签的使用应该遵循标签的语义。
6. [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
7. [建议] 标签的使用应尽量简洁，减少不必要的标签。

属性

1. [强制] 属性名必须使用小写字母。
2. [强制] 属性值必须用双引号包围。
3. [建议] 布尔类型的属性，建议不添加属性值。
4. [建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。

通用

DOCTYPE

1. [强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
2. [建议] 启用 IE Edge 模式。
3. [建议] 在 html 标签上设置正确的 lang 属性。

编码

1. [强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
2. [建议] HTML 文件使用无 BOM 的 UTF-8 编码。

CSS 和 JavaScript 引入

1. [强制] 引入 CSS 时必须指明 rel="stylesheet"。
2. [建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。
3. [建议] 在 head 中引入页面需要的所有 CSS 资源。
4. [建议] JavaScript 应当放在页面末尾，或采用异步加载。
5. [建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。

head

title

1. [强制] 页面必须包含 title 标签声明标题。
2. [强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。

favicon

1. [强制] 保证 favicon 可访问。

viewport

1. [建议] 若页面欲对移动设备友好，需指定页面的 viewport。

图片

1. [强制] 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
2. [建议] 避免为 img 添加不必要的 title 属性。
3. [建议] 为重要图片添加 alt 属性。
4. [建议] 添加 width 和 height 属性，以避免页面抖动。
5. [建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

表单

控件标题

1. [强制] 有文本标题的控件必须使用 label 标签将其与其标题相关联。

按钮

1. [强制] 使用 button 元素时必须指明 type 属性值。
2. [建议] 尽量不要使用按钮类元素的 name 属性。

可访问性 (A11Y)

1. [建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。
2. [建议] 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。
3. [建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。

多媒体

1. [建议] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。
2. [建议] 在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
3. [建议] 使用退化到插件的方式来对多浏览器进行支持。
4. [建议] 只在必要的时候开启音视频的自动播放。
5. [建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。

模板中的 HTML

1. [建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。
2. [建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
3. [建议] 在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。