爲提高團隊協作效率，便於後臺人員添加功能及前端後期優化維護， 輸出高質量的文檔， 特制訂此文檔。本規範文檔一經確認， 前端開發人員必須按本文檔規範進行前臺頁面開發。本文檔如有不對或者不合適的地方請及時提出， 經討論決定後更改。
基本準則
符合web標準， 語義化html， 結構表現行爲分離， 兼容性優良。 頁面性能方面， 代碼要求簡潔明瞭有序， 儘可能的減小服務器負載， 保證最快的頁面解析速度。
文件規範
1. html， css， js， images等文件均統一保存至項目約定的目錄中，不得任意放置文件。
2. html文件命名: 統一使用.html文件後綴。根據頁面實現功能採用英文語義命名，如首頁（index.html），邀請頁（invite.html）。如文件含義無法用一個單詞描述，則採用“駝峯法”命名（首字符小寫，每個單詞的第一個字母大寫），如“幫助信息中的關於我們”頁面，命名方式爲helpAbout.html或者helpAboutUs.html。
3. css文件命名: 採用英文語義和“駝峯法”命名。全站統一使用一個公用css文件，命名爲common.css。在各頁面如有必要，可單獨使用一個樣式，命名爲該html頁面文件名加上後綴css。比如邀請頁需要單獨引入一個樣式，則命名爲invite.css。其它功能模塊樣式文件可根據功能命名，並在該功能出現的頁面引入，比如幻燈片樣式，命名爲slide.css。一個頁面內css文件不要超過兩個，一個是公用common.css文件，另一個是該頁面的獨立樣式（該頁面獨有功能樣式一併寫入其中）。如果有幾個頁面佈局差不多，比如商品陳列頁和商品歷史購買頁，可公用一個樣式，命名方式爲shopList.css ( 語義化，駝峯法 ) 。
4. javascript文件命名: 參照css命名， 共用JS命名爲common.js，其它頁面根據html頁面名稱命名。功能模塊根據功能名稱語義化駝峯法命名，如js倒計時文件，命名爲countDown.js 。
HTML編碼規範
1 文檔聲明：統一使用html5文檔聲明，不再使用xhtml聲明。
<!DOCTYPE HTML>
2 文檔編碼，全部頁面統一使用utf-8編碼格式。
<meta charset=”utf-8”/>
3 註釋規範。代碼原作者根據需要對頁面中添加註釋。註釋格式如下：
<!–這裏是註釋（代碼功能描述或其它） 註釋人 註釋時間–>
團隊協作時，修改人必須對修改過的地方添加註釋。註釋格式如下：
<!–修改原因 註釋人 註釋時間–>
在註釋中，註釋原因請使用中文。註釋人名使用程序員拼音，如liujin。註釋時間統一使用格式 2012/07/24(年月日)。
模塊內容較多或者嵌套較多時，必須在標籤結束時添加結束註釋。
<!– end #id ( .class) –>
4 html,css,javascript分離。如無特殊必要，儘量不在html文檔中直接寫css樣式和javascript腳本程序。
5 樣式和腳本引入時忽略type屬性。
不推薦的寫法
<link type=”text/css” href="http://team.xunclub.com/”template/css/common.css”/>
<script type=”text/javascript” src="”template/js/common.js”></script>
推薦的寫法
<link href=”template/css/common.css”/>
<script src="”template/js/common.js”></script>
6 html默認的塊狀元素在佈局時另起一行，並縮進每個子元素。如：
<ul>
<li>元素一</li>
<li>元素二</li>
</ul>
<div>
<p>段落1</p>
<p>段落2</p>
<p><span>段落3.1</span><span>段落3.2</span> </p>
</div>
7 所有html元素必須閉合，即便是<br /><img /><meta />這樣的標籤，也必須使用 /> 閉合。
8 所有元素名和屬性名必須使用小寫。即便是使用dreamweaver工具，由dw自動生成的js事件，如onMouseOver，也必須改寫爲onmouseover。所有的屬性值必須用成對的雙引號包含。如果該屬性沒有值，則重複本身。
不推薦的寫法：
<input type=”text” name=”user”onBlur=”checkInput()”/>
<input type=”checkbox”name=”sex” value=”男”checked />
推薦的寫法：
<input type=”text” name=”user”onblur=”checkInput()”/>
<input type=”checkbox”name=”sex” value=”男”checked=”checked” />
9 表單規範。
9.1 form的name屬性命名統一使用“表單功能”+“Form”駝峯式，比如登陸表單，規範如下：
<form name=” loginForm” >
如果表單中有圖片圖片控件，必須在form中添加enctype=“multipart/form-data” 屬性，設置表單的MIME編碼。
<form name=”xxxForm” enctype=”multipart/form-data”>
9.2 表單內控件命名方式參照9.1。
9.3 描述性的信息使用label標籤。
<p><label>用戶名</laber><input type=”text” name=”userName” /></p>
10 代碼中不能單獨出現標籤開始符（<），和結束符 (>)，以及邏輯與(&)，必須分別被編碼成< > &
11 代碼必須縮進，使文檔看起來流暢整潔。統一使用一個TAB鍵縮進。壓縮文件除外。
12 html標籤的id屬性和class屬性命名必須保持語義化，杜絕使用數字和漢語拼音命名（可讀性差）。多個單詞用“-“鏈接,字符全部小寫。如果自定義標籤屬性，請以”data-“開頭。
如留言：<div class=”message”>…</div>
如商品列表：<div id=”products-list”>…</div>
用戶頭像上添加用戶的身份ID： <img src="”user/images/sina_1001.jpg”data-uid=”1001”/>
13 必須爲多媒體標籤添加alt屬性，如圖片，視頻。必須爲超鏈接添加title屬性。
<img src="”images/caite.jpg”alt=”段林希代言彩特手錶”/>
如果頁面關鍵詞是段林希和彩特手錶，那麼這張圖片上將出現兩個關鍵詞各一次，利於SEO優化。
14 h1-h6號，ul標籤的使用。
14.1 標題根據重要性用h1~h6號。一個頁面內只能有一個h1標籤，一般用於網站頭部的公司（網站）名稱上。頁面內相對比較重要的並行模塊標題（如各個活動，限時搶購活動，預定活動等）使用h2號標籤。側邊欄信息標題（活動時間，活動動態）使用h3標籤。
14.2 列表模塊，比如評論列表，動態列表，均採用ul標籤佈局。
14.3 內聯元素中不可使用塊狀元素。
錯誤寫法
<a href=”xxx”title=”xxx”><h2>超鏈接</h2></a>
正確寫法
<h2><a href=”xxx”title=”xxx”>超鏈接</a></h2>
15 在所有的url屬性值的最後加上”/”，避免兩次http請求。
<a href=”http://i.xunclub.com/“ target=”_blank” title=”影響力“>影響力</a>
16 儘量減少div的嵌套。重要！
17 檢測html文檔的正確性。
錯誤檢查： 火狐瀏覽器查看頁面源文件，火狐瀏覽器會描紅錯誤部分。
頁面驗證： 將html文檔提交到w3c官方驗證。地址：http://validator.w3.org/
18 本部分持續添加修改中。
CSS編碼規範
1 id和class命名必須語義化,命名儘量簡潔,可讀性高.
作者信息 <div class=”author”>…</div>
日期信息 <div class=”date”>…</div>
多層嵌套時，以功能命名，並用“-”連接。注意是連接符，不是下劃線。（善用前綴，防止樣式衝突。）
二級菜單
<ul class=”menu”>
<li>
<a href="http://team.xunclub.com/””>父菜單1</a>
<ul class=”sub-menu”>
<li>子菜單1.1</li>
<li>子菜單1.2</li>
</ul>
</li>
<li>
<a href=””>父菜單2</a>
<ul class=”sub-menu”>
<li>子菜單2.1</li>
<li>子菜單2.2</li>
</ul>
</li>
</ul>
留言列表模塊
<div id=”message”>
<ul class=”message-ul”>
<li class=”message-ul-li”>留言一</li>
<li class=”message-ul-li”>留言二</li>
<li class=”message-ul-li”>留言三</li>
</ul>
</div>
模塊或功能區最外層標籤統一使用ID命名，內層全部使用class命名。（爲JS預留的ID選擇器除外，ID選擇器請以“js-”開頭）
評論模塊
<div id=”comment”>
<div class=”comment-header”>
<span class=”comment-date”>2012年07月25日</span>
…
<span class=”comment-show-all”id=”js-comment-show-all”>查看全部留言</span>
</div>
<div class=”comment-content”>
…
</div>
</div
在css樣式中應避免多餘的祖先元素。
推薦的寫法
.comment{
padding:10px;
color:#000;
}
不推薦的寫法
div.comment{ /*div是多餘的*/
padding:10px;
color:#000;
}
2 簡化css的寫法
不推薦的寫法
.example{
font-family:”microsoft yehei”,”黑體”,arial，sans-serif;
font-size:24px;
line-height:32px;
padding-left:15px;
padding-bottom:10px;
}
推薦的寫法
.example{
font : 24px/32px ”microsoft yehei”,”黑體”,arial，sans-serif;
padding: 0 0 10px 15px;
}
3 css樣式表必須整潔，查找方便。推薦排版方式如下：
/*在模塊或者功能區樣式開始前註釋功能說明。這裏的註釋代表上面一個功能樣式的結束和下一個功能樣式的開始。*/
/*註釋格式： 功能描述 註釋人 時間（年-月-日）*/
/*該處樣式經第二人修改時，應在原樣式的下面或者修改屬性的後面修改，並且添加修改說明和修改人信息*/
.example{ /*選擇器頂格起排*/
font-family:”microsoft yehei”,”黑體”,arial，sans-serif; /*屬性名距離頂格一個TAB鍵*/
font-size:24px; /*多個屬性換行*/
line-height:32px; /*如有必要對某個屬性進行註釋，則註釋在該屬性結束符‘；‘ 分號後面*/
padding-left:15px;
padding-bottom:10px;
color:#fff; /*顏色統一採用16進制，三個色相的兩個數字或者字母相同，則可簡寫*/
}/*這裏寫完後空一行再寫其它的id或class*/
4 兼容性問題。
1.開發時，先在智能瀏覽器下開發調試（如firefox，chrome，IE9），使基礎代碼符合w3c規範。建議根據項目需要部分或者全部採用css3.0新標準，智能瀏覽器調試無誤後，再針對IE瀏覽器做兼容性測試，使代碼能夠兼容IE6,7,8。
2.根據開發者個人習慣，自行決定模塊開發完成，頁面開發完成，項目開發完成後做各瀏覽器兼容性處理。這裏推薦在一個頁面完成開發後，做各瀏覽器兼容處理。原因1，一個模塊開發完成做處理，重複度高，浪費時間。2，一個項目結束後做處理，工作量大，時間不夠。
3.兼容代碼。針對IE瀏覽器做hacks, 補丁程序需要單獨成頁，html頁面根據IE版本做選擇性樣式載入。Css補丁程序文件命名規則：ie.css, ie6.css, ie7.css, ie8.css 或者ie67.css ie78.css
4.Html判斷載入css樣式：
IE7 專用(IE6，8，9同理)
<!–[if IE 7]>
<link rel=”stylesheet” href=”ie7.css”/>
<![endif]–>
IE8 以下（含IE8）（小於爲lt ，大於爲gt， 大於等於爲gte, 小於等於爲 lte ）（其它同理）
<!–[if lt IE 9]>
<link rel=”stylesheet” href=”ie78.css”/>
<![endif]–>
5 重置瀏覽器部分默認樣式。請將以下代碼添加至全局樣式文件common.css 頭部。可根據項目實際情況修改。
html,body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td{
margin: 0;
padding: 0;
}
fieldset, img{
border: 0;
}
:focus{
outline: 0;
}
address, caption, cite, code, dfn,em, strong, th, var, optgroup{
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6{
font-size: 100%;
font-weight: normal;
}
abbr, acronym{
border: 0;
font-variant: normal;
}
input, button, textarea,select, optgroup, option{
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt{
font-size: 100%;
}
input, button, textarea, select{
*font-size: 100%; /*ie下*/
}
body{
line-height: 1.5; /*1.5倍行距24px*/
}
ol, ul{
list-style: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
caption, th{
text-align: left;
}
sup, sub{
font-size: 100%;
vertical-align: baseline;
}
:link, :visited , ins{
text-decoration: none;
}
blockquote, q{
quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after{
content: ”;
content: none;
}
6 設置全局默認css樣式。
6.1 規定統一使用<div class=”clear”></div>代碼清除浮動。
.clear{
clear:both;
float:none;
}
6.2 根據項目實際情況設置全局樣式。
body{
color:#000;
background:#fff;
font:14px “microsoft yahei”,”黑體”，arial,sans-serif;
}
a, a:visited{
color:#00f;
}
a:hover{
Color:#f00;
}
…
將全局樣式加入到重置樣式後面。
7 CSS完成後及時驗證。W3c驗證地址. http://jigsaw.w3.org/css-validator/
8 本部分持續添加修改中。
JavaScript規範
1 js必須作爲文件來存儲，不要將j s代碼寫入html文檔，除非這段js代碼有特殊作用，非引入html中不可。在頁面底部引入js文件，除了特殊js文件，如jq庫和html載入時就需要用到的js文件。
2 註釋。函數（功能）開始前必須註釋，規範如下：
單行註釋： // 功能描述 註釋人 時間
多行註釋：
/*
*這裏是註釋
*這裏是註釋
*/
如果函數複雜，請開發者務必註明相關參數說明。格式如下：
/*
* 倒計時函數 By LiuJin 2012-05-29
* @param str: 活動到期時間，剩餘多少時間
* @param i: 本倒計時要顯示的頁面位置class=”T-i”
* @param pid: 計時的活動專場ID
*/
function showTime(str,i,pid){
…
}
3 命名。函數均採用“駝峯法”命名。變量全部採用小寫命名，多個字符之間用下劃線連接。保持名稱的語義化。
4 語句。儘量在 一行只寫一條語句。語句以分號結尾，不建議省略。
5 縮進。函數功能模塊開始，頂格書寫。函數內代碼根據上級縮進。一次縮進使用一個TAB鍵。
6 一個項目中，如無必要，不能引入兩個js庫，這裏建議採用jquery庫1.6版本。原生JS實現不太複雜的功能，儘量使用原生JS開發。
7 前後端數據傳輸約定。採用ajax方式傳輸數據，數據格式爲json。
8 前端Js開發人員在完成開發後需要經常檢查代碼，不斷力求精簡高效，請求反應速度快。
9 本部分持續添加修改中。