htmlhint 規則詳解

時間 2019-11-08

標籤 htmlhint 規則詳解简体版

原文原文鏈接

HTML 靜態檢查規則

HTMLHint 工具內置 23 條規則，能夠對 HTML 代碼文件進行靜態代碼檢查，從而提升 HTML 代碼編寫的規範和質量。如今把 23 條規則翻譯以下。javascript

1、規則列表

標籤名必須小寫
屬性名必須小寫
屬性值必須放在雙引號中
屬性值必定不可爲空
屬性值必定不可重複
Doctype必須是 HTML 文檔的第一行
標籤必須成對
標籤必須自封閉
特殊字符必須
ID 屬性必須惟一
src 屬性必定不可爲空
title 屬性必須出如今標籤中
img 標籤必須包含 alt 屬性
Doctype 必須是 HTML5
ID 和 Class 的命名規則必須統一
不應使用樣式標籤
不應使用行內樣式
不應使用行內腳本
空格和製表符必定不可混合在行前
ID 和 Class 必定不可使用廣告關鍵詞
href 必須是絕對路徑或者相對路徑
屬性值必定不可使用不安全字符
script 標籤不應使用在頭部

2、規則解讀

1. 標籤名必須小寫css

規則 ID: tagname-lowercase
級別: error
符合規範的：html
```
<span><div>
```
不符合規範的：html5
```
<SPAN><BR>
```
配置值：java
1. true: 啓用規則
2. false: 禁用規則

2. 屬性名必須小寫vim

規則 ID: attr-lowercase
級別: error
符合規範的：安全
```
<img src="test.png" alt="test">
```
不符合規範的：ide
```
<img SRC="test.png" ALT="test">
```
配置值：工具
1. true: 啓用規則
2. false: 禁用規則
3. ['viewBox', 'test']: 忽略一些屬性名

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

規則 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>
```
不符合規範的：
```
<!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: 禁用規則

相關標籤/搜索

每日一句

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