文档介绍：HTML代码书写规范指南
通用约定
标签
自闭合(self-closing)标签,无需闭合( 例如: img input br hr 等);
可选的闭合标签(closing tag),需闭合( 例如:</li 或</body);
尽量减少标签数量;
XML/HTML Code
1.<img src=“images/” alt=“Google” 
2.<input type=“text” name=“title” 
3.  
4.<ul  
5.  <liStyle</li  
6.  <liGuide</li  
7.</ul  
8.  
9.<!-- Not mended --  
10.<span class=“avatar” 
11.  <img src=“...” 
12.</span  
13.  
14.<!-- mended --  
15.<img class=“avatar” src=“...” 
Class 与 ID
class 应以功能或内容命名,不以表现形式命名;
class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔;
使用唯一的 id 作为 Javascript hook,同时避免创建无样式信息的 class;
XML/HTML Code
1.<!-- Not mended --  
2.<div class=“j-hook left contentWrapper”</div  
3.  
4.<!-- mended --  
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
XML/HTML Code
1.<a id=“...” class=“...” data-modal=“toggle” href=“###”</a  
2.  
3.<input class=“form-control” type=“text” 
4.  
5.<img src=“...” alt=“...” 
引号
属性的定义,统一使用双引号。
XML/HTML Code
1.<!-- Not mended --  
2.<span id=‘j-hook’ class=textGoogle</span  
3.  
4.<!-- mended --  
5.<span id=“j-hook” class=“text”Google</span  
b嵌套
a 不允许嵌套 div 这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如 a 不允许嵌套 a。
严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。
语义嵌套约束
<li 用于<ul 或<ol 下;
<dd,<dt 用于<dl 下;
<thead,<tbody,<tfoot,<tr,<td 用于<table下;
严格嵌套约束
inline-Level 元素,仅可以包含文本或其它 inline-Level 元素;
<a 里不可以嵌套交互式元素<a、<button、<select等;
<p里不可以嵌套块级元素<div、<h1~<h6、<p、<ul/<ol/<li、<dl/<dt/<dd、<form等。
布尔值属性
HTML5 规范中 disabled、checked、sel