一、 規范目的：
為提高工作效率，便於后台人員添加功能及前端后期優化維護，輸出高質量的文檔，在
網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構，有利於SEO優化。
二、 規范基本准則：
符合web標准，使用具有語義的標簽，使結構、表現、行為分離，兼容性優良，頁面性能優化，代碼簡潔、明了、有序，盡可能的減少服務器的負載，保證最快的解析速度。
三、 文件規范：
html、css、js、images文件均歸檔至約定的目錄中。
1. html
（1）編碼：所有編碼均采用xhtml，標簽必須閉合，屬性值用雙引號包括，編碼統一為utf-8。
（2）語義化：語義化html，正確使用標簽，充分利用無兼容性問題的
html自身標簽。
（3）文件命名：命名以中文命名，依實際模塊命名，如同一模塊以_&title&_來組合命名，以方便添加功能時查找對應頁面。
（4）文件頭部head的內容
- title，需要添加標題
- 編碼charset=UTF-8
- 緩存：
Content=’-1’表示立即過期。
- 添加description、keywords內容
Robots content部分有四個指令選項：index、noindex、follow、nofollow，用‘，’分隔，如：
在head標簽內引入css文件，有助於頁面渲染
引入樣式文件或
JavaScript文件時， 須略去默認類型聲明.
頁腳引入javascript文件
（5）連接地址標簽：書寫鏈接地址時，避免重定向，如href=”
http://www.100sucai.com”，需在地址后面加‘/’
（6）盡可能減少div嵌套，如：根據重要性使用h1-6標簽，段落使用p，列表使用ul，內聯元素中不可嵌套塊級元素，為含有描述性表單元素（input，tetarea）添加label
（7）圖片
能以背景形式呈現的圖片，盡量寫入css樣式中
區分作為內容的圖片和作為背景的圖片，作為背景的圖片采用Css sprite技術，放在一張大圖里
重要圖片必須加上alt屬性，給重要的元素和截斷的元素加上title
（8）注釋：給區塊代碼及重要功能加上注釋，方便后台添加功能
（9）轉義字符：特殊符號使用轉義字符
（10）頁面架構時考慮擴展性
2. Css
（1）頁面內部盡量避免使用style屬性
（2）css放在head標簽中，由link標簽引入，使頁面的結構與表現分離。
（3）文件命名：以英文命名，后綴.css，共用：base.css，首頁：index.css，其他頁面樣式依具體模塊需求命名
（4）編碼統一為utf-8
（5）Class與id的使用：
Id:具有唯一性，是父級的，用於標識頁面上的特定元素，如header/footer/wrapper/left/right之類
Class:可以重復使用，是子級的，可用於頁面上任意多個元素
命名：以小寫英文字母、數字、下划線組合命名，避免使用中文拼音，盡量使用簡易的單詞組合，避免使用拼音，采用駝峰命名法和划線命名法，提高可讀性，如：dropMenu、sub_nav_menu、drop-menu等。
（6）為JavaScript預留鈎子的命名， 以 js_ 起始， 比如:js_hide， js_show
（7）書寫代碼前，考慮樣式重復利用率，充分利用html自身屬性及樣式繼承原理減少代碼量，代碼建議單行書寫，利於后期管理
（8）圖片
命名：小寫英文字母、數字、_ 的組合，使用有意義的名稱或英文簡寫，最好不要使用漢語拼音，區分大寫字。
使用sprite技術， 減小http請求，sprite按模塊制作
（9）書寫順序：保證同類型屬性寫在一起，一般遵循布局定位屬性–>自身屬性–>文本屬性–>其他屬性的書寫格式
（10）書寫順序規則
定位屬性（比如：display， position， float， clear， visibility， table-layout等）
自身屬性（比如：width， height， margin， padding， border等）
文本屬性（比如：font， line-height， text-align， text-indent， vertical-align等）
其他屬性（比如：color， background， opacity， cursor，content， list-style， quotes等）
（11）縮進：統一使用tab進行縮進
（12）樣式表中中文字體名，最好轉成unicode碼，以避免編碼錯誤時亂碼。
（13）減少影響性能的屬性，如：position，float
（14）為大區塊樣式添加注釋，小區塊適量注釋。
3. Javascript
（1）文件編碼統一為utf-8， 書寫時， 每行代碼結束必須有分號‘;’，盡量根據需求編寫原生代碼開發，以避免造成的代碼污染(沉冗代碼 || 與現有代碼沖突 || …)等問題
（2）在頁腳引入
javascript腳本，采用外鏈引入形式，使頁面的結構與行為分離
（3）命名：
文件命名：以英文命名，后綴為.js，共用：common.js，其他命名可根據模塊需求命名
變量命名：駝峰式命名，原生JavaScript變量要求是純英文字母， 首字母須小寫， 如iTaoLun。變量集中聲明， 避免全局變量
類命名：首字母大寫，
駝峰式命名. 如 ITaoLun;
函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
命名語義化， 盡可能利用英文單詞或其縮寫;
（4）規則
盡量避免使用存在兼容性及消耗資源的方法或屬性
后期優化中， JavaScript非注釋類中文字符須轉換成unicode編碼使用， 以避免編碼錯誤時亂碼顯示
代碼結構明了， 加適量注釋. 提高函數重用率
注重與html分離， 減小reflow， 注重性能.
4. 注釋規范
（1）html：注釋格式，”-”只能在注釋的始末位置，不可置入注釋文字區域
（2）Css：注釋格式
（3）Javascript：單行注釋：//這兒是注釋，多行注釋：
5. Css Hack 特殊符號
（1）* ：IE6/7都能識別*，標准瀏覽器不識別
（2）_：只有IE6識別
（3）！Important：IE6不識別，Firefox，IE7/8/9、chorme等主流瀏覽器均識別
（4）\9：所有瀏覽器均識別，包括IE6/7/8
（5）+：IE6/7/8識別
（6）書寫順序：先寫FF等非IE瀏覽器所需樣式，其次IE8，再次IE7，最后寫IE6
四、 自適應頁面布局（主要平台為ios和安卓，所以此不考慮IE兼容性）
1. 布局細節
首先頭部head中加入meta新標簽
，讓網頁寬度默認等於屏幕寬度，原始縮放比例為1.0，即100%顯示。
Position：不能使用絕對定位
Width：不能使用px寬度，應使用百分比或auto
Font：不能使用絕對大小，應使用em
2. 流式布局float的使用
各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
3.
CSS3引入的Media Query模塊，可自動探測屏幕寬度，加載相應的CSS文件
，屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件
，如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
@importurl("tinyScreen.css") screen and (max-device-width: 400px);
同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
轉自：http://blog.sina.com.cn/s/blog_6c2f334c01018rmz.html