HTML代码规范深入学习

543 阅读4分钟

HTML编码规范

代码风格

缩进与换行

[强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。

[建议] 每行不得超过 120 个字符。

命名

[强制] class 必须单词全字母小写,单词间以 - 分隔。

[强制] class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。

[强制] 元素 id 必须保证页面唯一。

[建议] id 建议单词全字母小写,单词间以 - 分隔。同项目必须保持风格一致。

[建议] idclass 命名,在避免冲突并描述清楚的前提下尽可能短。

[强制] 禁止为了 hook 脚本,创建无样式信息的 class

[强制] 同一页面,应避免使用相同的 nameid

标签

[强制] 标签名必须使用小写字母。

[强制] 对于无需自闭合的标签,不允许自闭合。

[强制] 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。

[强制] 标签使用必须符合标签嵌套规则。

[建议] HTML 标签的使用应该遵循标签的语义。

[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

[建议] 标签的使用应尽量简洁,减少不必要的标签。

属性

[强制] 属性名必须使用小写字母。

[强制] 属性值必须用双引号包围。

[建议] 布尔类型的属性,建议不添加属性值。

[建议] 自定义属性建议以 xxx- 为前缀,推荐使用 data-

通用

DOCTYPE

使用 HTML5doctype 来启用标准模式,建议使用大写的 DOCTYPE

[建议] 启用 IE Edge 模式。

[建议] 在 html 标签上设置正确的 lang 属性。

编码

[强制] 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。

[建议] HTML 文件使用无 BOMUTF-8 编码。

CSS 和 JavaScript 引入

[强制] 引入 CSS 时必须指明 rel="stylesheet"

[建议] 引入 CSSJavaScript 时无须指明 type 属性。

[建议] 展现定义放置于外部 CSS 中,行为定义放置于外部 JavaScript 中。

[建议] 在 head 中引入页面需要的所有 CSS 资源。

[建议] JavaScript 应当放在页面末尾,或采用异步加载。

[建议] 移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的 URL 协议部分与页面相同,建议省略协议前缀。

head

title

[强制]页面必须包含 title 标签声明标题。

[强制]title 必须作为 head 的直接子元素,并紧随 charset 声明之后。

favicon

[强制] 保证 favicon 可访问。

viewport

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

图片

[强制] 禁止 imgsrc 取值为空。延迟加载的图片也要增加默认的 src

[建议] 避免为 img 添加不必要的 title 属性。

[建议] 为重要图片添加 alt 属性。

[建议] 添加 widthheight 属性,以避免页面抖动。

[建议] 有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现。

表单

控件标题

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

按钮

[强制] 使用 button 元素时必须指明 type 属性值。

[建议] 尽量不要使用按钮类元素的 name 属性。

可访问性 (A11Y)

[建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。

[建议] 当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。

[建议] 在针对移动设备开发的页面时,根据内容类型指定输入框的 type 属性。

多媒体

[建议] 当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时,应当注意格式。

[建议] 在支持 HTML5 的浏览器中优先使用 audiovideo 标签来定义音视频元素。

[建议] 使用退化到插件的方式来对多浏览器进行支持。

[建议] 只在必要的时候开启音视频的自动播放。

[建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。

模板中的 HTML

[建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。

[建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。

[建议] 在循环处理模板数据构造表格时,若要求每行输出固定的个数,建议先将数据分组,之后再循环输出。