一、规范目的
为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发，本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。
在规范的框框下，我们就可以一心一意写代码了，不用太担心后期维护问题，及代码风格问题了。
二、基本准则
1、符合web标准,语义化html,遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式；
2、代码格式化，保持干净整洁；
3、html 换行时必须缩进一个tab；
4、编写所有前台页面时，应尽量遵循相同的页面代码结构；
5、每一个页面都必须有一个独立的css，js文件（base.css 或 base.js 类似这样的文件除外）；
6、如果不是用HTML5编写的网站，请用IE7，IE8，IE9，火狐，谷歌，webkit，safari内核进行测试兼容性；
7、如果是HTML5编写的网站，请用IE9，火狐，谷歌，webkit，safari内核进行测试兼容性。
三、文件规范
1、html,css,js,images文件均归档至《系统开发规范》约定的目录中；
2、html文件命名，英文命名，后缀.htm，同时将对应界面稿放于同目录中,若界面稿命名为中文,请重命名与html文件同名,以方便后端添加功能时查找对应页面；
3、css文件命名，英文命名，后缀.css，共用base.css,首页index.css,其他页面依实际模块需求命名；
4、Js文件命名，英文命名，后缀.js，共用common.js,其他依实际模块需求命名。
四、HTML书写规范
1、所有元素都必须小写，属性也是，如：
<inputtype=”text”id=”idName”/>正确
<INPUTTYPE=”text”ID=”idName”/>错误；
2、元素必须成对出现，如<span>必须写成<span></span>特殊元素除外，
如：<br/><hr/><img/><input/>
3、标签中不允许出现样式，必须用class来声明样式，如：
<inputtype=”text”id=”idName”style=”text-align:right;”/>错误
<inputtype=”text”id=”idName”class=”class-name”/>正确
4、属性id命名必须是驼峰式命名如：
<inputtype=”text”id=”idName”/>正确
<inputtype=”text”id=”idname”/>错误
<inputtype=”text”id=”id-name”/>错误
5、属性class命名规范是：元素简写+“-”+功能名，如：
<buttoncalss=”btn-save”></button>正确
<buttoncalss=”btnSave”></button>错误
<buttoncalss=”save”></button>错误
6、属性name命名必须遵循驼峰式命名法。
<inputtype=”text”name=”idName”/>正确
<inputtype=”text”name=”idname”/>错误
<inputtype=”text”name=”id-name”/>错误
7、属性必须有值：
<inputtype=”checkbox”checked=”checked”/>正确
8、属性值必须用双引号，不允许使用单引号。
<inputtype=”checkbox”checked=”checked”/>正确
<inputtype=’checkbox’checked=’checked’/>错误
如果元素需要自定义属性，请用data-xxx方式命名。严禁使用已在XHTML1.0中已移除的标签，如：s，i，b，font等
五、HTML其他规范
1、文档类型声明及编码，统一为html5声明类型<!DOCTYPEhtml>
编码统一为<metacharset="UTF-8"/>，书写时利用IDE实现层次分明的缩进；
2、非特殊情况下样式文件必须外链至<head>与</head>之间
非特殊情况下JavaScript文件必须外链至页面底部，</body>之前；
3、引入样式文件或JavaScript文件时,须略去默认类型声明,如下:
<linkhref="/Public/Home/Css/base.css"rel="stylesheet"/>
<scriptsrc="/Public/Home/Js/common.js"></script>；
4、引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js
引入插件,文件名格式为库名称+插件名称，比如jQuery.cookie.js；
5、所有编码均遵循xhtml标准,且所有标签必须闭合,包括br(<br/>),hr(<hr/>)，
属性值必须用双引号包括；
6、充分利用无兼容性问题的html自身标签,，比如span,em,strong,optgroup,label，等等;
需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去
设置，如果没有，可以使用须以“data-”为前缀来添加自定义属性，避免使用“data:”
等其他命名方式；
7、语义化html，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表用
ul，内联元素中不可嵌套块级元素；
8、尽可能减少div嵌套，如<divclass="box"><divclass="welcome">欢迎访问XXX,您的用户名
是<divclass="name">用户名</div></div></div>完全可以用以下代码
替代:<divclass="box"><p>欢迎访问XXX,您的用户名是<span>用户名</span></p></div>；
9、书写链接地址时，必须避免重定向，例如：href="/",即须在URL地址
后面加上“/”；
10、在页面中尽量避免使用style属性,即style=""；
11、必须为含有描述性表单元素(input,textarea)添加label，如
<p>姓名:<inputtype="text"id="name"name="name"/></p>须写成:
<p><labelfor="name">姓名:</label><inputtype="text"id="name"/></p>
12、能以背景形式呈现的图片，尽量写入css样式中；
13、重要图片必须加上alt属性，给重要的元素和截断的元素加上title；
14、给区块代码及重要功能(比如循环)加上注释，方便后台添加功能；
15、特殊符号使用，尽可能使用代码替代，比如<(<)&>(>)&空格()&»(»)等等；
16、书写页面过程中,请考虑向后扩展性。
六、CSS书写规范
1、元素尽量使用class选择器匹配，对于特殊功能可以考虑使用ID选择器；
2、明确各选择器的优先级，作用范围；
3、CSS写完之后必须使用“;”号结尾，虽然浏览器支持不用分号结尾，但是不建议这么做；
4、除非编写HTML5页面，否则不允许使用CSS3伪类，如:nth-child(1)等伪类，禁止使用；
5、编写CSS样式时，不允许换行，样式必须一行写完，自动换行除外；
6、对于子元素样式采用链选择器进行选择，如:btn-savediv；
7、元素选择器只能在定义全局CSS和子元素匹配时使用（尽量少用），其他地方禁止使用；
8、请记住IE浏览器的hack方式，如下
IE6=_width:100px;IE7=*width:100px;IE8=width:100px\9;
IE8/9=width:100px\0;IE9=width:100px\9\0；
9、编码统一为UTF-8；
10、css属性书写顺序,，建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性，
此条可根据自身习惯书写，但尽量保证同类属性写在一起；
11、书写代码前，考虑并提高样式重复使用率；
12、充分利用html自身属性及样式继承原理减少代码量，比如:
<ulclass="list"><li>这儿是标题列表<span>-09-15</span></li></ul>，样式
ul:listli{position:relative}ul:listlispan{position:absolute;right:0}可居右显示；
13、样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码；
14、使用table标签时(尽量避免使用table属性)，
请不要用width/height/cellspacing/cellpadding等table属性直接定义表现，
应尽可能的利用table自身私有属性分离结构与表现,如
Thead、tr、th、td、tbody、tfoot、colgroup、scope，
cellspaing及cellpadding的css控制方法:
table{border:0;margin:0;border-collapse:collapse;}tableth，tabletd{padding:0;}，
base.css文件中我会初始化表格样式；
15、杜绝使用<metahttp-equiv="X-UA-Compatible"content="IE=7"/>兼容ie8；
16、避免存在兼容性属性的使用，比如text-shadow或者css3的相关属性；
17、减少使用影响性能的属性，比如position:absolute或者float；
18、必须为大区块样式添加注释,小区块适量注释；
七、JavaScript书写规范
1、JS必须使用外部文件方式加载；
2、JS引入代码必须集中放置在页面最底部</body>之前，
严禁在<head></header>之间引入JS，特殊情况除外；
3、JS变量命名请使用驼峰式命名法；
4、JS变量严禁使用“不明觉厉”的命名方法，如：vara;varb；
5、每一个函数与事件监听都必须有注释，声明其作用，
如果代码过长，那么请对一个功能模块进行注释；
6、JS函数命名必须使用驼峰式命名；
7、JS函数严禁使用“不明觉厉”的命名方法，如：functiona(){}；
8、JS代码换行时，必须使用缩进。
八、jQuery部分
1、使用jQuery选择器如果是唯一的，请使用ID选择器；
2、使用class选择器时，在class前加上标签名，如：
$(“div.class”)正确，$(“.class”)错误；
3、尽量使用ID选择器代替class选择器；
4、如果一个变量存放的是jQuery对象的话，那么请用”$”符号开头，
声明这是一个jQuery对象；
5、避免使用live()函数绑定事件，可以使用bind()和on()代替，例如
$(document).on(“click”,”#id”,function(){})；
6、把可能会影响页面加载速度的代码绑定到$(window).load()事件中，
如动画，视觉特效等代码。
九、图片规范
1、所有页面元素类图片均放入images文件夹，测试用图片放于images/demoimg文件夹；
2、图片格式仅限于gif或png或jpg；
3、命名全部用小写英文字母|| 数字|| _的组合，
其中不得包含汉字||空格||特殊字符，尽量用易懂的词汇，便于团队其他成员理解。
另，命名分头尾两部分，用下划线隔开，比如ad_left01.gif||btn_submit.gif；
4、在保证视觉效果的情况下选择最小的图片格式与图片质量，以减少加载时间；
5、尽量避免使用半透明的png图片(若使用，请参考css规范相关说明)。
十、注释规范
1、html注释格式<!--这儿是注释-->,'--'只能在注释的始末位置，不可置入注释文字区域；
2、css注释格式/**这儿是注释**/；
3、JavaScript单行注释用//这儿是单行注释，多行注释用/**这儿有多行注释**/。
十一、开发及测试工具约定
建议使用Aptana||Dw||Vim|| HBuilder，亦可根据自己喜好选择,但须遵循如下原则。
1、不可利用IDE的视图模式'画'代码；
2、不可利用IDE生成相关功能代码，比如Dw内置的一些功能js；
3、编码必须格式化，比如缩进。
建议测试顺序FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari
前期开发仅测试FireFox&IE6&IE7&IE8
后期优化时加入Opera&Chrome&Safari;IETabPlus插件
十二、其他规范
1、开发过程中严格按分工完成页面，以提高css复用率，避免重复开发；
2、减小沉冗代码,书写所有人都可以看的懂的代码；
3、严禁修改任何第三方插件的核心文件。
