一、规范目的：
为提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构，有利于SEO优化。
二、规范基本准则：
符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良，页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。
三、 文件规范：
html、css、js、images文件均归档至约定的目录中，统一使用utf-8编码。
1. HTML
（1）语义化：语义化html，正确使用标签，充分利用无兼容性问题的html自身标签。
（2）文件命名：命名以中文命名，如同一页面以”WPCMS综合门户网站-首页“来组合命名，以方便添加功能时查找对应页面。
（3）在head标签内引入css文件，有助于页面渲染，页脚引入javascript文件
（4）尽可能减少div嵌套，如：根据重要性使用h1-6标签，段落使用p，列表使用ul，内联元素中不可嵌套块级元素。
（5）图片：
能以背景形式呈现的图片，尽量写入css样式中
区分作为内容的图片和作为背景的图片，作为背景的图片采用Css sprite技术，放在一张大图里
重要图片必须加上alt属性，给重要的元素和截断的元素加上title
（6）注释：给区块代码及重要功能加上注释，方便后台添加功能
（7）转义字符：特殊符号使用转义字符
（8）页面架构时考虑扩展性
2. CSS
（1）页面内部尽量避免使用style属性
（2）css放在head标签中，由link标签引入，使页面的结构与表现分离
（3）Class与id的使用：
减小权重：写样式时避免使用ID，全部由class实现，减少级联
命名：以小写英文字母、数字、下划线组合命名，尽量使用简易的单词组合，采用驼峰命名法和划线命名法，提高可读性，如：dropMenu、sub_nav_menu、drop-menu等。
（4）书写代码前，考虑样式重复利用率，充分利用html自身属性及样式继承原理减少代码量，代码建议单行书写，利于后期管理
（5）图片：
命名：小写英文字母、数字、_ 的组合，使用有意义的名称或英文简写，最好不要使用汉语拼音，区分大写字。
使用sprite技术， 减小http请求，sprite按模块制作，保存sprite的psd文件，便于后期的维护修改
（6）书写顺序：保证同类型属性写在一起，一般遵循显示属性–>布局定位属性–>盒模型属性–>文本属性–>其他属性的书写风格
显示属性（比如：display）
定位属性（比如：position， float， clear， visibility， table-layout等）
盒模型属性（比如：width， height， padding，border，margin 等）
文本属性（比如：font， line-height， text-align， text-indent， vertical-align等）
其他属性（比如：color， background， opacity， cursor，content， list-style， quotes等）
（7）缩进：统一使用tab进行缩进
（8）样式表中中文字体名，最好转成unicode码，如黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei），以避免编码错误时乱码
（9）减少影响性能的属性，如：position，float
（10）为大区块样式添加注释，小区块适量注释
3. Javascript
（1） 书写时， 每行代码结束必须有分号‘;’，尽量根据需求编写原生代码开发，以避免造成的代码污染(沉冗代码 || 与现有代码冲突 || …)等问题
（2）在页脚引入javascript脚本，采用外链引入形式，使页面的结构与行为分离
（3）命名：
变量命名：驼峰式命名，原生JavaScript变量要求是纯英文字母， 首字母须小写， 如iTaoLun。变量集中声明， 避免全局变量
类命名：首字母大写， 驼峰式命名. 如 ITaoLun
函数命名: 首字母小写驼峰式命名. 如iTaoLun()
命名语义化，尽可能利用英文单词或其缩写
（4）规则：
尽量避免使用存在兼容性及消耗资源的方法或属性
后期优化中， JavaScript非注释类中文字符须转换成unicode编码使用， 以避免编码错误时乱码显示
代码结构明了， 加适量注释. 提高函数重用率
注重与html分离， 减小reflow， 注重性能
4. 注释规范
（1）html：注释格式<!--这儿是注释-->，”-”只能在注释的始末位置，不可置入注释文字区域
（2）Css：注释格式/*这儿是注释*/
（3）Javascript：单行注释：//这儿是注释；多行注释：/*这儿是注释*/
5. CSS Hack 特殊符号
（1）尽量避免使用CSS Hack
（2）* ：IE6/7都能识别*，标准浏览器不识别
（3）_：只有IE6识别
（4）！Important：IE6不识别，Firefox，IE7/8/9、chorme等主流浏览器均识别
（5）\9：所有浏览器均识别，包括IE6/7/8
（6）+：IE6/7/8识别
（7）书写顺序：先写FF等非IE浏览器所需样式，其次IE8，再次IE7，最后写IE6