HTML規範

寫程式碼該開始學的時候，只要把功能實現就可以了，當達到一定的程度的時候，就要對程式碼有一定的要求，比如：對程式碼優化，對程式碼的書寫規範化，就好像多個人協作寫一個產品要讓別人看起來就好像是一個人寫的一樣！還記得有個老師說過寫程式碼不一定要多厲害，其實你別人的差距就在於別人的程式碼寫的符合規範化！程式碼寫的規範化可以避免一些不必要的bug以及程式碼讓人看起來更好！就算有bug也可以在短時間內將bug找出來！

在這兒我根據查詢找到了幾個優秀的文件，在文件之中已經總結的很規範了，在這兒就已經不再贅述了，其實有些規範從一開始就已經遵循了，只有一部分不注意的有些出入，在這裡我只總結自己不規範的地方！

參考文件：http://codeguide.bootcss.com/

https://github.com/Airfald/styleguide/blob/master/html.md

https://zhuanlan.zhihu.com/p/24661371

http://www.jianshu.com/p/3b9a1069c4cd

----------------------------------------------------------------------------------------------------------------------------------------------------------

一、文件型別宣告：

meta標籤：

meta標籤提供的是有關頁面的元資訊（meta-information），在meta標籤裡，我們看到charset=”utf – 8”,對吧，這是字元編碼，因為不同國家的語言不同，其轉義的方式不同，所以為了不會出現亂碼的情況，我們必須加上一個字元編碼，而“utf – 8”又被稱為“萬國碼”。

meta標籤的屬性有兩種：

1）name與content屬性

name屬性用於描述網頁，它以名稱/值來表現的，而name具體的內容則由content屬性來表示。其中，name一般使用較多是：

①：keywords（關鍵字）、description（簡短的描述），便於爬蟲查詢與分類。

keywords

2）②：http-equiv與content屬性

目前較多是使用它們的是進行頁面的重新整理與跳轉頁面。

title標籤：

title顧名思義，就是用來表示這個網頁是用來幹什麼的。title標籤內的內容會在瀏覽器的標題欄中進行顯示，平時我們收藏一些網頁的書籤名稱就是title的內容。同時它可以方便搜尋引擎索引頁面，所以一定要加上，同時最好是和網站本身有關聯性，不能是獨立的。

注意！！！！

`③：title` 必須作為 `head` 的直接子元素，並緊隨 `charset` 宣告之後。

：meta標籤一定是在title標籤的前面。原因是：網頁的讀取順序是從上到下，我們要先進行字元編碼的設定，不然title裡的內容就有可能會出現亂碼了。

DOCTYPE

③：[強制] 使用 `HTML5` 的 `doctype` 來啟用標準模式，建議使用大寫的 `DOCTYPE`。

示例：

<!DOCTYPE html>

④：[建議] 啟用 IE Edge 模式。

示例：

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

[建議]⑤：在 `html` 標籤上設定正確的 lang 屬性。

解釋：

有助於提高頁面的可訪問性，如：讓語音合成工具確定其所應該採用的發音，令翻譯工具確定其翻譯語言等。

示例：

<html lang="zh-CN">

----------------------------------------------------------------------------------------------------------------------------------------------------------

程式碼風格⑥：

用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
巢狀元素應當縮排一次（即兩個空格）。
對於屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合（self-closing）元素的尾部新增斜線 -- HTML5 規範中明確說明這是可選的。
不要省略可選的結束標籤（closing tag）（例如，</li>或 </body>）。

實用為王

儘量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要儘量使用最少的標籤並保持最小的複雜度。

屬性順序⑦：

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

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

class 用於標識高度可複用元件，因此應該排在首位。id 用於標識具體元件，應當謹慎使用（例如，頁面內的書籤），因此排在第二位。

宣告順序⑧：

相關的屬性宣告應當歸為一組，並按照下面的順序排列：

Positioning
Box model
Typographic
Visual

由於定位（positioning）可以從正常的文件流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了元件的尺寸和位置。

其他屬性只是影響元件的內部（inside）或者是不影響前兩組屬性，因此排在後面。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

class 命名⑨：

class 名稱中只能出現小寫字元和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用於相關 class 的命名（類似於名稱空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。
class 名稱應當儘可能短，並且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
基於最近的父 class 或基本（base） class 作為新 class 的字首。
使用 .js-* class 來標識行為（與樣式相對），並且不要將這些 class 包含到 CSS 檔案中。

選擇器十：

對於通用元素使用 class ，這樣利於渲染效能的優化。
對於經常出現的元件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的效能會受到這些因素的影響。
選擇器要儘可能短，並且儘量限制組成選擇器的元素個數，建議不要超過 3 。
只有在必要的時候才將 class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用帶字首的 class 時 -- 字首類似於名稱空間）。

布林（boolean）型屬性十一：

布林型屬性可以在宣告時不賦值。XHTML 規範要求為其賦值，但是 HTML5 規範不需要。

元素的布林型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其賦值的話，請參考 WhatWG 規範：

如果屬性存在，其值必須是空字串或 [...] 屬性的規範名稱，並且不要在首尾新增空白符。

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

引入 CSS 和 JavaScript 檔案十二：

根據 HTML5 規範，在引入 CSS 和 JavaScript 檔案時一般不需要指定 type 屬性，因為 text/css 和 text/javascript分別是它們的預設值。

引入 `CSS` 時必須指明 `rel="stylesheet"`。

命名

[強制] `class` 必須單詞全字母小寫，單詞間以 `-` 分隔。

[強制] `class` 必須代表相應模組或部件的內容或功能，不得以樣式資訊進行命名。

示例：

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

[強制] 元素 `id` 必須保證頁面唯一。

對於無需自閉合的標籤，不允許自閉合。

解釋：

常見無需自閉合標籤有input、br、img、hr等。

示例：

<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />

[建議] 在 `head` 中引入頁面需要的所有 `CSS` 資源。

解釋：

在頁面渲染的過程中，新的CSS可能導致元素的樣式重新計算和繪製，頁面閃爍。

[建議] `JavaScript` 應當放在頁面末尾，或採用非同步載入。

移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 `URL` 協議部分與頁面相同，建議省略協議字首。

解釋：十三：

使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境。

示例：

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

圖片十四：

[強制] 禁止 `img` 的 `src` 取值為空。延遲載入的圖片也要增加預設的 `src`。

為重要圖片新增 `alt` 屬性。

解釋：

可以提高圖片載入失敗時的使用者體驗。

[建議] 新增 `width` 和 `height` 屬性，以避免頁面抖動。

[建議] 有下載需求的圖片採用 `img` 標籤實現，無下載需求的圖片採用 `CSS` 背景圖實現。

解釋：

產品 logo、使用者頭像、使用者產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便使用者下載。
無下載需求的圖片，比如：icon、背景、程式碼使用的圖片等，儘可能採用 css 背景圖實現。

表單十五：

6.1 控制元件標題

[強制] 有文字標題的控制元件必須使用 `label` 標籤將其與其標題相關聯。

解釋：

有兩種方式：

將控制元件置於 label 內。
label 的 for 屬性指向控制元件的 id。

推薦使用第一種，減少不必要的 id。如果 DOM 結構不允許直接巢狀，則應使用第二種。

示例：

<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>

<label for="username">使用者名稱：</label> <input type="textbox" name="username" id="username">

6.2 按鈕

[強制] 使用 `button` 元素時必須指明 `type` 屬性值。

解釋：

button 元素的預設 type 為 submit，如果被置於 form 元素中，點選後將導致表單提交。為顯示區分其作用方便理解，必須給出 type 屬性。

示例：

<button type="submit">提交</button>
<button type="button">取消</button>

[建議] 儘量不要使用按鈕類元素的 `name` 屬性。

解釋：

由於瀏覽器相容性問題，使用按鈕的 name 屬性會帶來許多難以發現的問題。

十六：

任務項

用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

根據規範每天反省，使程式碼寫的更加的規範！

-----------------------------------------------------------------CSS--------------------------------------------------------------------------------

語法

用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
為選擇器分組時，將單獨的選擇器單獨放在一行。
為了程式碼的易讀性，在每個宣告塊的左花括號前新增一個空格。
宣告塊的右花括號應當單獨成行。
每條宣告語句的 : 後應該插入一個空格。
為了獲得更準確的錯誤報告，每條宣告都應該獨佔一行。
所有宣告語句都應當以分號結尾。最後一條宣告語句後面的分號是可選的，但是，如果省略這個分號，你的程式碼可能更易出錯。
對於以逗號分隔的屬性值，每個逗號後面都應該插入一個空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
對於屬性值或顏色引數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六進位制值應該全部小寫，例如，#fff。在掃描文件時，小寫字元易於分辨，因為他們的形式更易於區分。
儘量使用簡寫形式的十六進位制值，例如，用 #fff 代替 #ffffff。
為選擇器中的屬性新增雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了程式碼的一致性，建議都加上雙引號。
避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
單行規則宣告

對於只包含一條宣告的樣式，為了易讀性和便於快速編輯，建議將語句放在同一行。對於帶有多條宣告的樣式，還是應當將宣告分為多行。

這樣做的關鍵因素是為了錯誤檢測 -- 例如，CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條宣告，你就不會忽略這個錯誤；如果是單行多條宣告的話，你就要仔細分析避免漏掉錯誤了。

簡寫形式的屬性宣告

在需要顯示地設定所有值的情況下，應當儘量限制使用簡寫形式的屬性宣告。常見的濫用簡寫屬性宣告的情況如下：

padding
margin
font
background
border
border-radius

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

選擇器

對於通用元素使用 class ，這樣利於渲染效能的優化。
對於經常出現的元件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的效能會受到這些因素的影響。
選擇器要儘可能短，並且儘量限制組成選擇器的元素個數，建議不要超過 3 。
只有在必要的時候才將 class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用帶字首的 class 時 -- 字首類似於名稱空間）。

空格

[強制] `選擇器` 與 `{` 之間必須包含空格。

示例：

.selector {
}

`屬性名` 與之後的 `:` 之間不允許包含空格， `:` 與 `屬性值` 之間必須包含空格。

示例：

margin: 0;

`列表型屬性值` 書寫在單行時，`,` 後必須跟一個空格。

示例：

font-family: Arial, sans-serif;

對於超長的樣式，在樣式值的 `空格` 處或 `,` 後換行，建議按邏輯分組。

示例：

/* 不同屬性值按邏輯分組 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重複多次的屬性，每次重複一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 類似函式的屬性值可以根據函式呼叫的縮排進行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

選擇器

[強制] 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

[強制] `>`、`+`、`~` 選擇器的兩邊各保留一個空格。

示例：

/* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}

如無必要，不得為 `id`、`class` 選擇器新增型別選擇器進行限定。

解釋：

在效能和維護性上，都有一定的影響。

示例：

/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}

選擇器的巢狀層級應不大於 3 級，

url()

[強制] `url()` 函式中的路徑不加引號。

示例：

body {
    background: url(bg.png);
}

[建議] `url()` 函式中的絕對路徑可省去協議名。

示例：

body {
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}

顏色

[強制] RGB顏色值必須使用十六進位制記號形式 `#rrggbb`。不允許使用 `rgb()`。

解釋：

帶有alpha的顏色資訊可以使用 rgba()。使用 rgba() 時每個逗號後必須保留一個空格。

示例：

/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

[強制] 顏色值可以縮寫時，必須使用縮寫形式。

示例：

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

當然，我在扯淡！（Paulo Airfald）

HTML規範

一、文件型別宣告：

③：title 必須作為 head 的直接子元素，並緊隨 charset 宣告之後。

DOCTYPE

③：[強制] 使用 HTML5 的 doctype 來啟用標準模式，建議使用大寫的 DOCTYPE。

④：[建議] 啟用 IE Edge 模式。

[建議]⑤： 在 html 標籤上設定正確的 lang 屬性。

程式碼風格⑥：

實用為王

屬性順序⑦：

宣告順序⑧：

class 命名⑨：

選擇器 十：

布林（boolean）型屬性 十一：

引入 CSS 和 JavaScript 檔案 十二：

引入 CSS 時必須指明 rel="stylesheet"。

命名

[強制] class 必須單詞全字母小寫，單詞間以 - 分隔。

[強制] class 必須代表相應模組或部件的內容或功能，不得以樣式資訊進行命名。

[強制] 元素 id 必須保證頁面唯一。

對於無需自閉合的標籤，不允許自閉合。

[建議] 在 head 中引入頁面需要的所有 CSS 資源。

[建議] JavaScript 應當放在頁面末尾，或採用非同步載入。

移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議字首。

圖片 十四：

[強制] 禁止 img 的 src 取值為空。延遲載入的圖片也要增加預設的 src。

為重要圖片新增 alt 屬性。

[建議] 新增 width 和 height 屬性，以避免頁面抖動。

[建議] 有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。

表單 十五：