一、規范目的
1.1 概述
為提高團隊協作效率, 便於后台人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規范文檔一經確認, 前端開發人員必須按本文檔規范進行前台頁面開發. 本文檔如有不對或者不合適的地方請及時提出, 經討論決定后可以更改此文檔.
二、文件規范
2.1 文件命名規則
文件名稱統一用小寫的英文字母、數字和下划線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。
a. HTML的命名原則
引文件統一使用index.htm index.html index.asp文件名（小寫）
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如：
關於我們 \ aboutus
信息反饋 \ feedback
產 品 \ product
如果欄目名稱多而復雜並不好以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；
每一個目錄中應該包含一個缺省的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 logo_police.gif logo_national.gif pic_people.jpg
鼠標感應效果圖片命名規范為"圖片名+_+on/off"。
例如：menu1_on.gif menu1_off.gif
c. javascript的命名原則
例如：廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js
d. 動態語言文件命名原則
以性質_描述，描述可以有多個單詞，用“_”隔開，性質一般是該頁面得概要。
范例：register_form.asp register_post.asp topic_lock.asp
2.2 文件存放位置規范
2.3 CSS 書寫規范
基本原則：
CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態樣式。
- 樣式為設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例：“ .shadow ”
文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ” 、“ .no12-24 ” - 義HTML樣式為設計師重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用於統一網頁中某一標簽的樣式定義。樣式名“HTML標簽”例：hr { border: 1px dotted #333333 }
- 態樣式為設計師對鏈接不同狀態設定特殊樣式，影響被使用本樣式區域中的鏈接。
該樣式寫法有2種： a.nav:link nav.a:link 第一種只能修飾標簽中；第二種可以修飾所有包含有標簽的其他標簽。
頁面內的樣式加載必須用鏈接方式
注意細則：
- 協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
- class與id的使用: id是唯一的並是父級的, class是可以重復的並是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發框架文件時命名的, 為JavaScript預留鈎子的除外;
- 為JavaScript預留鈎子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
- class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
- 規避class與id命名(此條重要, 若有不明白請及時與i溝通):
a, 通過從屬寫法規避, 示例見d;
b, 取父級元素id/class命名部分命名, 示例見d;
c, 重復使用率高的命名, 請以自己代號加下划線起始, 比如i_clear;
d, a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼 中加入新的div元素,
按a命名法則: ,
樣式寫法: #mainnav .firstnav{.......}
按b命名法則: ,
樣式寫法: .main_firstnav{.......} - 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等.我所列出的這些屬性只是最常用到的, 並不代表全部;
- 書寫代碼前, 考慮並提高樣式重復使用率;
- 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
- 這兒是標題列表2010-09-15
定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可實現日期居右顯示
- 樣式表中中文字體名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;
- 背景圖片請盡可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模塊制作;
- 使用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文件中我會初始化表格樣式)
- 杜絕使用 兼容ie8;
- 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’); - 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;
- 減少使用影響性能的屬性, 比如position:absolute || float ;
- 必須為大區塊樣式添加注釋, 小區塊適量注釋;
- 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 后期優化i會統一處理;
命名規則：
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
注冊：regsiter
狀態：status
投票：vote
合作伙伴：partner
(二)注釋的寫法:
/* Footer /
內容區
/ End Footer */
(三)id的命名:
(1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2)導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright
基本樣式：
/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}
重定義的最先，偽類其次，自定義最后，便於自己和他人閱讀！
不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt 和11pt，px一般使用中文宋體12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。中英文混排時，我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。
2.4 html 書寫規范
1.網頁制作細節 ---- head區代碼規范
head區是指HTML代碼的和之間的內容。
必須加入的標簽
a)公司版權注釋 <!--- The site is designed by EHM,Inc 07/2005 --->
b)網頁顯示字符集
簡體中文：
繁體中文：
英 語：
c)網頁制作者信息
d)網站簡介
e)搜索關鍵字
f)網頁的css規范
g)網頁標題
可以選擇加入的標簽
a)設定網頁的到期時間。一旦網頁過期，必須到服務器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
b)禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
c)用來防止別人在框架里調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
d)自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com"> 5指時間停留5秒
e)網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
f)收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">
g)所有的javascript的調用盡量采取外部調用.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
h)附<body>標簽：
<body>標簽不屬於head區，這里強調一下，為了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">
2.網頁制作細節 ---- 字體
- 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 標記。
2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。
- 為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用
來人工干預分段。
4.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。
-
請不要在網頁中連續出現多於一個的 也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
-
行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
-
排版中我們經常會遇到需要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上
標記，注意，一般情況下，請不要省略
結束標記 。
3.網頁制作細節 ---- 鏈接
-
網站中的鏈接路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣： 而應該這樣：，所有內頁指向首頁的鏈接寫成
-
在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記
4.網頁制作細節 ---- 表格
1px表格 style="border-collapse: collapse"
實例如下：
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
設置亮、暗邊框顏色
表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性可以對表格樣式設置。
| 縮進兩個半角空格， | 中如果還有嵌套的表格， 5.網頁制作細節 ---- 下載速度 6.網頁制作細節 ---- include 7.網頁制作細節 ---- Alt和Title 文字 8.網頁制作細節 ---- 緩存 9.網頁制作細節 ---- 瀏覽器兼容性 12.圖片處理細節 ---- 頁面修飾圖片處理 2.5 JavaScript書寫規范
2.6 圖片規范
2.7 注釋規范
1．IE6和firefox的區別：
|