基本原則

結構、樣式、行為分離

盡量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表裡，行為都放到腳本里。

縮進

統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼

使用不帶 BOM 的 UTF-8 編碼。

在 HTML中指定編碼 ；

無需使用 @charset 指定樣式表的編碼，它默認為 UTF-8 （參考 @charset）；

一律使用小寫字母

省略外鏈資源 URL 協議部分

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免Mixed Content 問題，減小文件位元組數。

其它協議（ftp 等）的 URL 不省略。

統一注釋

通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

HTML篇

標籤

自閉合（self-closing）標籤，無需閉合 ( 例如： img input br hr 等 )；

可選的閉合標籤（closing tag），需閉合 ( 例如：

或 )；

盡量減少標籤數量；

Class 與 ID

class 應以功能或內容命名，不以表現形式命名；

class 與 id 單詞字母小寫，多個單片語成時，採用中劃線-分隔；

使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class；

屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。

id

class

name

data-xxx

src, for, type, href

title, alt

aria-xxx, role

引號

屬性的定義，統一使用雙引號。

嵌套

a 不允許嵌套 div這種約束屬於語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。

嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。

語義嵌套約束

用於

或 下；

, 用於 下；

, , , , 用於 下；

嚴格嵌套約束

inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;

里不可以嵌套互動式元素、、等;

里不可以嵌套塊級元素

、

~、

、

//

、//、等。

更多詳情，參考WEB標準系列-HTML元素嵌套

布爾值屬性

HTML5 規範中 disabled、checked、selected 等屬性不用設置值。

語義化

沒有 CSS 的 HTML 是一個語義系統而不是 UI 系統。

通常情況下，每個標籤都是有語義的，所謂語義就是你的衣服分為外套， 褲子，裙子，內褲等，各自有對應的功能和含義。所以你總不能把內褲套在脖子上吧。– 一絲

此外語義化的 HTML 結構，有助於機器（搜索引擎）理解，另一方面多人協作時，能迅速了解開發者意圖。

HEAD

文檔類型

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明， 這樣能夠確保在每個瀏覽器中擁有一致的表現。

語言屬性

lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。

字元編碼

以無 BOM 的 utf-8 編碼作為文件格式;

指定字元編碼的 meta 必須是 head 的第一個直接子元素；

IE 兼容模式

優先使用最新版本的IE 和 Chrome 內核

SEO 優化

viewport

viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容；

width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；

device-width: 設備解析度寬度，輸出設備的屏幕可見寬度；

initial-scale: 初始縮放比例；

maximum-scale: 最大縮放比例；

為移動端設備優化，設置可見區域的寬度和初始縮放比例。

iOS 圖標

apple-touch-icon 圖片自動處理成圓角和高光等效果;

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;

favicon

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件；

使用 link 指定 favicon；

HEAD 模板

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！