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 清理無效的鏈接和圖片
