html文本hint,htmlhint 规则详解

HTML 静态检查规则

HTMLHint 工具内置 23 条规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。现在把 23 条规则翻译如下。

一、规则列表

标签名必须小写

属性名必须小写

属性值必须放在双引号中

属性值一定不可为空

属性值一定不可重复

Doctype必须是 HTML 文档的第一行

标签必须成对

标签必须自封闭

特殊字符必须

ID 属性必须唯一

src 属性一定不可为空

title 属性必须出现在标签中

img 标签必须包含 alt 属性

Doctype 必须是 HTML5

ID 和 Class 的命名规则必须统一

不该使用样式标签

不该使用行内样式

不该使用行内脚本

空格和制表符一定不可混合在行前

ID 和 Class 一定不可使用广告关键词

href 必须是绝对路径或者相对路径

属性值一定不可使用不安全字符

script 标签不该使用在头部

二、规则解读

1. 标签名必须小写

规则 ID: tagname-lowercase

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

2. 属性名必须小写

规则 ID: attr-lowercase

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

['viewBox', 'test']: 忽略一些属性名

3. 属性值必须放在双引号中

规则 ID: attr-value-double-quotes

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

4. 属性值一定不可为空

标签中使用的属性必须设置值，一定不可为空。

规则 ID: attr-value-not-empty

级别: warning

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

5. 属性值一定不可重复

同一个标签中，同一个属性一定不可多次赋值。

规则 ID: attr-no-duplication

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

6. Doctype 必须是 HTML 文档的第一行

规则 ID: doctype-first

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

7. 标签必须成对

规则 ID: tag-pair

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

8. 标签必须自封闭

空标签必须自封闭

规则 ID: tag-self-close

级别: warning

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

9. 特殊字符必须转义

规则 ID: spec-char-escape

级别: error

符合规范的：

aaa>bbb<ccc

不符合规范的：

aaa>bbb

配置值：

true: 启用规则

false: 禁用规则

10. ID 属性必须唯一

同一个 HTML 文档中 ID 属性必须唯一。

规则 ID: id-unique

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

11. src 属性一定不可为空

img、script 或 link 标签的 src 属性一定不可为空，因为空的 src 属性会导致当前页面被访问两次。

规则 ID: src-not-empty

级别: error

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

12. title 标签必须出现

title 标签必须出现在 head 标签中。

规则 ID: title-require

级别: error

符合规范的：

test

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

13. alt 属性必须有值

img 标签必须有 alt 属性值，并且 area[href] 标签和 input[type="image"] 标签的 alt 属性也必须赋值。

规则 ID: alt-require

级别: warning

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

14. Doctype 必须是 HTML5

规则 ID: doctype-html5

级别: warning

符合规范的：

配置值：

true: 启用规则

false: 禁用规则

15. ID 和 Class 的命名规则必须统一

可以是单词加下划线、单词加连字符或者驼峰方式，但是必须采用一种规则，整个 HTML 文档，甚至整个项目必须统一。

规则 ID: id-class-value

级别: warning

符合规范的：

underline:

dash:

hump:

配置值：

underline: 下划线方式(aaa_bb)

dash: 启用规则(aaa-bb)

hump: 启用规则(aaBbb)

false: 禁用规则

16. 不该使用样式标签

规则 ID: style-disabled

级别: warning

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

17. 不该使用行内样式

规则 ID: inline-style-disabled

级别: warning

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

18. 不该使用行内脚本

规则 ID: inline-script-disabled

级别: warning

不符合规范的：

test1

配置值：

true: 启用规则

false: 禁用规则

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

必须使用空格做为代码缩进的前导字符，缩进的数量必须整个 HTML 文档统一，甚至整个项目必须统一。

规则 ID: space-tab-mixed-disabled

级别: warning

符合规范的：

→→

········

不符合规范的：

→····

····→

说明：上面的实例代码，·表示空格，→表示制表符

配置值：

space: 空格方式(只有空格缩进)

space4: 空格方式并且要求缩进空格个数

tab: 制表符方式(只有制表符缩进)

false: 禁用规则

20. ID 和 Class 一定不可使用 ad 关键词

使用 ad 关键词的 ID 或 Class，会被广告拦截软件屏蔽

规则 ID: id-class-ad-disabled

级别: warning

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则

21. href 必须是绝对路径或者相对路径

规则 ID: href-abs-or-rel

级别: warning

符合规范的：

abs: test1test2

rel: test1test2

配置值：

abs: 绝对路径方式

rel: 相对路径方式

false: 禁用规则

22. 属性值一定不可使用不安全字符

规则 ID: attr-unsafe-chars

级别: warning

符合规范的：

Sud Web 2012

不符合规范的：

Sud Web 2012

说明：通常不安全字符都在 href 属性值的尾部

配置值：

true: 启用规则

false: 禁用规则

23. script 标签不该使用在头部

规则 ID: attr-unsafe-chars

级别: warning

符合规范的：

不符合规范的：

配置值：

true: 启用规则

false: 禁用规则