HTML規範

時間 2019-11-13

標籤 html 規範欄目 HTML 简体版

原文原文鏈接

1代碼風格

1.1縮進

**【強制】**使用4個空格做爲一個縮進層級，不容許使用2個空格或標籤字符;javascript

2屬性

2.1屬性引號

**【強制】**對於屬性的定義使用雙引號，不容許使用單引號，不容許不使用引號;css

示例：html

<！ -沒那麼大- > < IMG  類 = '化身'  SRC = 「 ./img/avatar.png 」  ALT = '化身' > <！ - Better - > < img  class = 「 avatar 」  src = 「。/  img / avatar.png 」 alt = 「 avatar 」 >

2.2屬性大小寫

**【強制】**屬性名應該小寫，不容許大寫或大小寫混合;html5

示例：java

<！ -不太好- > < table  cellSpacing = 「 0 」 > ... </ table > <！ - Better - > < table  cellspacing = 「 0 」 > ... </ table >

2.3屬性布爾值

**【建議】**布爾類型的屬性，建議不添加屬性值，至少同一項目要保持一致;ios

示例：git

< input  type = 「 text 」  disabled > < input  type = 「 checkbox 」  checked >

2.4屬性聲明順序

**【建議】** HTML屬性建議儘可能按照如下給出的順序依次排列，確保代碼的易讀性。github

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

class用於標識高度可複用組件，所以應該排在首位.id用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），建議預留更多的id命名給技術，所以排在第二位。web

<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="...">

2.5 自定義屬性

**【建議】**使用自定義屬性做爲JS的hook，建議以data-爲前綴；瀏覽器

示例：

<input data-role="getPic" type="button">

2.6 連接屬性

**【強制】**禁止 a 標籤的 href 取值爲空或不寫 href 屬性，重構時默承認用 # 代替；

若是不須要使用連接功能，請不要使用不帶 href 的 a 標籤，既不符合標籤的語義，也可能會產生未知的兼容性問題；

示例：

<!-- Not so great --> <a href="" title="title">歡聚時代</a> <a class="xxx">歡聚時代</a> <!-- Better --> <a href="#" title="title">歡聚時代</a>

[⬆]

3 標籤

3.1 標籤大小寫

**【強制】**標籤名應該小寫，不容許大寫或大小寫混合；

示例：

<!-- Not so great --> <DIV clsss="xxx">...</DIV> <!-- Better --> <div clsss="xxx">...</div>

3.2 標籤自閉合

**【建議】**對於無需自閉合的標籤，建議不自閉合，至少同一項目要保持一致；

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

示例：

<input type="checkbox" value="1">

3.3 標籤嵌套

**【強制】**標籤使用必須符合標籤嵌套規則；

例如：內聯元素不能嵌套塊元素，<p>元素和<h1~6>元素不能嵌套塊元素等，詳見 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) 與 HTML5 Content models;

**【建議】**實用爲王，儘可能遵循 HTML 標準和語義，可是不要以犧牲實用性爲代價。任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度。

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

3.4 避免過期標籤

**【強制】**不容許使用過期的舊標籤，請使用新標籤或者CSS代替：

~~acronym~~ → abbr
~~applet~~ → object
~~b~~ → strong
~~dir~~ → ul
~~strike~~ → del
~~basefont~~
~~big~~
~~center~~
~~font~~
~~isindex~~
~~tt~~
~~u~~

請參詳：http://www.w3schools.com/tags/

[⬆]

4 head設定

4.1 doctype

**【強制】**doctype使用 HTML5 的 doctype 來啓用標準模式。

其中 doctype 建議使用大寫的 DOCTYPE；關於doctype該使用大寫仍是小寫的討論

示例：

<!DOCTYPE html>

4.2 頁面編碼

**【強制】**頁面必須明確指定字符編碼，讓瀏覽器快速肯定適合網頁內容的渲染方式。指定字符編碼的 meta 必須是 head 的第一個直接子元素。建議使用無 BOM 的 UTF-8 編碼；

示例：

<meta charset="UTF-8">

4.3 兼容模式

**【建議】**PC端啓用 IE Edge 模式，並針對360瀏覽器啓用webkit渲染模式；

示例：

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit">

4.4 引入CSS

**【強制】**引入 CSS 時必須指明 rel="stylesheet"；

建議在 head 中引入頁面須要的全部 CSS 資源，由於在頁面渲染的過程當中，新的CSS可能致使元素的樣式從新計算和繪製，頁面閃爍；

示例：

<link rel="stylesheet" src="global.css">

4.5 引入JavaScript

**【建議】**JavaScript應當放在頁面尾部；出於性能方面的考慮，如非必要，請遵照此條建議；

示例：

<body>
    <!-- a lot of elements --> <script src="main.js"></script> </body>

4.6 favicon

**【強制】**保證 favicon 可訪問；

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

在 Web Server 根目錄放置 favicon.ico 文件;
使用 link 指定 favicon;

示例：

<link type="image/x-icon" rel="shortcut icon" href="path/to/favicon.ico">

附：工做流中默認的PC端head設定

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="Keywords" content="多玩遊戲"> <meta name="description" content="多玩遊戲"> <!-- a lot of elements --> </head> <body> <!-- a lot of elements --> </body> </html>

附：工做流中默認的移動端head設定

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="format-detection" content="telephone=no,address=no,email=no"> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <meta name="keywords" content="多玩遊戲"> <meta name="description" content="多玩遊戲"> <!-- a lot of elements --> </head> <body> <!-- a lot of elements --> </body> </html>

注意：當該項目有相關的app在app store中，設置metaapple-itunes-app，如上面最後一條，並填上對應的app-id。詳細請看：Promoting Apps with Smart App Banners

更詳細的meta屬性設置能夠參詳：https://github.com/hzlzh/cool-head

[⬆]

5 圖片

**【強制】**禁止 img 的 src 取值爲空；延遲加載的圖片也要增長默認的 src；

src 取值爲空，會致使部分瀏覽器從新加載一次當前頁面，參考 Yahoo performance rules

**【建議】**爲重要圖片添加 alt 屬性；

能夠提升圖片加載失敗時的用戶體驗。

**【建議】**添加 width 和 height 屬性，以免頁面抖動；

**【建議】**有下載需求或者預期會靈活變更的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現；

用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載；
無下載需求的圖片，好比：icon、背景、代碼使用的圖片等，儘量採用 css 背景圖實現。

[⬆]

6 表單

**【強制】**有文本標題的控件必須使用 label 標籤將其與其標題相關聯；

有兩種方式：

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

推薦使用第一種，減小沒必要要的 id。若是 DOM 結構不容許直接嵌套，則應使用第二種。

示例：

<label><input name="confirm" type="checkbox" value="on"> 我已確認上述條款</label> <label for="username">用戶名：</label> <input id="username" name="username" type="checkbox">

**【建議】**儘可能不要使用按鈕類元素的 name 屬性；

因爲瀏覽器兼容性問題，使用按鈕的 name 屬性會帶來許多難以發現的問題。具體狀況可參考此文；

**【建議】**在針對移動設備開發的頁面時，根據內容類型指定輸入框的 type 屬性；

根據內容類型指定輸入框類型，能得到能友好的輸入體驗。

示例：

<input type="number" value="1">

[⬆]

7 註釋

【建議】對超過10行的頁面模塊進行註釋, 以下降開發人員的嵌套成本和後期的維護成本。建議使用結尾註釋方式，例如：

當模塊代碼量較少時，能夠省略 start。

<!-- 文章內容 start --> <section id="post"> do some things... </section> <!-- 文章內容 end -->

或者標註模塊的class或者id：

<！ - #post start - > < section  id = 「 post 」 > 作一些事...... </ section > <！ - #post end - >

[⬆]

參考資料：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。