HTML编写规范

-

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>
复制代码

同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>
复制代码

• 同一页面，应避免使用相同的 name 与 ID

IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

<input name="foo">
<div id="foo"></div>
<script>
// IE6 将显示 INPUT
alert(document.getElementById('foo').tagName);
</script>
复制代码

1.3 标签

标签名必须使用小写字母

<p>Hello world!</p>
复制代码

对于无需自闭和的标签，不允许自闭和

常见无需自闭和的标签有 input 、 br 、 img 、等

<input type="text" name="title">
复制代码

除HTML5 中规定允许省略的闭合标签外，其他不允许省略闭合标签。（对代码体积要求非常严苛的场景，可以例外）

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>
复制代码

标签使用必须符合标签嵌套规则

比如：div不得置于p中，tbody必须置于table中

在css可以实现相同需求的情况下不得使用表格进行布局

在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。

标签的使用应尽量简洁，减少不必要的标签

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>
复制代码

1.4 属性

• 属性名必须使用小写字母

<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>
复制代码

• 属性值必须使用双引号包围

<!-- good -->
<script src="esl.js"></script>

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
复制代码

• 布尔类型的属性，建议不添加属性值

<input type="text" disabled>
<input type="checkbox" value="1" checked>
复制代码

• 自定义属性推荐使用 data-

使用前缀有助于区分自定义属性和标准定义的属性

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

1.5 语义化

我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。使用语义化标签也是有理由SEO的。

语义化是指：根据元素其被创造出来时的初始意义来使用它。意思就是用正确的标签干正确的事，而不是只有div和span。

2、通用

2.1 DOCTYPE

• 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

<!DOCTYPE html>
复制代码

• 建议在html标签上设置正确的lang属性

有助于提高页面的可访问性，如：让语音合成 工具 确定其所应该采用的发音，令翻译工具确定其翻译语言等。

<html lang="zh-CN">
复制代码

2.2 CSS 和 js 引入

• 引入 css 时必须指明 rel="stylesheet"
• 引入 css 和 js 时无须指明 type 属性
• 样式放置于外部 css 中，功能放置于外部 js 中

结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。 1、不使用超过一到两张样式表 2、不使用超过一到两个脚本（学会用合并脚本） 3、不使用行内样式 （<style>.no-good {}</style>） 4、不在元素上使用 style 属性 （<hr style="border-top: 5px solid black">） 5、不使用行内脚本 （<script>alert('no good')</script>） 6、不使用表象元素 （i.e. <b>, <u>, <center>, <font>, <b>） 7、不使用表象 class 名 （i.e. red, left, center）

• 在 head 中引入页面需要的所有 css 资源

在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。

js

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
复制代码

• 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。

3、head

3.1 title

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

3.2 favicon

• 保证 favicon 可访问

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一： 1、在 Web Server 根目录放置 favicon.ico 文件。 2、使用 link 指定 favicon。

<link rel="shortcut icon" href="path/to/favicon.ico">
复制代码

3.3 viewport

• 若页面需要在移动设备上使用，需设置viewport

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

4、图片

禁止 img 的 src 取值为空，延迟加载的图片也要增加默认的 src

src 取值为空，会导致部分浏览器重新加载一次当前页面

避免为 img 添加不必要的 title 属性

多余的title影响看图体验，并且增加了页面尺寸

为重要图片添加 alt 属性。

可以提高图片加载失败时的用户体验

添加 width 和 height 属性，以避免页面抖动 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 雪碧图 实现。

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

4、表单

4.1 控件标题

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

有两种方式： 1、将控件置于 label 内。 2、label 的 for 属性指向控件的 id。 推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

<label for="username">用户名：</label> <input type="textbox" name="username" id="username">
复制代码

4.2 按钮

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

<button type="submit">提交</button>
<button type="button">取消</button>
复制代码

尽量不要使用按钮类元素的 name 属性 由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题，具体情况可参照http://w3help.org/zh-cn/causes/CM2001

4.3 可访问性

负责主要功能的按钮在 DOM 中的顺序应靠前 负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。

<!-- good -->
<style>
.buttons .button-group {
    float: right;
}
</style>

<div class="buttons">
    <div class="button-group">
        <button type="submit">提交</button>
        <button type="button">取消</button>
    </div>
</div>

<!-- bad -->
<style>
.buttons button {
    float: right;
}
</style>

<div class="buttons">
    <button type="button">取消</button>
    <button type="submit">提交</button>
</div>
复制代码

在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性。 根据内容类型指定输入框类型，能获得能友好的输入体验。

<input type="date">
复制代码

5、多媒体

当在现代浏览器中使用 audio 以及 video 标签来播放音频、视频时，应当注意格式。 音频应尽可能覆盖到如下格式：

• MP3
• WAV
• Ogg

视频应尽可能覆盖到如下格式：

• MP4
• WebM
• Ogg

在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。

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