基本原则：内容（DOM）、样式（CSS）、行为（JS）代码分离。
使用HTML5的DOCTYPE声明
<!DOCTYPE html>
，目前IE6，IE7还不认识，所以会以标准模式渲染页面。但是在其他浏览器下，在图文混排时图片下方会出现间隔空隙。
解决办法：
img {
vertical-align: bottom;
}
页面显示字符集
使用HTML5的简写方式：
<meta charset="utf-8" />
遵循xhtml 1.0规则
这里只是为了编写HTML代码时，统一规范而已，在HTML5中已经不需要这样严格了，但是我们还是要规范下比较好。
- 所有标签必须结束；
- 所有标签必须小写；
- 标签属性都必须用引号引起来（单引号或双引号）；
- 标签属性必须有值：
<select>
<option selected="selected"></option>
</select>
<input type="checkbox" checked="checked" />
- 所有特殊符号必须转义。
合理使用标签
- 标签合理嵌套：a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p；
-
严禁多div症、多span症、多table症，正确使用标签表示DOM结构，在文档没有css的条件下，任然具有结构和可读性：
- h1~h6：文章标题、内容区块标题
- p：文本段落
- strong/em：强调文本
- dl：包括标题和内容简介的区块
- ul：无序列表
- ol：有序列表
- img：图像，必须加上alt属性来表示图像代替文本，背景和按钮不要使用该标签，请使用css处理。
- table：数据网格，规则的分栏布局，必须显性定宽和定高
-
表单结构
- 使用fieldset做字段分类；
- 使用legend表示分类标题；
- 使用label表示字段文本，添加必要的for属性。
- 严禁使用已在xhtml 1.0中移除的用于表示样式的标签：s、i、b、font
规范命名
- id： 连接符命名法“hello-world”
- class: 连接符命名法“hello-world”
- name： 骆驼式命名法“helloWorld”
| 元素类型 | 前缀缩写 |
|---|---|
| label | lbl |
| text | txt |
| password | txt |
| textarea | txt |
| file | txt |
| radio | rad |
| checkbox | chk |
| submit | btn |
| reset | btn |
| button | btn |
| hidden | hid |
| 模块类型 | ID名称 |
|---|---|
| 主容器 | main |
| 页头 | header |
| 页脚 | footer |
| 内容区域 | content |
| 主导航 | main-nav |
| 二级导航 | sub-nav |
| LOGO | logo |
结构内部子元素id命名：父元素id的头字母 + 第几个子元素编号（从1开始） + （可选）当前元素在父容器中的显示位置（上/右/下/左）“t/r/b/l” + （可选）当前元素在父容器中为第几个子元素（从1开始），比如，内容区域id=”content”的子元素：c-1，c-2，c-3，c-4-t，c-4-r-1，c-4-b-2，c-4-l-3...
class命名：按功能命名，用连接符分割单词，单词要有语义，可以自解释，不要使用缩写，除非一看就能理解。
name命名：表单元素name名称为去掉该元素id的前缀，然后用id后面的单词，去掉分割符，使用骆骆式命名链接各单词，比如id=”txt-id-card”，那么name=”idCard”。