Web前端开发规范
参考手册
一、规范目的
1.1 概述
为提高团队协作效率，便于后台人员添加功能，及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改。
1.2 基本准则
符合web标准，语义化HTML，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
二、规范细则
2.1 文件命名规则
文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符。命名原则的指导思想：
? 一是使得工作组的每一个成员能够方便的理解每一个文件的意义。
? 二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一
起，以便查找、修改、替换、计算负载量等等操作。
1. HTML命名原则
? 引导文件统一使用index.htm、index.html、ndex.asp文件名（小写）。
? 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：
? 关于我们 \\ aboutus ? 信息反馈 \\ feedback ? 产 品 \\ product
? 如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音
的首字母表示；每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm、index.html、index.asp。
2. 图片命名原则
? 图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。例如：
广告、标志、菜单、按钮等。
? 放置在页面顶部的广告、装饰图案等长方形的图片取名：banner。 ? 标志性的图片取名：logo。
? 在页面上位置不固定并且带有链接的小图片取名：button 。
? 在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu。 ? 装饰用的照片取名：pic。
? 不带链接表示标题的图片取名：title。 例如：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
? 鼠标感应效果图片命名规范为\图片名+_+on/off\。 例如：
menu1_on.gif menu1_off.gif 3. Javascript命名原则
例如：
? 广告条的javascript文件名为 ad.js ? 弹出窗口的javascript文件名为 pop.js 4. 动态语言文件命名原则
以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。例如： register_form.asp register_post.asp topic_lock.asp
2.2 文件存放位置规范
HTML、CSS、js、images文件均归档至<系统开发规范>约定的目录中。 _Root cn en flash images imagestudio 存放中文HTML文件 存放英文HTML文件 存放Flash文件 存放图片文件 存放PSD源文件 flashstudio inc library media project temp js css 存放flash源文件 存放include文件 存放DW库文件 存放多媒体文件 存放工程项目资料 存放客户原始资料 存放JavaScript脚本 存放CSS文件 2.3 CSS 书写规范
CSS书写规范主要目的：提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用。
1. 基本原则
CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。
? 自定义样式：为设计师自定义的新 CSS 样式，影响使用本样式的区域，用于完成
网页中局部的样式设定。样式名：“.”+“相应样式效果描述的单词或缩写”。例如：“ .shadow ” 文字样式名：“.no”+“字号”+“行距”+“颜色缩写”。例如：“ .no12 ” 、“ .no12-24 ”。 ? 重新定义HTML样式：为设计师重新定义已有的HTML标签样式，影响全部的被
设定标签样式，用于统一网页中某一标签的样式定义。样式名：“HTML标签”。例如：hr { border: 1px dotted #333333 }。 ? 链接状态样式：为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中
的链接。
该样式写法有2种： a.nav:link、nav.a:link。第一种只能修饰标签中；第二种可以修饰所有包含有标签的其他标签。
页面内的样式加载必须用链接方式：
2. 应用说明
? 编码统一为utf-8，都用小写。
? class与id的使用：一般都使用class。特殊除外，因id的优先级比class的高。 ? 样式命名推荐使用英文，避免使用汉语拼音，尽量使用简易的单词组合。命名方式
采用驼峰命名法和划线命名法两种，提高可读性。例如： dropMenu、subNavMenu、drop-menu、sub_nav_menu 驼峰命名法用来区别不同的单词。 划线命名法表明从属关系。例如：“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。
? CSS属性书写顺序，建议遵循：布局定位属性–>自身属性–>文本属性–>其他属性。
此条可根据习惯书写，但尽量保证同类属性写在一起。