規(guī)范目的：
為提高團隊協(xié)作效率,
便于后臺人員添加功能及前端后期優(yōu)化維護,
輸出高質(zhì)量且統(tǒng)一的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認,前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。
本文檔如有不對或者不合適的地方請及時提出,經(jīng)討論決定后方可更改。
基本準則：
符合web標準,語義化html,結(jié)構表現(xiàn)行為分離,兼容性優(yōu)良歇万。頁面性能方面,代碼要求簡潔明了有序,盡可能的減小服務器負載,保證最快的解析速度末贾。
主要內(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拴测。
同時保存好相應的設計稿放于同目錄中,若界面稿命名為中文,請重命名與html文件同名,以方便后端開發(fā)人員添加功能時查找對應頁面乓旗；
3.?css文件命名:英文命名,后綴.css.共用core.css,
首頁
index.css,
其他頁面依實際
模塊需求命名。
二集索、
html
書寫規(guī)范1.文檔類型聲明及編碼:
統(tǒng)一為
html5
聲明類型屿愚，寫法如下：
編碼統(tǒng)一為
utf-8汇跨，寫法如下：-8″?/>書寫時利用
IDE
實現(xiàn)層次分明的縮進。
2.
css文件如無特殊情況渺鹦，應鏈接至網(wǎng)頁頭部...標簽內(nèi)
...
標簽之后扰法。
3.
引入外部
css文件時，應去除類型聲明毅厚，寫法如下：
...4. 所有編碼均遵循xhtml標準, 標簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成塞颁；且所有標簽必須閉合： 包括br (), hr()，,屬性值必須用雙引號包括,寫法如下：
5. 充分利用無兼容性問題的html自身標簽, 比如span, em, strong, optgroup, label,等等吸耿；? ? 需要為 html元素添加自定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標簽去設置?
6. 語義化html, 如 標題根據(jù)重要性用h*(同一頁面只能有一個h1,h1用于logo), 段落標記用p, 列表用ul, 內(nèi)聯(lián)元素中不可嵌套塊級元素祠锣；? ? h1請使用在logo上，h2-h6 應用在各級標題上咽安。? ?
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屬性糕珊，避免圖片加載失敗而導致錯位动分，書寫示例：給重要的元素和截斷的元素加上title
13.?給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,?方便后臺添加功能。
14.?特殊符號使用:?盡可能使用代碼替代红选，書寫示例：??>?>??空格
15.?書寫頁面過程中,?請考慮向后擴展性澜公。
16.?class和id的書寫規(guī)范請參考css部分
二、CSS書寫規(guī)范
1.?編碼統(tǒng)一為utf-8喇肋。
2.?協(xié)作開發(fā)及分工:共用css文件core.css?暫時由tech?yjbao負責維護坟乾。
協(xié)作開發(fā)過程中,?每個頁面請務必都要引入,?此文件包含reset及頭部底部樣式,?此文件不可隨意修改;
3.?class與id的使用:?id是唯一的并是父級的,?class是可以重復的并是子級的,?所以id僅使用在大的模塊上,?class可用在重復使用率高及子級中。
4.?class與id命名:?大的框架命名比如header/footer/wrapper/left/right之類的在core中將由yjbao統(tǒng)一命名
其他樣式名稱由?小寫英文?&?數(shù)字?&?_?來組合命名,?如q_comment,?避免使用中文拼音,?盡量使用簡易的單詞組合蝶防；????命名要語義化,?簡明化甚侣。
5.?規(guī)避class與id命名相同
6.?為JavaScript預留鉤子的命名,?請盡量以?js_?起始,?比如:?js_hide,?js_show。
