规范目的：
为提高团队协作效率,
便于后台人员添加功能及前端后期优化维护,
输出高质量且统一的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。
基本准则：
符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
主要内容：（1）
文件规范，文件位置及命名（2）Html
规范，书写规范及注意事项（3）CSS
规范，书写规范及注意事项
规范内容：
一、文件规范
1. html, css, img
文件均归档至<系统开发规范>
约定的目录中；
2. html
文件命名:
英文命名,
后缀.htm。
同时保存好相应的设计稿放于同目录中,若界面稿命名为中文,请重命名与html文件同名,以方便后端开发人员添加功能时查找对应页面；
3. css文件命名:英文命名,后缀.css.共用core.css,
首页
index.css,
其他页面依实际
模块需求命名。
二、
html
书写规范1.文档类型声明及编码:
统一为
html5
声明类型，写法如下：
编码统一为
utf-8，写法如下：-8″ />书写时利用
IDE
实现层次分明的缩进。
2.
css文件如无特殊情况，应链接至网页头部...标签内
...
标签之后。
3.
引入外部
css文件时，应去除类型声明，写法如下：
...4. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成；且所有标签必须闭合： 包括br (), hr()，,属性值必须用双引号包括,写法如下：
5. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等； 需要为 html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置
6. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1,h1用于logo), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素； h1请使用在logo上，h2-h6 应用在各级标题上。
7. 尽可能减少div嵌套 书写示例： 不合理代码如下：欢迎访问q齐家网, 您的用户名是用户名 正确写法如下：欢迎访问XXX, 您的用户名是用户名
8. 书写链接地址时, 必须避免重定向，请在URL地址后面加上“/”，书写示例： href=”http://www.tg.com.cn/”
9. 在页面中尽量避免使用style属性，即： style="..."
10. 必须为含有描述性表单元素(input, textarea)添加label，书写示例：
不合理代码如下：
姓名:
正确写法如下：
姓名:
11. 能以背景形式呈现的图片, 尽量写入css样式中。 12. 重要图片必须加上alt属性以及height,width属性，避免图片加载失败而导致错位，书写示例：给重要的元素和截断的元素加上title
13. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能。
14. 特殊符号使用: 尽可能使用代码替代，书写示例： > > 空格
15. 书写页面过程中, 请考虑向后扩展性。
16. class和id的书写规范请参考css部分
二、CSS书写规范
1. 编码统一为utf-8。
2. 协作开发及分工:共用css文件core.css 暂时由tech yjbao负责维护。
协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;
3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中。
4. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在core中将由yjbao统一命名
其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如q_comment, 避免使用中文拼音, 尽量使用简易的单词组合； 命名要语义化, 简明化。
5. 规避class与id命名相同
6. 为JavaScript预留钩子的命名, 请尽量以 js_ 起始, 比如: js_hide, js_show。
网友评论