HTML編碼規範

時間 2019-11-21

標籤 html 編碼規範欄目 HTML 简体版

原文原文鏈接

1.黃金法則（Golden rule）javascript

無論有多少人蔘與同一個項目，必定要確保每一行代碼都像是同一我的編寫的。css

Every line of code should appear to be written by a single person, no matter the number of contributors.html

這就須要在一個項目中，咱們永遠遵循同一套編碼規範。在項目開發前，制定一套行之有效的編碼規範，每一個項目組成員都要按這個規範來編碼。html5

2.命名規範java

CSS 文件名使用英文小寫，多個單詞時，中間用下劃線（_）鏈接，如：index.html web-guide.htmlweb
id 命名使用英文駝峯命名法，多采用語義化來命名瀏覽器
自定義屬性採用英文小寫命名，多個單詞時，中間用中劃線（-）鏈接，如：generate-cataloguemvc
以 data- 開始的屬性名，是用來存儲數據的，具體可參考 W3C Html 5 data- 。html能夠經過 dataset 來取屬性中的值，對於不支持的瀏覽器，能夠經過getAttribute來獲取。例如：data-city="ShangHai" ，若是對應的html標籤id爲 cityList，則 document.getElementById('cityList').dataset('city'); 對於不支持的瀏覽器，應該document.getElementById('cityList').getAttribute('-data-city');app

3.書寫規範
3.1 語法框架

使用兩個空格來代替製表符（tab）做爲縮進，— 這是保證代碼在各類環境下顯示一致的惟一方式
嵌套元素應當縮進一次（即兩個空格）
對於屬性中的值，確保所有使用雙引號，不要使用單引號，也不要省略引號
不要在自閉合（self-closing）元素的尾部添加斜線 — HTML5 規範中明確說明這是可選的
不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）
不要一行寫太長的html代碼，建議設置最大長度爲120列，超過120列是最好換行書寫，方便閱讀和排版
嵌套元素最好單獨寫在一行
行內元素中不要嵌套塊級元素，好比：<span><div>不推薦寫法</div></span>
p標籤中是不能嵌套塊級元素的，瀏覽器會解析爲兩個獨立的標籤，而不能到達你想要的結果

3.2 HTML5 doctype

爲每一個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣可以確保在每一個瀏覽器中擁有一致的展示。
3.3 語言屬性 Language attribute

根據 HTML5 規範：

強烈建議爲 html 根元素指定 lang 屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應遵照的規則等等。

更多關於 lang 屬性的知識能夠從此規範中瞭解。

3.4 IE 兼容模式

Internet Explorer 支持使用 <meta> 標籤來指定使用什麼版本的 IE 來渲染頁面。除非有強烈的特殊需求，不然最好設置爲 edge mode，從而讓 IE 採用其所支持的最新模式來渲染。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

具體信息能夠參考這裏

3.5 字符編碼

經過聲明一個明確的字符編碼，讓瀏覽器正確的呈現內容，防止出現亂碼，一般字符編碼爲 UTF-8

<head>
  <meta charset="UTF-8">
</head>

3.6 引入 CSS 和 JavaScript 文件

根據 HTML5 規範，在引入 CSS 和 JavaScript 文件時通常不須要指定 type 屬性，由於 text/css 和 text/javascript 分別是它們的默認值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
 
<!-- JavaScript -->
<script src="code-guide.js"></script>

3.7 實用高於完美

儘可能遵循 HTML 標準和語義，可是不該該以浪費實用性做爲代價。任什麼時候候都要用盡可能小的複雜度和儘可能少的標籤來解決問題。

3.8 屬性順序

HTML 屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class 用於標識高度可複用組件，所以應該放在首位。id 用於標識具體組件，應該儘可能少使用（例如，頁面內的書籤），所以排在第二位。

以上順序也不必定是絕對的，能夠根據須要把經常使用的放在首位

3.9 布爾（boolean）型屬性

Boolean 屬性指不須要聲明值的屬性。XHTML 須要每一個屬性聲明值，可是 HTML5 並不須要。瞭解更多內容，參考 WhatWG section on boolean attributes

一個元素中 Boolean 屬性的存在表示取值 true，不存在則表示取值 false。若是必定要爲其賦值的話，請參照 WhatWG 中的說明。

若是屬性存在，其值必須是空字符串或 [...] 屬性的自己名稱，而且不要在首尾添加空白符。

簡單來講，就是不用賦值。

<input type="text" disabled>
 
<input type="checkbox" value="1" checked>
 
<select>
  <option value="1" selected>1</option>
</select>
 
<!--不建議 -->
<input type="text" value="1" readonly="readonly" disabled="disabled">

雖然 HTML5是這樣規定的，可是對於IE瀏覽器，若是不指定屬性值，有時會有問題的，尤爲是readonly和 disabled ，因此最好仍是設置爲 readonly="readonly" disabled="disabled"

3.10 減小標籤嵌套的數量

在編寫 HTML 代碼時，儘可能避免多餘的父節點。不少時候，須要經過迭代和重構來使 HTML 變得更少。請看下面的例子

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>
 
<!-- Better -->
<img class="avatar" src="...">

3.11 避免利用JavaScript 生成標籤或html片斷

經過 JavaScript 生成的標籤或html片斷讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免，咱們能夠採用模板的方式來處理，經常使用的模板有

handlebars（模板引擎類），Ember.js 就採用該模板引擎

knockoutjs，除了支持模板，他仍是一個輕量級的MVVM框架

mustashe，一個模板引擎

JsRender，一個很是好用的html模板引擎類

在不引入其餘mvc或mvvm框架的前提下，採用 JsRender 或 handlebars 來處理html模板，這兩個模板支持循環、條件語句，還支持在模板中動態執行JavaScript腳本（不建議這樣作）。固然咱們還能夠引入MVC框架，這些框架通常都自帶模板處理引擎，好比Angular、Ember、KnockoutJs等

4.語義化命名和語義化標籤

咱們儘可能多采用語義化來命名id，而且採用語義化標籤來書寫html代碼，多用html5中新增的標籤來書寫。
5.Emmet幫助咱們快速書寫html代碼