文档介绍：WEB前端开发规范
基本原则
* 遵循内容(HTML)、显示(CSS)、行为(JavaScript)分离的代码组织模式
* 代码格式化,保持干净整洁
HTML部分
添加必须的utf-8的字符集,并且使用HTML5的简洁方式:
<meta charset="utf-8" />
遵循xhtml :
所有标签必须结束
所有标签必须小写
标签属性必须使用成对引号(单引号或双引号)
标签属性必须有值:
<select>
<option selected="selected"></option>
</select>
<input type="checkbox" checked="checked" />
所有特殊符号必须转义(&、<、>、©、»…)
标签属性命名规范
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命名
主容器: main
页头: header
页脚: footer
内容区域: content
LOGO: logo
主导航: main-nav
二级导航: sub-nav
name命名
一般用于表单元素,根据当前元素id属性值命名,去掉id属性值的前缀和所有连接符,使用骆骆式命名法命名,例如
id=”txt-id-card”,那么name=”idCard”。
合理使用标签,语义化结构
标签合理嵌套
a、span、strong、em、p、h1~h6等元素不能包含:div、ul、ol、dl、p
严禁多div症、多span症、多table症,正确使用标签表现DOM结构,在文档去除css的情况下,任然具有结构和可读性,以下是html标记的使用规范:
p:文本段落;
dl:定义列表,可包括标题和内容简介的列表;
ul:无序列表;
ol:有序列表;
h1~h6:文章标题、内容区块标题,根据重要性由大到小区分,h1一个页面只出现一次;
strong/em:强调文本;
img:图像,必须加上alt属性,当图像无法显示时,可表示图像信息,背景和按钮使用css处理,不使用img元素;
table:数据网格,规则的分栏布局,尽可能显性的定宽和定高。
合理化表单结构
使用fieldset元素包裹相同类别的字段;
使用legend元素表示字段类别名称;
使用label表示字段文本,添加必要的for属性,以在点击字段文本时,文本框能获得焦点;
文本框不使用size属性定义宽度,而使用css的width属性;
添加maxlength属性限制输入字符的长度。
严禁使用已在xhtml :
s、i、b、font
控制页面默认显示状态
使用js来控制和切换显示的区块、导航、tab,必须先用css处理DOM默认显示状态