1 一、规范目的
2
3 1.1 概述
4
5 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档.
6
7 二、文件规范
8
9 2.1 文件命名规则
10
11 文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
12
13 a. HTML的命名原则
14 引文件统一使用index.htm index.html index.asp文件名（小写）
15 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：
16 关于我们 \ aboutus
17 信息反馈 \ feedback
18 产 品 \ product
19
20 如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；
21 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm index.html index.asp；
22
23 b. 图片的命名原则
24
25 图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
26 例如：广告、标志、菜单、按钮等等。
27 放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
28 标志性的图片取名为： logo
29 在页面上位置不固定并且带有链接的小图片我们取名为 button
30 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
31 装饰用的照片我们取名： pic
32 不带链接表示标题的图片我们取名： title
33 范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
34 鼠标感应效果图片命名规范为”图片名+_+on/off”。
35 例如：menu1_on.gif menu1_off.gif
36
37 c. javascript的命名原则
38 例如：广告条的javascript文件名为 ad.js 弹出窗口的javascript文件名为 pop.js
39
40 d. 动态语言文件命名原则
41 以性质_描述，描述可以有多个单词，用“_”隔开，性质一般是该页面得概要。
42 范例：register_form.asp register_post.asp topic_lock.asp
43
44 2.2 文件存放位置规范
45
46 _Root
47 cn 存放中文HTML文件
48 en 存放英文HTML文件
49 flash 存放Flash文件
50 images 存放图片文件
51 imagestudio 存放PSD源文件
52 flashstudio 存放flash源文件
53 inc 存放include文件
54 library 存放DW库文件
55 media 存放多媒体文件
56 project 存放工程项目资料
57 temp 存放客户原始资料
58 js 存放JavaScript脚本
59 css 存放CSS文件
60 2.3 CSS 书写规范
61 基本原则：
62
63 CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。
64
65 1. 样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”
66 文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ”
67
68 2. 义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML标签”例：hr { border: 1px dotted #333333 }
69
70 3. 态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。
71 该样式写法有2种： a.nav:link nav.a:link 第一种只能修饰<a>标签中；第二种可以修饰所有包含有<a>标签的其他标签。
72
73 页面内的样式加载必须用链接方式<link rel=”stylesheet” type=”text/css” href=”style/style.css”>
74
75 注意细则：
76
77 1. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;
78
79 2. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;
80
81 3. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
82
83 4. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
84
85 5. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):
86
87 a, 通过从属写法规避, 示例见d;
88
89 b, 取父级元素id/class命名部分命名, 示例见d;
90
91 c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;
92
93 d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,
94
95 按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,
96
97 样式写法: #mainnav .firstnav{…….}
98
99 按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,
100 样式写法: .main_firstnav{…….}
101
102 6. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的 top,right,bottom,left）、display、visibility、overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.我所列出的这些属性只是最常用到的, 并不代表全部;
103
104 7. 书写代码前, 考虑并提高样式重复使用率;
105
106 8. 充分利用html自身属性及样式继承原理减少代码量, 比如:
107
108 <ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>
109
110 定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}
111
112 即可实现日期居右显示
113
114 9. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
115
116 10. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
117
118 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文件中我会初始化表格样式)
119
120 12. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;
121
122 13. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
123
124 background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
125
126 14. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;
127
128 15. 减少使用影响性能的属性, 比如position:absolute || float ;
129
130 16. 必须为大区块样式添加注释, 小区块适量注释;
131
132 17. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;
133
134
135
136
137
138 命名规则：
139
140 头：header
141
142 内容：content/container
143
144 尾：footer
145
146 导航：nav
147
148 侧栏：sidebar
149
150 栏目：column
151
152 页面外围控制整体布局宽度：wrapper
153
154 左右中：left right center
155
156 登录条：loginbar
157
158 标志：logo
159
160 广告：banner
161
162 页面主体：main
163
164 热点：hot
165
166 新闻：news
167
168 下载：download
169
170 子导航：subnav
171
172 菜单：menu
173
174 子菜单：submenu
175
176 搜索：search
177
178 友情链接：friendlink
179
180 页脚：footer
181
182 版权：copyright
183
184 滚动：scroll
185
186 内容：content
187
188 标签页：tab
189
190 文章列表：list
191
192 提示信息：msg
193
194 小技巧：tips
195
196 栏目标题：title
197
198 加入：joinus
199
200 指南：guild
201
202 服务：service
203
204 注册：regsiter
205
206 状态：status
207
208 投票：vote
209
210 合作伙伴：partner
211
212 (二)注释的写法:
213
214 /* Footer */
215
216 内容区
217
218 /* End Footer */
219
220 (三)id的命名:
221
222 (1)页面结构
223
224 容器: container
225
226 页头：header
227
228 内容：content/container
229
230 页面主体：main
231
232 页尾：footer
233
234 导航：nav
235
236 侧栏：sidebar
237
238 栏目：column
239
240 页面外围控制整体布局宽度：wrapper
241
242 左右中：left right center
243
244
245
246 (2)导航
247
248 导航：nav
249
250 主导航：mainbav
251
252 子导航：subnav
253
254 顶导航：topnav
255
256 边导航：sidebar
257
258 左导航：leftsidebar
259
260 右导航：rightsidebar
261
262 菜单：menu
263
264 子菜单：submenu
265
266 标题: title
267
268 摘要: summary
269
270
271
272 (3)功能
273
274 标志：logo
275
276 广告：banner
277
278 登陆：login
279
280 登录条：loginbar
281
282 注册：regsiter
283
284 搜索：search
285
286 功能区：shop
287
288 标题：title
289
290 加入：joinus
291
292 状态：status
293
294 按钮：btn
295
296 滚动：scroll
297
298 标签页：tab
299
300 文章列表：list
301
302 提示信息：msg
303
304 当前的: current
305
306 小技巧：tips
307
308 图标: icon
309
310 注释：note
311
312 指南：guild
313
314 服务：service
315
316 热点：hot
317
318 新闻：news
319
320 下载：download
321
322 投票：vote
323
324 合作伙伴：partner
325
326 友情链接：link
327
328 版权：copyright\
329
330 基本样式：
331
332 /* CSS Document */
333
334 body {margin:0; padding:0; font:12px “\5B8B\4F53″,san-serif;background:#fff;}
335
336 div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
337
338 table,td,tr,th{font-size:12px;}
339
340 li{list-style-type:none;}
341
342 img{vertical-align:top;border:0;}
343
344 ol,ul {list-style:none;}
345
346 h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
347
348 address,cite,code,em,th {font-weight:normal; font-style:normal;}
349
350 .fB{font-weight:bold;}
351
352 .f12px{font-size:12px;}
353
354 .f14px{font-size:14px;}
355
356 .left{float:left;}
357
358 .right{float:right;}
359
360
361
362 a {color:#2b2b2b; text-decoration:none;}
363
364 a:visited {text-decoration:none;}
365
366 a:hover {color:#ba2636;text-decoration:underline;}
367
368 a:active {color:#ba2636;}
369
370
371
372 重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
373
374
375
376 不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt 和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
377
378
379
380
381
382 2.4 html 书写规范
383
384 1. 网页制作细节 —- head区代码规范
385
386 head区是指HTML代码的<head>和</head>之间的内容。
387
388 必须加入的标签
389
390 a) 公司版权注释 <!— The site is designed by EHM,Inc 07/2005 —>
391
392 b) 网页显示字符集
393
394 简体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
395
396 繁体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″>
397
398 英 语：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″>
399
400 c) 网页制作者信息 <META name=”author” content=”webmaster@maketown.com”>
401
402 d) 网站简介 <META NAME=”DESCRIPTION” CONTENT=”xxxxxxxxxxxxxxxxxxxxxxxxxx”>
403
404 e) 搜索关键字 <META NAME=”keywords” CONTENT=”xxxx,xxxx,xxx,xxxxx,xxxx,”>
405
406 f) 网页的css规范 <LINK href=”../css/style.css” rel=”stylesheet” type=”text/css”>
407
408 g) 网页标题 <title>xxxxxxxxxxxxxxxxxx</title>
409
410 可以选择加入的标签
411
412 a) 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
413
414 <META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08：21：57 GMT”>
415
416 b) 禁止浏览器从本地机的缓存中调阅页面内容。
417
418 <META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
419
420 c) 用来防止别人在框架里调用你的页面。
421
422 <META HTTP-EQUIV=”Window-target” CONTENT=”_top”>
423
424 d) 自动跳转。
425
426 <META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http：//www.yahoo.com”> 5指时间停留5秒
427
428 e) 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
429
430 <META NAME=”robots” CONTENT=”none”>
431
432 CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
433
434 f) 收藏夹图标 <link rel = “Shortcut Icon” href=”favicon.ico”>
435
436 g) 所有的javascript的调用尽量采取外部调用.
437
438 <SCRIPT LANGUAGE=”JavaScript” SRC=”script/xxxxx.js”></SCRIPT>
439
440 h) 附<body>标签：
441
442 <body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor=”#FFFFFF”>
443
444
445
446 2. 网页制作细节 —- 字体
447 1. 在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。
448
449 2.在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial 两种字体。一般使用中文宋体的9pt 和11pt 或12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。
450
451 3. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。
452
453 4.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
454
455 5. 请不要在网页中连续出现多于一个的 也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
456
457 6. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
458
459 7. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记 。
460
461
462
463 3. 网页制作细节 —- 链接
464 1. 网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>，所有内页指向首页的链接写成<a href=”/”>
465
466 2. 在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:void(null)”代替原来的“#”标记
467
468
469
470 4. 网页制作细节 —- 表格
471 1px表格 style=”border-collapse: collapse”
472 实例如下：
473 <table border=”1″ cellspacing=”0″ width=”32″ height=”32″ style=”border-collapse: collapse”
474 bordercolor=”#000000″ cellpadding=”0″>
475 <tr>
476 <td></td>
477 </tr>
478 </table>
479 设置亮、暗边框颜色
480 表格有亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性可以对表格样式设置。
481 <table border=”1″ width=”500″ bordercolorlight=”#000000″ bordercolordark=”#FFFFFF”>
482
483 在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行，
484 如我们注意在源代码中不应有这样的代码：
485 <td><img src=”../images/sample.gif”>
486 </td>
487 而应该是这样的：
488 <td><img src=”../images/sample.gif”></td>
489 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
490 <td><img src=”../images/sample.gif”> </td>
491
492 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示
493
494
495
496 5. 网页制作细节 —- 下载速度
497 首页Flash 网页大小应限定在 200K 以下，尽可能的使用矢量图形和Action来减小动画大小。非首页静态页面含图片大小应限定在 70K 左右，尽可能的使用背景颜色替换大块同色图片。
498
499
500
501 6. 网页制作细节 —- include
502 asp标准写法 <!–#include file=”inc/index_top.asp” –>
503 jsp 标准写法 <%@ include file=”../inc/index_top..jsp” %>
504
505
506
507 7. 网页制作细节 —- Alt和Title
508 都是提示性语言标签，请注意它们之间的区别。
509
510 在我们浏览网页时，当鼠标停留在图片对象或文字链接上时，在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合，它的作用是很重要的。
511
512 alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
513
514 用法如下：
515
516 <p Title=”给链接文字提示”>文字</p>
517
518 <a href=”#” Title=”给链接文字提示”>文字</a>
519
520 <img src=”图片.gif” alt=”给图片提示”>
521
522 8. 网页制作细节 —- 缓存
523
524 网页不会被缓存
525
526 HTM网页
527
528 <META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
529
530 <META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
531
532 <META HTTP-EQUIV=”expires” CONTENT=”0″>
533
534 ASP网页
535
536 Response.Expires = -1
537
538 Response.ExpiresAbsolute = Now() – 1
539
540 Response.cachecontrol = “no-cache”
541
542 9. 网页制作细节 —- 浏览器兼容性
543 创建站点时，应该明白访问者可能使用各种 Web 浏览器。在已知的其他设计限制下，尽可能将站点设计为具有最大的浏览器兼容性。
544 目前使用的 Web 浏览器有二十多种，大多数已发行了多个版本。即使您只针对使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多数 Web 用户，但您应明确并不是每个人都在使用这两种浏览器的最新版本。
545 您的站点越复杂（在布局、动画、多媒体内容和交互方面），跨浏览器兼容的可能性就越小。例如，并非所有的浏览器都可以运行JavaScript。不使用特殊字符的纯文本页面或许能够在任何浏览器中正确显示，但比起有效地使用图形、布局和交互的页面，这样的页面在美感上可能要差得多。所以，应尽量在最佳效果设计和最大浏览器兼容性设计之间取得平衡。
546 所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=”url”> 而不 是 <a href=url>.
547
548
549
550 10. 图片处理细节 —- banner
551 全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。
552 另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。
553 普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
554 次级页的pip尺寸360X300，336X280
555 游标:100X100或120X120
556
557
558
559 11. 图片处理细节 —- LOGO的国际标准规范
560 为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
561 88*31 这是互联网上最普遍的LOGO规格。
562 120*60 这种规格用于一般大小的LOGO。
563 120*90 这种规格用于大型LOGO。
564
565
566
567 12. 图片处理细节 —- 页面修饰图片处理
568 图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。
569
570
571
572
573
574 2.5 JavaScript书写规范
575
576 1. 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
577
578 2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
579
580 3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun; 另, 要求变量集中声明, 避免全局变量.
581
582 4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
583
584 5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
585
586 6. 命名语义化, 尽可能利用英文单词或其缩写;
587
588 7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
589
590 8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
591
592 9. 代码结构明了, 加适量注释. 提高函数重用率;
593
594 10. 注重与html分离, 减小reflow, 注重性能.
595
596
597
598 2.6 图片规范
599
600 1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
601
602 2. 图片格式仅限于gif || png || jpg;
603
604 3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
605
606 4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
607
608 5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);
609
610 6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.
611
612
613
614
615
616 2.7 注释规范
617
618 1. html注释: 注释格式 <!–这儿是注释–>, ‘–‘只能在注释的始末位置,不可置入注释文字区域;
619
620 2. css注释: 注释格式 /*这儿是注释*/;
621
622 3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;
623
624
625
626
627
628 2.8 浏览器兼容性 CSS hack
629
630
631
632 一、标识区别：
633 区别IE6,IE7,IE8,FF。
634 1. IE都能识别* ; 标准浏览器(如FF)不能识别*；
635
636 2. IE6能识别*，但不能识别 !important; IE6在样式前面加_
637
638 3. IE7能识别*，也能识别!important;
639
640 4. IE8能识别\ 9 例如：background:red \9;
641
642 5. firefox不能识别*，但能识别!important;
643
644
645
646 1．IE6和firefox的区别：
647 background:orange;*background:blue;
648 意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.
649
650 2. IE6和IE7的区别：
651 background:green !important;background:blue;
652 意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色
653
654 3. IE7和FF的区别：
655 background:orange; *background:green;
656 意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色
657
658 4. FF，IE7，IE6的区别：
659 background:orange;
660 *background:green !important;
661 *background:blue;
662 意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.
663
664 二、实践建议
665
666 (1). 开发平台的选择
667
668 在 Firefox 上编写CSS, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以推荐以 Firefox 结合 Firebug 扩展作为平台。
669
670 (2). CSS Hack 的顺序
671
672 使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,
673
674 顺序如下：Firefox -> IE6 -> IE7 -> 其他
675
676 (3). Hack 的方法
677
678 说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
679
680 1. 同一文件中处理.
681 如: id=”bgcolor”的控件要在 IE6中显示蓝色, IE7中显示绿色, Firefox等其他浏览器中显示红色。
682
683
684
685 IE6不认 !important,也不认 *+html.所以 IE6只能是 blue.
686 IE7认 !important,也认 *+html,优先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和 green,但 green的优先度最高.
687 Firefox和其他浏览器都认 !important. !important优先, Firefox可以是 red和 blue,但 red优先度高.上述的优先符号均是 CSS3标准允许的,其他浏览器也还有其他的 Hack方法,但我迄今还没遇到过 Firefox正常, IE以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见 (JavaScript除外).
688
689 2. 不同文件中处理.
690 为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器?这是为了欺骗 W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的,一个只为 IE服务.将所有符合 W3C的代码写到一个里面去,而一些 IE中必须的,又不能通过 W3C验证的代码 (如: cursor:hand;)放到另一个文件中,再用下面的方法导入.
691
692 ========================================================================================
693
694 Web 目录结构规范：
695 目录建立的原则：以最少的层次提供最清晰简便的访问结构。
696 目录的命名以小写英文字母，下划线组成。
697 根目录一般只存放htm以及其他必须的系统文件
698 根目录下的images用于存放各页面都要使用的公用图片。
699 所有JS等脚本存放在根目录下的scripts或js目录
700 所有CSS文件存放在根目录下style或css目录
701 多语言版本存放于独立的目录。例如：简体中文存放在cn目录下，繁体中文存放在 tw目录下，英文存放在en目录下等。
702 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录下。
703
704
705 Web UI设计命名规范：
706 2.1 Web 界面设计最佳尺寸
707
708 960网格系统——web界面设计最佳尺寸
709
710 目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。
711
712
713
714 2.2 网站设计及基本框架结构
715
716
717
718 Container
719 “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
720
721 Header
722 “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
723
724 Navbar
725 “navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
726
727 Menu
728 “Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
729
730 Main
731 “Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
732
733 Sidebar
734 “Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
735
736 Footer
737 “Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“
738
739
740
741 2.3命名规则注意几点
742
743 尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
744 如:red/left/big等。
745
746 组合命名规则:
747 [元素类型]-[元素作用/内容]
748
749 如:搜索按钮: btn-search、登录表单:form-login、新闻列表:list-news。
750
751 涉及到交互行为的元素命名:
752 凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
753
754 鼠标悬停:：hover 点击：click 已浏览：visited
755
756 如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
757
758
759
760 2.4常用命名汇总
761
762 名称 命名规范
763 页头 header、top
764 登录条 loginbar
765 标志 logo
766 侧栏 sidebar
767 广告条 banner
768 导航: nav
769 子导航: subNav
770 菜单: menu
771 子菜单: subMenu
772 下拉菜单: dropMenu
773 工具条: toolbar
774 表单: form
775 栏目: column
776 箭头: arrow
777 搜索: search
778 搜索按钮: btn-search
779 滚动条: scroll
780 内容: content
781 标签页: tab
782 文章列表: list
783 小技巧: tips
784 栏目标题: title
785 链接: links
786 页脚: footer、end
787 服务: service
788 热点: hot
789 新闻: news
790 下载: download
791 注册: Register 、reg
792 状态: status
793 按钮: btn
794 上传: upload
795 登陆: login
796 投票: vote
797 合作伙伴: partner
798 版权: copyright
799 网站地图: sitemap
800
801
802 Web UI图片命名规范：
803 图片名称分为头尾两两部分，用下划线隔开。
804 头部分表示此图片的大类性质。
805 例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上做栏目链接的图片我们取名：menu ；不带链接表示标题的图片我们取名：title ；装饰用的照片我们取名：pic ；依照此原则类推。
806
807 尾部分用来表示图片的具体含义，用英文字母表示。例如：gif logo_lntu.gif button_next.gif menu_aboutus.gif title_news.gif pic_people.jpg
808 有onmouse效果的图片，两张分别在原有文件名后加”_on”和”_off”命名。
809 多语言的图片应放到多语言目录下
810
811
812 Web基本框架布局规范：
813 Web基本框架布局规范 常用到的Div和Table 两种
814
815 采用CSS+DIV对网站重构日趋被大家重视起来，有以下优势：
816
817 1：表现和内容相分离
818
819 将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。
820
821 2：提高搜索引擎对网页的索引效率
822
823 用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。
824
825 3：提高页面浏览速度
826
827 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
828
829 还有因为<table>标签是要等</table>下载好以后才可以显示的，所以整个网页是一下子跳出来的，这样让人感觉起来显示速度非常的慢。而使用css+div,<div> 标签不用等</div>下载好就可以显示里面的内容的,所以让人感觉打开网页的速度非常之快。
830
831 4：易于维护和改版
832
833 你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
834
835 从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。
836
837 CSS+DIV所以成为目前网页布局主流。
838
839
840
841 Table最大缺点是代码臃肿，你至少需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，而 Div 只需 <div>一个标签。
842
843 页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。
844
845 不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。
846
847 可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。
848
849 不够语义（Semantic）：我们需要语义的 Web。
850
851 一般table 只用做于数据处理。
852
853
854
855 CSS样式书写规范及优化：
856 5.1．CSS文件命名规范
857
858 全局样式：global.css；
859
860 框架布局：layout.css；
861
862 字体样式：font.css；
863
864 链接样式：link.css；
865
866 打印样式：print.css；
867
868
869
870 5.2．常用类/ID命名规范
871
872 页 眉：header
873
874 内 容：content
875
876 容 器：container
877
878 页 脚：footer
879
880 注 释：note
881
882 ……（更多参照2.4常用命名汇总）
883
884 1、常用类的命名规则：
885
886 应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……
887
888 2、辅助图片用背影图处理：
889
890 这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
891
892
893
894 5.3结构与样式分离：
895
896 在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
897
898
899
900 5.4、文档的结构化书写：
901
902 页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
903
904 <div id=”mainMenu”>
905
906 <ul>
907
908 <li><a href=”#” >首页</a></li>
909
910 <li><a href=”#” >介绍</a></li>
911
912 <li><a href=”#” >服务</a></li>
913
914 </ul>
915
916 </div>
917
918
919
920 /*=====主导航=====*/
921
922 #mainMenu {
923
924 width:100%;
925
926 height:30px;
927
928 background:url(images/mainMenu_bg.jpg) repeat-x;
929
930 }
931
932 #mainMenu ul li {
933
934 float:left;
935
936 line-height:30px;
937
938 margin-right:1px;
939
940 cursor:pointer;
941
942 }
943
944 /*=====主导航结束=====*/
945
946
947
948 5.5注释书写规范
949
950 1、行间注释：
951
952 直接写于属性值后面，如：
953
954 .search{
955
956 border:1px solid #fff;/*定义搜索输入框边框*/
957
958 background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
959
960 }
961
962 2、整段注释：
963
964 分别在开始及结束地方加入注释，如：
965
966 /*=====搜索条=====*/
967
968 .search {
969
970 border:1px solid #fff;
971
972 background:url(../images/icon.gif) no-repeat #333;
973
974 }
975
976 /*=====搜索条结束=====*/
977
978
979
980 5.6 CSS样式属性代码优化缩写
981
982 1、不同类有相同属性及属性值的缩写：
983
984 对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：
985
986 #mainMenu {
987
988 background:url(../images/bg.gif);
989
990 border:1px solid #333;
991
992 width:100%;
993
994 height:30px;
995
996 overflow:hidden;
997
998 }
999
1000 #subMenu {
1001
1002 background:url(../images/bg.gif);
1003
1004 border:1px solid #333;
1005
1006 width:100%;
1007
1008 height:20px;
1009
1010 overflow:hidden;
1011
1012 }
1013
1014
1015
1016 两个不同类的属性值有重复之处，刚可以缩写为：
1017
1018 #mainMenu,#subMenu {
1019
1020 background:url(../images/bg.gif);
1021
1022 border:1px solid #333;
1023
1024 width:100%;
1025
1026 overflow:hidden;
1027
1028 }
1029
1030 #mainMenu {height:30px;}
1031
1032 #subMenu {height:20px;}
1033
1034
1035
1036 2、同一属性的缩写：
1037
1038 同一属性根据它的属性值也可以进行简写，如：
1039
1040 .search {
1041
1042 background-color:#333;
1043
1044 background-image:url(../images/icon.gif);
1045
1046 background-repeat: no-repeat;
1047
1048 background-position:50% 50%;
1049
1050 }
1051
1052 .search {
1053
1054 background:#333 url(../images/icon.gif) no-repeat 50% 50%;
1055
1056 }
1057
1058
1059
1060 3、内外侧边框的缩写：
1061
1062 在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：
1063
1064 .btn {
1065
1066 margin-top:10px;
1067
1068 margin-right:8px;
1069
1070 margin-bottom:12px;
1071
1072 margin-left:5px;
1073
1074 padding-top:10px;
1075
1076 padding-right:8px;
1077
1078 padding-bottom:12px;
1079
1080 padding-left:8px;
1081
1082 }
1083
1084 则可缩写为：
1085
1086 .btn {
1087
1088 Margin:10px 8px 12px 5px;
1089
1090 Padding:10px 8px 12px 5px;
1091
1092 }
1093
1094 而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：
1095
1096 .btn {
1097
1098 margin-top:10px;
1099
1100 margin-right:5px;
1101
1102 margin-bottom:10px;
1103
1104 margin-left:5px;
1105
1106 }
1107
1108 缩写为：.btn {margin:10px 5px;}
1109
1110 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：
1111
1112 .btn {
1113
1114 margin-top:10px;
1115
1116 margin-right:10px;
1117
1118 margin-bottom:10px;
1119
1120 margin-left:10px;
1121
1122 }
1123
1124 缩写为：.btn{margin:10px;}
1125
1126
1127
1128 4、颜色值的缩写：
1129
1130 当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
1131
1132 .menu { color:#ff3333;}
1133
1134 可缩写为:.menu {color:#f33;}
1135
1136
1137
1138 5.7 CSS各浏览器解决不兼容问题
1139
1140 因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。
1141
1142 1、 IE6、IE7、Firefox之间的兼容写法：
1143
1144 写法一：
1145
1146 IE都能识别*;标准浏览器(如FF)不能识别*；
1147
1148 IE6能识别*，但不能识别 !important,
1149
1150 IE7能识别*，也能识别!important;
1151
1152 FF不能识别*，但能识别!important;
1153
1154 根据上述表达，同一类/ID下的CSS hack可写为：
1155
1156 .searchInput {
1157
1158 background-color:#333;/*三者皆可*/
1159
1160 *background-color:#666 !important; /*仅IE7*/
1161
1162 *background-color:#999; /*仅IE6及IE6以下*/
1163
1164 }
1165
1166 一般三者的书写顺序为：FF、IE7、IE6.
1167
1168 写法二：
1169
1170 IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
1171
1172 .searchInput {
1173
1174 background-color:#333;/*通用*/
1175
1176 _background-color:#666;/*仅IE6可识别*/
1177
1178 }
1179
1180
1181
1182 写法三：
1183
1184 *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
1185
1186 .searchInput {background-color:#333;}
1187
1188 *html .searchInput {background-color:#666;}/*仅IE6*/
1189
1190 *+html .searchInput {background-color:#555;}/*仅IE7*/
1191
1192 屏蔽IE浏览器：
1193
1194 select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
1195
1196 *:lang(zh) select {font:12px !important;} /*FF的专用*/
1197
1198 select:empty {font:12px !important;} /*safari可见*/
1199
1200 IE6可识别：
1201
1202 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
1203
1204 select { display /*IE6不识别*/:none;}
1205
1206 IE的if条件hack写法：
1207
1208 所有的IE可识别：
1209
1210 <!–[if IE]> Only IE <![end if]–>
1211
1212 只有IE5.0可以识别:
1213
1214 <!–[if IE 5.0]> Only IE 5.0 <![end if]–>
1215
1216 IE5.0包换IE5.5都可以识别:
1217
1218 <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
1219
1220 仅IE6可识别:
1221
1222 <!–[if lt IE 6]> Only IE 6- <![end if]–>
1223
1224 IE6以及IE6以下的IE5.x都可识别:
1225
1226 <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
1227
1228 仅IE7可识别:
1229
1230 <!–[if lte IE 7]> Only IE 7/- <![end if]–>
1231
1232
1233
1234 2、清除浮动：
1235
1236 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
1237
1238 select:after {
1239
1240 content:”.”;
1241
1242 display:block;
1243
1244 height:0;
1245
1246 clear:both;
1247
1248 visibility:hidden;
1249
1250 }
1251
1252
1253
1254 其他规范：
1255 js的命名原则以功能的英语单词为名。例如：广告条的js文件名为：js.
1256 所有的CSS的尽量采用外部调用.
1257 所有的javascript脚本尽量采取外部调用.
1258 Web 页面编码一律统一用UTF-8编码：UTF-8是世界性通用代码，也完美的支持中文编码，如果我们做的网站能让国外用户正常的访问，就最好用UTF-8。
1259 字体符号用像素px来定义，px使用中文宋体12px 和14px黑体
1260 字体采用：Arial, Helvetica, sans-serif,宋体。
1261
1262 所有连接使用相对路径/images/，切记不可使用绝对路径。如：../images/
1263 所有文件，目录，图片全部以小写字母命名，禁止用中文命名。
1264 清理无效的链接和图片
