html代碼規范 · 卓健前端技術手冊

## 基本規范 1. 使用<!Doctype html> 文檔類型聲明，h5的最新聲明方式 `<!DOCTYPE html> ` 2. 設置網頁的編碼以及文檔類型 `<meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />` 3. 設置網頁的渲染模式，按照最新的模式渲染 `<meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1">` 4. 如果是移動頁面或者使用boot框架，設置meta的讀取情況。 `<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>` 5. 網站的相關meta屬性需要設置的設置，比如網站關鍵字，作者，描述，網站圖標，請本站搜索meta關鍵字 6. js以及css相關文檔在head中引入，其中type屬性可以省略，默認正確的，link標簽的rel屬性不可省略。 ~~~ <script src = "js/jquery-1.11.1.min.js" ></script> <link rel = "stylesheet" href = "css/bootstrap.min.css" > ~~~ 7. 針對ie引入的文件寫入注釋語句中，注釋條件語法如下，現在只針對ie8以上版本適配，需要的適配文件見有關資源。目前已經收集的兼容文件有兼容h5,媒體查詢響應，css3選擇器，css3部分屬性,詳見下面代碼部分。（備注：css3樣式生效的前提是樣式寫在外鏈的樣式文件中，寫在style中是無效的）。 ~~~ html  # pie 的需要追加綁定腳本 $(function() { if (window.PIE) { $( '.container-fluid' ).each(function () { PIE.attach(this); }); } }); ~~~ 8\. 針對jquery框架，特殊說明，pc網站的統一使用jq1.12.1版本，以便可以兼容ie678，手機端使用zepto最新版本即可（1.2.0），并且在其他js引入順序之前。 9\. 設置head內title標簽屬性，設置正確的網頁標題。 10\. 頁面標簽內不寫腳本以及樣式文件，實現網頁的結構、樣式、行為三層分離，也避免寫style標簽樣式，避免focu現象。 11\. 與dom有關的腳本綁定事件，寫在domready之后，即可以加快頁面的載入速度，也能避免事件綁定失敗。特別注意的是，如果是自定義非綁定事件，寫在 domready外面。 12\. 頁面文件，img，css等文件的命名使用英文語義化，使用駝峰式命名，對于特殊含義的使用中劃線分割，對于格式以及訪問層級的使用.,禁止使用中文，不建議使用拼音。備注：文件名稱不宜過長控制在4個單詞以內。 13\. 待補充... ## 語法規范 * 以下規范不分先后 1. 標簽以及標簽屬性小寫 2. 可省略的閉合標簽不省略，自閉合的標簽可不寫結束斜線。eg:`<br>` 3. 嵌套的標簽必須被正確的嵌套，嵌套的子元素有一格的縮進 4. 使用語義化的標簽，例如`header,footer,nav,article,fieldset,section`等，避免全頁使用div布局。 5. 針對img標簽，寫有合適的`alt`以及`title`屬性，用于描述圖片信息。避免出現src="" 問題 6. 對于標題項或者圖片等，如果有需要顯示的交互內容，建議寫title屬性，用于提示內容，在新浪以及淘寶等網站的圖片以及標題中都有title屬性，用于增加頁面友好度，需要注意的是如果頁面元素本身有交互效果或者彈框，可以省去。 7. 頁面有完整的html結構，包括html,head,body標簽。 8. 盡可能精簡頁面結構，標簽最大可能性的是用于存放內容的，如果需要特殊樣式用css實現，減少無意義的空標簽。這個稱作頁面重構。 9. 格式化規則：每一個塊級元素，新增空白行，行級元素寫在同一行，同時子元素有兩個空格的縮進。需要注意的是，行級元素換行會引起不必要的空白外間距，避免方式有兩種，一種就是行級元素寫在同一行，另外一種就是父元素設置`font-size:0`，當然也可以取巧，只把行級元素的開始標簽頭部寫在上一行即可。 10. html屬性值一律建議使用雙引號，格式化html的同時，也便于js編寫dom結構。（js為單引號） 11. 屬性的使用順序` class id name data- src for type href title alt aria role` 12. 布爾型屬性不用賦值，有就是true，沒有就是false 13. 有良好的注釋規范，針對頁面模塊有簡要的注釋，便于維護。 ~~~   ~~~ 14\. 待補充... ## 更多 ### 友情鏈接 * [w3school官網-html](http://www.w3school.com.cn/html5/index.asp) * [w3chtml教程](http://www.w3chtml.com/html5/course/) * [極客學院html視頻教程](http://search.jikexueyuan.com/course/?q=HTML5)