Web前端代碼規範與頁面佈局
一.為提高工作效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構，有利於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.example.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;
}
#sidebar {
display:none;
}
}
4. 圖片自適應
img， object { max-width: 100%;}
閱讀更多 富IT 的文章
