转自学习网站(百度原创):https://github.com/ecomfe/spec/blob/master/html-style-guide.md
本文是百度培训网站上关于HTML编码规范的笔记,非博主原创。
前言
HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护。
代码风格
缩进与换行
- [强制] 使用
4
个空格做为一个缩进层级,不允许使用2
个空格 或tab
字符。 - [建议] 每行不得超过
120
个字符 - [强制]
class
必须单词全字母小写,单词间以-
分隔。 - [强制]
class
必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。 - [强制] 元素
id
必须保证页面唯一。 - [建议]
id
建议单词全字母小写,单词间以-
分隔。同项目必须保持风格一致。 - [建议]
id
、class
命名,在避免冲突并描述清楚的前提下尽可能短。 - [强制] 禁止为了
hook 脚本
,创建无样式信息的class。
- [强制] 同一页面,应避免使用相同的
name
与id。
标签
- [强制] 标签名必须使用小写字母。
- [强制] 对于无需自闭合的标签,不允许自闭合。
- [强制] 对
HTML5
中规定允许省略的闭合标签,不允许省略闭合标签。 - [强制] 标签使用必须符合标签嵌套规则。
- [建议] HTML 标签的使用应该遵循标签的语义。
- [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。
- [建议] 标签的使用应尽量简洁,减少不必要的标签。
属性
- [强制] 属性名必须使用小写字母。
- [强制] 属性值必须用双引号包围。
- [建议] 布尔类型的属性,建议不添加属性值。
- [建议] 自定义属性建议以
xxx-
为前缀,推荐使用data-
。
通用
DOCTYPE
- [强制] 使用
HTML5
的doctype
来启用标准模式,建议使用大写的DOCTYPE
。 - [建议] 启用 IE Edge 模式。
- [建议] 在
html
标签上设置正确的lang
属性。
编码
- [强制] 页面必须使用精简形式,明确指定字符编码。指定字符编码的
meta
必须是head
的第一个直接子元素。 - [建议]
HTML
文件使用无BOM
的UTF-8
编码。
CSS 和 JavaScript 引入
- [强制] 引入
CSS
时必须指明rel="stylesheet"
。 - [建议] 引入
CSS
和JavaScript
时无须指明type
属性。 - [建议] 在
head
中引入页面需要的所有CSS
资源。 - [建议]
JavaScript
应当放在页面末尾,或采用异步加载。 - [建议] 移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的
URL
协议部分与页面相同,建议省略协议前缀。
head
title
- [强制] 页面必须包含
title
标签声明标题。 - [强制]
title
必须作为head
的直接子元素,并紧随charset
声明之后。
favicon
- [强制] 保证
favicon
可访问。
viewport
- [建议] 若页面欲对移动设备友好,需指定页面的
viewport
。
图片
- [强制] 禁止
img
的src
取值为空。延迟加载的图片也要增加默认的src
。 - [建议] 避免为
img
添加不必要的title
属性。 - [建议] 为重要图片添加
alt
属性。 - [建议] 添加
width
和height
属性,以避免页面抖动。 - [建议] 有下载需求的图片采用
img
标签实现,无下载需求的图片采用 CSS 背景图实现。
表单
控件标题
- [强制] 有文本标题的控件必须使用
label
标签将其与其标题相关联。
按钮
- [强制] 使用
button
元素时必须指明type
属性值。 - [建议] 尽量不要使用按钮类元素的
name
属性。
可访问性 (A11Y)
- [建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。
- [建议] 当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。
- [建议] 在针对移动设备开发的页面时,根据内容类型指定输入框的
type
属性。
多媒体
- [建议] 当在现代浏览器中使用
audio
以及video
标签来播放音频、视频时,应当注意格式。 - [建议] 在支持
HTML5
的浏览器中优先使用audio
和video
标签来定义音视频元素。 - [建议] 使用退化到插件的方式来对多浏览器进行支持。
- [建议] 只在必要的时候开启音视频的自动播放。
- [建议] 在
object
标签内部提供指示浏览器不支持该标签的说明。
模板中的 HTML
- [建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。
- [建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
- [建议] 在循环处理模板数据构造表格时,若要求每行输出固定的个数,建议先将数据分组,之后再循环输出。