Web前端代碼規範與頁面佈局

　　1、 規範目的：

　　爲提升工做效率，便於後臺人員添加功能及前端後期優化維護，輸出高質量的文檔，在網站建設中，使結構更加清晰，代碼簡明有序，有一個更好的前端架構，有利於SEO優化。

　　2、 規範基本準則：

　　符合web標準，使用具備語義的標籤，使結構、表現、行爲分離，兼容性優良，頁面性能優化，代碼簡潔、明瞭、有序，儘量的減小服務器的負載，保證最快的解析速度。

　　3、 文件規範：

　　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/九、chorme等主流瀏覽器均識別

　　(4)\9：全部瀏覽器均識別，包括IE6/7/8

　　(5)+：IE6/7/8識別

　　(6)書寫順序：先寫FF等非IE瀏覽器所需樣式，其次IE8，再次IE7，最後寫IE6

　　4、 自適應頁面佈局(主要平臺爲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%;}