HTML代码书写规范指南

通用约定
标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body>)；
尽量减少标签数量；

1. <img src="images/google.png" alt="Google">  
2. <input type="text" name="title">  
3.   
4. <ul>  
5.   <li>Style</li>  
6.   <li>Guide</li>  
7. </ul>  
8.   
9. <!-- Not recommended -->  
10. <span class="avatar">  
11.   <img src="...">  
12. </span>  
13.   
14. <!-- Recommended -->  
15. <img class="avatar" src="...">  

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class；

1. <!-- Not recommended -->  
2. <div class="j-hook left contentWrapper"></div>  
3.   
4. <!-- Recommended -->  
5. <div id="j-hook" class="sidebar content-wrapper"></div>  

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

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

1. <a id="..." class="..." data-modal="toggle" href="###"></a>  
2.   
3. <input class="form-control" type="text">  
4.   
5. <img src="..." alt="...">  

引号

属性的定义，统一使用双引号。

1. <!-- Not recommended -->  
2. <span id='j-hook' class=text>Google</span>  
3.   
4. <!-- Recommended -->  
5. <span id="j-hook" class="text"&