HTML代码编写规范和建议-CSDN博客

基本原则：内容（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”

表单元素的id以如下前缀命名
元素类型	前缀缩写
label	lbl
text	txt
password	txt
textarea	txt
file	txt
radio	rad
checkbox	chk
submit	btn
reset	btn
button	btn
hidden	hid

结构布局的元素id命名
模块类型	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”。

转载于:https://www.cnblogs.com/nicolaszhao/archive/2010/04/15/1712796.html