前端开发基础资料 质量保证

Web 前端开发规范手册

一、规范目的

1.1 概述 ..................................................................................................................................... 1

二、文件规范

2.1 文件命名规则.........................................................................................................................1

2.2 文件存放位置..........................................................................................................................2

2.3 css 书写规范..........................................................................................................................3

2.4 html 书写规范.........................................................................................................................7

2.5 JavaScript 书写规范.............................................................................................................11

本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地

方请及时提出, 经讨论决定后可以更改此文档.

二、文件规范

2.1 文件命名规则

文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名

原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在

文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、

计算负载量等等操作。

a. HTML 的命名原则

引文件统一使用 index.htm index.html index.asp 文件名（小写）

b. 图片的命名原则

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质

例如：广告、标志、菜单、按钮等等。

放置在页面顶部的广告、装饰图案等长方形的图片取名： banner

标志性的图片取名为： logo

在页面上位置不固定并且带有链接的小图片我们取名为 button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu

装饰用的照片我们取名： pic

不带链接表示标题的图片我们取名： title

范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif

范例：register_form.asp register_post.asp topic_lock.asp

2.2 文件存放位置规范

2.3 CSS 书写规范

基本原则：

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

1. 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样

式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”

文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ”

2. 义 HTML 样式为设计师重新定义已有的 HTML 标签样式，影响全部的被设定标签样式，用于统一网页

中某一标签的样式定义。样式名“HTML 标签”例：hr { border: 1px dotted #333333 }

3. 态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。

该样式写法有 2 种： a.nav:link nav.a:link 第一种只能修饰<a>标签中；第二种可以修饰所有包

2. class 与 id 的使用: id 是唯一的并是父级的, class 是可以重复的并是子级的, 所以 id 仅使用在大的模

4. class 与 id 命名: 大的框架命名比如 header/footer/wrapper/left/right 之类的在 2 中由 i 统一命名.

其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如 i_comment, fontred, width200; 避免使用中文

拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

5. 规避 class 与 id 命名(此条重要, 若有不明白请及时与 i 沟通):

a, 通过从属写法规避, 示例见 d;

b, 取父级元素 id/class 命名部分命名, 示例见 d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如 i_clear;

d, a,b 两 条 , 适 用 于 在 2 中 已 建 好 框 架 的 页 面 , 如 , 要 在 2 中 已 建 好 框 架 的 页 面 代 码 <div

id="mainnav"></div>中加入新的 div 元素,

按 a 命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,

样式写法: #mainnav .firstnav{.......}

按 b 命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,

7. 书写代码前, 考虑并提高样式重复使用率;

8. 充分利用 html 自身属性及样式继承原理减少代码量, 比如:

<ul class="list"><li>这儿是标题列表<span>2010-09-15</span></ul>

定义 ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示

9. 样式表中中文字体名, 请务必转码成 unicode 码, 以避免编码错误时乱码;

10. 背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发, sprite 按模块制作;

11. 使用 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;} table th, table td{padding:0;} , base.css 文件中

我会初始化表格样式)

果, 请为 ie6 单独定义背景:

头：header

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

标志：logo

广告：banner

页面主体：main

热点：hot

下载：download

子导航：subnav

菜单：menu

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title