HTML 编码规范

代码风格

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

class 必须单词全字母小写,单词间以 - 分隔。class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。

对于无需自闭合的标签,不允许自闭合。常见无需自闭合标签有 inputbrimghr 等。对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。

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

1
2
<input type="text" disabled>
<input type="checkbox" value="1" checked>

自定义属性建议以 xxx- 为前缀,推荐使用 data-。使用前缀有助于区分自定义属性和标准定义的属性。

1
<ol data-ui-type="Select"></ol>

通用

使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE
html 标签上设置正确的 lang 属性。
页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
启用 IE Edge 模式(让IE以最高级别的可用模式显示内容)。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
......
</head>
<body>
......
</body>
</html>

CSS和JavaScript引入

引入 CSS 时必须指明 rel=”stylesheet”。引入 CSS 和 JavaScript 时无须指明 type 属性。在 head 中引入页面需要的所有 CSS 资源。JavaScript 应当放在页面末尾,或采用异步加载。

1
2
3
4
5
<link rel="stylesheet" href="page.css">
<body>
<!-- a lot of elements -->
<script src="init-behavior.js"></script>
</body>

页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素,并紧随 charset 声明之后。

1
2
3
4
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>

保证 favicon 可访问(放置Web Server 根目录下,能避免404)。

1
<link rel="shortcut icon" href="path/to/favicon.ico">

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

图片

禁止 imgsrc 取值为空,延迟加载的图片也要增加默认的 src。因为 src 取值为空时,会导致部分浏览器重新加载一次当前页面。

避免为 img 添加不必要的 title 属性。为重要图片添加 alt 属性。

添加 widthheight 属性,以避免页面抖动。

有下载需求的图片采用 img 标签实现,无下载需求的图片采用 CSS 背景图实现:

  • 产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片,以 img 形式实现,能方便用户下载。
  • 无下载需求的图片,比如:icon、背景、代码使用的图片等,尽可能采用 css 背景图实现。

表单

有文本标题的控件必须使用 label 标签将其与其标题相关联。有两种方式:

  • 将控件置于 label 内。
  • labelfor 属性指向控件的 id
1
2
3
4
5
6
<label>
<input type="checkbox" name="confirm" value="on"> 我已确认上述条款
</label>

<label for="username">用户名:</label>
<input type="textbox" name="username" id="username">

使用 button 元素时必须指明 type 属性值。默认为 submit

负责主要功能的按钮在 DOM 中的顺序应靠前,以提高访问性。确定在左取消在右。

当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。避免当浏览器 JS 运行错误或关闭 JS 时,提交功能将无法工作。

1
2
3
4
<form action="/login" method="post">
<p><input name="username" type="text" placeholder="用户名"></p>
<p><input name="password" type="password" placeholder="密码"></p>
</form>

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

1
<input type="date">

多媒体

音频应尽可能覆盖到:MP3、WAV和Ogg格式。视频应尽可能覆盖到:MP4、WebM和Ogg格式。

在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。并使用退化到插件的方式来对多浏览器进行支持。

1
2
3
4
5
6
7
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>

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

1
<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>

模板中的 HTML

模板代码的缩进优先保证 HTML 代码的缩进规则。

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

参考:HTML编码规范

坚持原创技术分享,您的支持将鼓励我继续创作!