htmlhint 規則詳解

王頂發表於2019-02-16
HTML

HTML 靜態檢查規則

HTMLHint 工具內建 23 條規則，可以對 HTML 程式碼檔案進行靜態程式碼檢查，從而提高 HTML 程式碼編寫的規範和質量。現在把 23 條規則翻譯如下。

一、規則列表

  1. 標籤名必須小寫
  2. 屬性名必須小寫
  3. 屬性值必須放在雙引號中
  4. 屬性值一定不可為空
  5. 屬性值一定不可重複
  6. Doctype必須是 HTML 文件的第一行
  7. 標籤必須成對
  8. 標籤必須自封閉
  9. 特殊字元必須
  10. ID 屬性必須唯一
  11. src 屬性一定不可為空
  12. title 屬性必須出現在標籤中
  13. img 標籤必須包含 alt 屬性
  14. Doctype 必須是 HTML5
  15. ID 和 Class 的命名規則必須統一
  16. 不該使用樣式標籤
  17. 不該使用行內樣式
  18. 不該使用行內指令碼
  19. 空格和製表符一定不可混合在行前
  20. ID 和 Class 一定不可使用廣告關鍵詞
  21. href 必須是絕對路徑或者相對路徑
  22. 屬性值一定不可使用不安全字元
  23. script 標籤不該使用在頭部

二、規則解讀

1. 標籤名必須小寫

  • 規則 ID: tagname-lowercase
  • 級別: error

  • 符合規範的：

    <span><div>

  • 不符合規範的：

    <SPAN><BR>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

2. 屬性名必須小寫

  • 規則 ID: attr-lowercase
  • 級別: error

  • 符合規範的：

    <img src="test.png" alt="test">

  • 不符合規範的：

    <img SRC="test.png" ALT="test">

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則
    3. [`viewBox`, `test`]: 忽略一些屬性名

3. 屬性值必須放在雙引號中

  • 規則 ID: attr-value-double-quotes
  • 級別: error

  • 符合規範的：

    <a href="" title="abc">

  • 不符合規範的：

    <a href=`` title=abc>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

4. 屬性值一定不可為空
標籤中使用的屬性必須設定值，一定不可為空。

  • 規則 ID: attr-value-not-empty
  • 級別: warning

  • 符合規範的：

    <input type="button" disabled="disabled">

  • 不符合規範的：

    <input type="button" disabled>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

5. 屬性值一定不可重複

  • 同一個標籤中，同一個屬性一定不可多次賦值。
  • 規則 ID: attr-no-duplication
  • 級別: error

  • 符合規範的：

    <img src="a.png" />

  • 不符合規範的：

    <img src="a.png" src="b.png" />

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

6. Doctype 必須是 HTML 文件的第一行

  • 規則 ID: doctype-first
  • 級別: error

  • 符合規範的：

    <!DOCTYPE HTML><html>

  • 不符合規範的：

    <!--comment--><!DOCTYPE HTML><html>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

7. 標籤必須成對

  • 規則 ID: tag-pair
  • 級別: error

  • 符合規範的：

    <ul><li></li></ul>

  • 不符合規範的：

    <ul><li></ul>
<ul></li></ul>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

8. 標籤必須自封閉

  • 空標籤必須自封閉
  • 規則 ID: tag-self-close
  • 級別: warning

  • 符合規範的：

    <br />

  • 不符合規範的：

    <br>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

9. 特殊字元必須轉義

  • 規則 ID: spec-char-escape
  • 級別: error

  • 符合規範的：

    <span>aaa&gt;bbb&lt;ccc</span>

  • 不符合規範的：

    <span>aaa>bbb<ccc</span>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

10. ID 屬性必須唯一

  • 同一個 HTML 文件中 ID 屬性必須唯一。
  • 規則 ID: id-unique
  • 級別: error

  • 符合規範的：

    <div id="id1"></div><div id="id2"></div>

  • 不符合規範的：

    <div id="id1"></div><div id="id1"></div>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

11. src 屬性一定不可為空

  • img、script 或 link 標籤的 src 屬性一定不可為空，因為空的 src 屬性會導致當前頁面被訪問兩次。
  • 規則 ID: src-not-empty
  • 級別: error

  • 符合規範的：

    <img src="test.png" />
<script src="test.js"></script>
<link href="test.css" type="text/css" />
<embed src="test.swf">
<bgsound src="test.mid" />
<iframe src="test.html">
<object data="test.swf">

  • 不符合規範的：

    <img src />
<script src=""></script>
<script src></script>
<link href="" type="text/css" />
<link href type="text/css" />
<embed src="">
<embed src>
<bgsound src="" />
<bgsound src />
<iframe src="">
<iframe src>
<object data="">
<object data>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

12. title 標籤必須出現

  • title 標籤必須出現在 head 標籤中。
  • 規則 ID: title-require
  • 級別: error

  • 符合規範的：

    <html><head><title>test</title></head></html>

  • 不符合規範的：

    <html><head></head></html>
<html><head><title></title></head></html>
<html><title></title><head></head></html>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

13. alt 屬性必須有值

  • img 標籤必須有 alt 屬性值，並且 area[href] 標籤和 input[type=”image”] 標籤的 alt 屬性也必須賦值。
  • 規則 ID: alt-require
  • 級別: warning

  • 符合規範的：

    <img src="test.png" alt="test">
<input type="image" alt="test">
<area shape="circle" coords="180,139,14" href="test.html" alt="test" />

  • 不符合規範的：

    <img src="test.png">
<input type="image">
<area shape="circle" coords="180,139,14" href="test.html" />

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

14. Doctype 必須是 HTML5

  • 規則 ID: doctype-html5
  • 級別: warning

  • 符合規範的：

    <!DOCTYPE html><html>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

15. ID 和 Class 的命名規則必須統一

  • 可以是單詞加下劃線、單詞加連字元或者駝峰方式，但是必須採用一種規則，整個 HTML 文件，甚至整個專案必須統一。
  • 規則 ID: id-class-value
  • 級別: warning

  • 符合規範的：

    underline: <div id="aaa_bbb">
dash: <div id="aaa-bbb">
hump: <div id="aaaBbb">

  • 配置值：

    1. underline: 下劃線方式（aaa_bb）
    2. dash: 啟用規則（aaa-bb）
    3. hump: 啟用規則（aaBbb）
    4. false: 禁用規則

16. 不該使用樣式標籤

  • 規則 ID: style-disabled
  • 級別: warning

  • 不符合規範的：

    <head><style type="text/css"></style></head>
<body><style type="text/css"></style></body>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

17. 不該使用行內樣式

  • 規則 ID: inline-style-disabled
  • 級別: warning

  • 不符合規範的：

    <div style="color:red"></div>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

18. 不該使用行內指令碼

  • 規則 ID: inline-script-disabled
  • 級別: warning

  • 不符合規範的：

    <img src="test.gif" onclick="alert(1);">
<img src="javascript:alert(1)">
<a href="javascript:alert(1)">test1</a>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

19. 空格和製表符一定不可混合在行前

  • 必須使用空格做為程式碼縮排的前導字元，縮排的數量必須整個 HTML 文件統一，甚至整個專案必須統一。
  • 規則 ID: space-tab-mixed-disabled
  • 級別: warning

  • 符合規範的：

    →→<img src="tab.png" />
········<img src="space.png" />

  • 不符合規範的：

    →····<img src="tab_before_space.png" />
····→<img src="space_before_tab.png" />
  • 說明：上面的例項程式碼，·表示空格，→表示製表符

  • 配置值：

    1. space: 空格方式（只有空格縮排）
    2. space4: 空格方式並且要求縮排空格個數
    3. tab: 製表符方式（只有製表符縮排）
    4. false: 禁用規則

20. ID 和 Class 一定不可使用 ad 關鍵詞

  • 使用 ad 關鍵詞的 ID 或 Class，會被廣告攔截軟體遮蔽
  • 規則 ID: id-class-ad-disabled
  • 級別: warning

  • 符合規範的：

    <div id="adcontainer"></div>

  • 不符合規範的：

    <div id="ad-container"></div>
<div id="ad_container"></div>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

21. href 必須是絕對路徑或者相對路徑

  • 規則 ID: href-abs-or-rel
  • 級別: warning

  • 符合規範的：

    abs: <a href="http://www.alibaba.com/">test1</a`<a href="https://www.alipay.com/">test2</a>
rel: <a href="test.html">test1</a`<a href="../test.html">test2</a>

  • 配置值：

    1. abs: 絕對路徑方式
    2. rel: 相對路徑方式
    3. false: 禁用規則

22. 屬性值一定不可使用不安全字元

  • 規則 ID: attr-unsafe-chars
  • 級別: warning

  • 符合規範的：

    <li><a href="https://vimeo.com/album/1951235/video/56931059">Sud Web 2012</a></li>

  • 不符合規範的：

    <li><a href="https://vimeo.com/album/1951235/video/56931059‎u0009‎">Sud Web 2012</a></li>
  • 說明：通常不安全字元都在 href 屬性值的尾部

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

23. script 標籤不該使用在頭部

  • 規則 ID: attr-unsafe-chars
  • 級別: warning

  • 符合規範的：

    <body><script type="text/javascript" src="test.js"></script></body>

  • 不符合規範的：

    <head><script type="text/javascript" src="test.js"></script></head>

  • 配置值：

    1. true: 啟用規則
    2. false: 禁用規則

相關文章