規(guī)范目的：
為提高團(tuán)隊協(xié)作效率,
便于后臺人員添加功能及前端后期優(yōu)化維護(hù),
輸出高質(zhì)量且統(tǒng)一的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認(rèn),前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā)。
本文檔如有不對或者不合適的地方請及時提出,經(jīng)討論決定后方可更改。
基本準(zhǔn)則：
符合web標(biāo)準(zhǔn),語義化html,結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良。頁面性能方面,代碼要求簡潔明了有序,盡可能的減小服務(wù)器負(fù)載,保證最快的解析速度。
主要內(nèi)容：（1）
文件規(guī)范，文件位置及命名（2）Html
規(guī)范，書寫規(guī)范及注意事項（3）CSS
規(guī)范，書寫規(guī)范及注意事項
規(guī)范內(nèi)容：
一、文件規(guī)范
1.?html,?css,?img
文件均歸檔至<系統(tǒng)開發(fā)規(guī)范>
約定的目錄中；
2.?html
文件命名:
英文命名,
后綴.htm。
同時保存好相應(yīng)的設(shè)計稿放于同目錄中,若界面稿命名為中文,請重命名與html文件同名,以方便后端開發(fā)人員添加功能時查找對應(yīng)頁面；
3.?css文件命名:英文命名,后綴.css.共用core.css,
首頁
index.css,
其他頁面依實際
模塊需求命名。
二、
html
書寫規(guī)范1.文檔類型聲明及編碼:
統(tǒng)一為
html5
聲明類型，寫法如下：
編碼統(tǒng)一為
utf-8，寫法如下：-8″?/>書寫時利用
IDE
實現(xiàn)層次分明的縮進(jìn)。
2.
css文件如無特殊情況，應(yīng)鏈接至網(wǎng)頁頭部...標(biāo)簽內(nèi)
...
標(biāo)簽之后。
3.
引入外部
css文件時，應(yīng)去除類型聲明，寫法如下：
...4. 所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成；且所有標(biāo)簽必須閉合： 包括br (), hr()，,屬性值必須用雙引號包括,寫法如下：
5. 充分利用無兼容性問題的html自身標(biāo)簽, 比如span, em, strong, optgroup, label,等等；? ? 需要為 html元素添加自定義屬性的時候, 首先要考慮下有沒有默認(rèn)的已有的合適標(biāo)簽去設(shè)置?
6. 語義化html, 如 標(biāo)題根據(jù)重要性用h*(同一頁面只能有一個h1,h1用于logo), 段落標(biāo)記用p, 列表用ul, 內(nèi)聯(lián)元素中不可嵌套塊級元素；? ? h1請使用在logo上，h2-h6 應(yīng)用在各級標(biāo)題上。? ?
7. 盡可能減少div嵌套? ? 書寫示例：? ? ? 不合理代碼如下：歡迎訪問q齊家網(wǎng), 您的用戶名是用戶名? ? ? ? ? ? 正確寫法如下：歡迎訪問XXX, 您的用戶名是用戶名
8.?書寫鏈接地址時,?必須避免重定向，請在URL地址后面加上“/”，書寫示例：????href=”http://www.tg.com.cn/”?
9.?在頁面中盡量避免使用style屬性，即：????style="..."
?10.?必須為含有描述性表單元素(input,?textarea)添加label，書寫示例：
不合理代碼如下：
姓名:
正確寫法如下：
姓名:
11.?能以背景形式呈現(xiàn)的圖片,?盡量寫入css樣式中。??12.?重要圖片必須加上alt屬性以及height,width屬性，避免圖片加載失敗而導(dǎo)致錯位，書寫示例：給重要的元素和截斷的元素加上title
13.?給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,?方便后臺添加功能。
14.?特殊符號使用:?盡可能使用代碼替代，書寫示例：??>?>??空格
15.?書寫頁面過程中,?請考慮向后擴(kuò)展性。
16.?class和id的書寫規(guī)范請參考css部分
二、CSS書寫規(guī)范
1.?編碼統(tǒng)一為utf-8。
2.?協(xié)作開發(fā)及分工:共用css文件core.css?暫時由tech?yjbao負(fù)責(zé)維護(hù)。
協(xié)作開發(fā)過程中,?每個頁面請務(wù)必都要引入,?此文件包含reset及頭部底部樣式,?此文件不可隨意修改;
3.?class與id的使用:?id是唯一的并是父級的,?class是可以重復(fù)的并是子級的,?所以id僅使用在大的模塊上,?class可用在重復(fù)使用率高及子級中。
4.?class與id命名:?大的框架命名比如header/footer/wrapper/left/right之類的在core中將由yjbao統(tǒng)一命名
其他樣式名稱由?小寫英文?&?數(shù)字?&?_?來組合命名,?如q_comment,?避免使用中文拼音,?盡量使用簡易的單詞組合；????命名要語義化,?簡明化。
5.?規(guī)避class與id命名相同
6.?為JavaScript預(yù)留鉤子的命名,?請盡量以?js_?起始,?比如:?js_hide,?js_show。
