Web前端开发规范参考手册

 一、规范目的

1.1  概述

为提高团队协作效率，便于后台人员添加功能，及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后可以更改。

1.2  基本准则

符合web标准，语义化HTML，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

二、规范细则

2.1  文件命名规则

文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符。命名原则的指导思想：

1. 一是使得工作组的每一个成员能够方便的理解每一个文件的意义。
2. 二是当在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便查找、修改、替换、计算负载量等等操作。

1. HTML命名原则

1. 引导文件统一使用index.htm、index.html、ndex.asp文件名（小写）。
2. 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：

1. 关于我们 \ aboutus
2. 信息反馈 \ feedback
3. 产 品 \ product

1. 如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm、index.html、index.asp。

2. 图片命名原则

1. 图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。例如：广告、标志、菜单、按钮等。
2. 放置在页面顶部的广告、装饰图案等长方形的图片取名：banner。
3. 标志性的图片取名：logo。
4. 在页面上位置不固定并且带有链接的小图片取名：button 。
5. 在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu。
6. 装饰用的照片取名：pic。
7. 不带链接表示标题的图片取名：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

1. 鼠标感应效果图片命名规范为"图片名+_+on/off"。

例如：

menu1_on.gif

menu1_off.gif

3. Javascript命名原则

例如：

1. 广告条的javascript文件名为 ad.js
2. 弹出窗口的javascript文件名为 pop.js

4. 动态语言文件命名原则

以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。例如：

register_form.asp

register_post.asp

topic_lock.asp

2.2  文件存放位置规范

HTML、CSS、js、images文件均归档至<系统开发规范>约定的目录中。

_Root
	cn	存放中文HTML文件
	en	存放英文HTML文件
	flash	存放Flash文件
	images	存放图片文件
	imagestudio	存放PSD源文件
	flashstudio	存放flash源文件
	inc	存放include文件
	library	存放DW库文件
	media	存放多媒体文件
	project	存放工程项目资料
	temp	存放客户原始资料
	js	存放JavaScript脚本
	css	存放CSS文件

2.3  CSS 书写规范

CSS书写规范主要目的：提高效率方便面想关人员的修改，提高网站的扩展性(根据网站情况不一样，要灵活应用。

1. 基本原则

CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。

1. 自定义样式：为设计师自定义的新 CSS 样式，影响使用本样式的区域，用于完成网页中局部的样式设定。样式名：“.”+“相应样式效果描述的单词或缩写”。例如：“ .shadow ”

文字样式名：“.no”+“字号”+“行距”+“颜色缩写”。