HTML 规范

HTML 是描述网页结构的超文本标记语言，

HTML 规范能够使 HTML 代码风格一致、更易理解和维护。

整体结构

[1] 页面头部

1. 文件应以 <!DOCTYPE ...> 首行顶格开始，推荐使用 <!DOCTYPE html>

2. 必须声明文档的 charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素

// 推荐使用UTF-8编码 <meta charset="utf-8">

1
2

// 推荐使用UTF-8编码
   <meta charset="utf-8">

3. 根据页面内容和需求填写适当的 keywords 和 description // SEO

<meta name="description" content="不超过150个字符"> <meta name="keywords" content="">

1
2

<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">

4. 页面 title 是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后

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

1
2
3
4

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

[2] 资源引入

1. 保证 favicon 可访问

<link rel="shortcut icon" href="favicon.ico">

1

<link rel="shortcut icon" href="favicon.ico">

2. 引入 CSS 和 JavaScript 时无须指明 type 属性

3. 引入 CSS 时，必须指明 rel="stylesheet"

<link rel="stylesheet" href="page.css">

1

<link rel="stylesheet" href="page.css">

4. 使用 link 将 CSS 文件引入，并置于 head 中；使用 script 将 JS 文件引入，并置于 body 底部

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

这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求，是否使用 protocol-relative URL 应充分考虑页面针对的环境。

<script src="http://s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

1

<script src="http://s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

[3] 结构优化

1. 尽量遵循 HTML 标准和语义，但不要以牺牲实用性为代价。

任何时候都要尽量使用最少的标签并保持最小的复杂度

2. 结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写 HTML 结构。

有时为了便于搜索引擎抓取，也会将重要内容在 HTML 结构顺序上提前

3. 结构、表现、行为三者分离，避免内联

4. 每一个块级元素都另起一行，每一行都使用 Tab 缩进对齐（ head 和 body 的子元素不需要缩进）。

删除冗余的行尾空格

5. 对于内容较为简单的表格，建议将 tr 写成单行

6. 可以在大的模块之间用空行隔开，使模块更清晰

[4] 语义化

浏览器会根据标签的语义给定一个默认的样式。

判断网页标签语义化是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

1. 尽可能少地使用无语义标签 span 和 div

2. 在语义不明显，既可以使用 p，也可以使用 div 的地方，尽量用 p

3. 在既可以使用 div，也可以使用 section 的地方，尽量用 section

4. 不要使用纯样式标签，如 b、u 等，而改用 CSS 设置

代码风格

[1] 缩进

使用 2 个空格代替 1 个 Tab（大多数编辑器中，都可以设置）

<ul> <li>first</li> <li>second</li> </ul>

1
2
3
4

<ul>
<li>first</li>
<li>second</li>
</ul>

[2] 命名

1. class 必须单词全字母小写，单词间以 - 分隔

2. class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名

 <div class="sidebar"></div>  <div class="left"></div>

1
2
3
4


<div class="sidebar"></div>

<div class="left"></div>

3. 同一页面，应避免使用相同的 name 与 id

因为 IE7- 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。

[3] 标签

1. 标签名必须使用小写字母

2. 对于无需自闭合的标签，不需要自闭合

3. 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签

4. HTML 标签的使用应该遵循标签的语义，且要符合标签嵌套规则

 <p>Hello StyleGuide!</p>  <P>Hello StyleGuide!</P>  <input type="text" name="title">  <input type="text" name="title" />  <ul> <li>first</li> <li>second</li> </ul>  <ul> <li>first <li>second </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


<p>Hello StyleGuide!</p>

<P>Hello StyleGuide!</P>


<input type="text" name="title">

<input type="text" name="title" />


<ul>
    <li>first</li>
    <li>second</li>
</ul>

<ul>
    <li>first
    <li>second
</ul>

[4] 注释

1. 采用类似标签闭合的写法，与 HTML 统一格式；注释文案两头空格，与 CSS 注释统一格式

2. 开始注释：（文案两头空格）

3. 结束注释：（文案前加 “/” 符号，类似标签的闭合）

4. 允许只有开始注释

 <div class="g-hd">  <h1 class="m-logo"><a href="#">LOGO</a></h1>   <ul class="m-nav"> <li><a href="#">NAV1</a></li> <li><a href="#">NAV2</a></li>  </ul>  </div> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14


<div class="g-hd">
    
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    
    
    <ul class="m-nav">
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        
    </ul>
    
</div>

[5] 属性及其顺序

1. 属性和值全部小写

2. 属性值必须用双引号包围

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

4. 自定义属性建议以 xxx- 为前缀，推荐使用 data-

5. 可以省略 style 标签和 script 标签的 type 属性

 <table cellspacing="0">...</table>  <table cellSpacing="0">...</table>  <script src="esl.js"></script>  <script src='esl.js'></script> <script src=esl.js></script>

1
2
3
4
5
6
7
8
9
10


<table cellspacing="0">...</table>

<table cellSpacing="0">...</table>


<script src="esl.js"></script>

<script src='esl.js'></script>
<script src=esl.js></script>

6. HTML 中，属性应该按照特定的顺序出现以保证易读性

id class name data-xxx src, for, type, href title, alt aria-xxx, role

1
2
3
4
5
6
7

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

特殊元素

[1] 图片

1. 禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面

2. 为图片添加 alt 属性，提高图片加载失败时的用户体验

3. 避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸

4. 为图片添加 width 和 height 属性，以避免页面抖动

<img src="#" alt="#" width="#" height="#">

1

<img src="#" alt="#" width="#" height="#">

5. 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载；

无下载需求的图片，比如：icon（建议：字体图标）、背景、代码使用的图片等，尽可能采用 CSS 背景图实现

[2] 表单

1. 有文本标题的控件，使用 label 标签将其与其标题相关联。

//最好将控件置于 <span class="crayon-i">label</span> 内，以减少不必要的 <span class="crayon-v">id</span> <label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

1
2

//最好将控件置于 <span class="crayon-i">label</span> 内，以减少不必要的 <span class="crayon-v">id</span>
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

2. 使用 button 元素时，必须指明 type 属性值。

因为 button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。

<button type="submit">提交</button> <button type="button">取消</button>

1
2

<button type="submit">提交</button>
<button type="button">取消</button>

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

<input type="date">

1

<input type="date">

[3] 多媒体

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

并使用退化到插件的方式来对多浏览器进行支持

<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> <video width="100" height="50" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <object width="100" height="50" data="video.mp4"> <embed width="100" height="50" src="video.swf"> </object> </video>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

   <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>

   <video width="100" height="50" controls>
       <source src="video.mp4" type="video/mp4">
       <source src="video.ogg" type="video/ogg">
       <object width="100" height="50" data="video.mp4">
           <embed width="100" height="50" src="video.swf">
       </object>
   </video>

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