htmlhint 规则详解
广瑞
HTML 静态检查规则
HTMLHint 工具内置 23 条规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。现在把 23 条规则翻译如下。
一、规则列表
- 标签名必须小写
- 属性名必须小写
- 属性值必须放在双引号中
- 属性值一定不可为空
- 属性值一定不可重复
- Doctype必须是 HTML 文档的第一行
- 标签必须成对
- 标签必须自封闭
- 特殊字符必须
- src 属性一定不可为空
- title 属性必须出现在标签中
- img 标签必须包含 alt 属性
- Doctype 必须是 HTML5
- ID 和 Class 的命名规则必须统一
- 不该使用行内样式
- 不该使用行内脚本
- 空格和制表符一定不可混合在行前
- ID 和 Class 一定不可使用广告关键词
- href 必须是绝对路径或者相对路径
- 属性值一定不可使用不安全字符
- script 标签不该使用在头部
- ID 属性必须唯一
- 不该使用样式标签
二、规则解读
-
标签名必须小写
规则 ID: tagname-lowercase
级别: error
符合规范的：
<span><div>
不符合规范的：
<SPAN><BR>
配置值：
true: 启用规则
false: 禁用规则
- 属性名必须小写
规则 ID: attr-lowercase
级别: error
符合规范的：
<img src="test.png" alt="test">
不符合规范的：
<img SRC="test.png" ALT="test">
配置值：
true: 启用规则
false: 禁用规则
['viewBox', 'test']: 忽略一些属性名
- 属性值必须放在双引号中
规则 ID: attr-value-double-quotes
级别: error
符合规范的：
<a href="" title="abc">
不符合规范的：
<a href='' title=abc>
配置值：
true: 启用规则
false: 禁用规则
- 属性值一定不可为空
标签中使用的属性必须设置值，一定不可为空。
规则 ID: attr-value-not-empty
级别: warning
符合规范的：
<input type="button" disabled="disabled">
不符合规范的：
<input type="button" disabled>
配置值：
true: 启用规则
false: 禁用规则
- 属性值一定不可重复
同一个标签中，同一个属性一定不可多次赋值。
规则 ID: attr-no-duplication
级别: error
符合规范的：
<img src="a.png" />
不符合规范的：
<img src="a.png" src="b.png" />
配置值：
true: 启用规则
false: 禁用规则
- Doctype 必须是 HTML 文档的第一行
规则 ID: doctype-first
级别: error
符合规范的：
<!DOCTYPE HTML><html>
不符合规范的：
<!--comment--><!DOCTYPE HTML><html>
配置值：
true: 启用规则
false: 禁用规则
- 标签必须成对
规则 ID: tag-pair
级别: error
符合规范的：
<ul><li></li></ul>
不符合规范的：
<ul><li></ul>
<ul></li></ul>
配置值：
true: 启用规则
false: 禁用规则
- 标签必须自封闭
空标签必须自封闭
规则 ID: tag-self-close
级别: warning
符合规范的：
<br />
不符合规范的：
<br>
配置值：
true: 启用规则
false: 禁用规则
- 特殊字符必须转义
规则 ID: spec-char-escape
级别: error
符合规范的：
<span>aaa>bbb<ccc</span>
不符合规范的：
<span>aaa>bbb<ccc</span>
配置值：
true: 启用规则
false: 禁用规则
- ID 属性必须唯一
同一个 HTML 文档中 ID 属性必须唯一。
规则 ID: id-unique
级别: error
符合规范的：
<div id="id1"></div><div id="id2"></div>
不符合规范的：
<div id="id1"></div><div id="id1"></div>
配置值：
true: 启用规则
false: 禁用规则
- 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>
配置值：
true: 启用规则
false: 禁用规则
- 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>
配置值：
true: 启用规则
false: 禁用规则
- 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" />
配置值：
true: 启用规则
false: 禁用规则
- Doctype 必须是 HTML5
规则 ID: doctype-html5
级别: warning
符合规范的：
<!DOCTYPE html><html>
配置值：
true: 启用规则
false: 禁用规则
- ID 和 Class 的命名规则必须统一
可以是单词加下划线、单词加连字符或者驼峰方式，但是必须采用一种规则，整个 HTML 文档，甚至整个项目必须统一。
规则 ID: id-class-value
级别: warning
符合规范的：
underline: <div id="aaa_bbb">
dash: <div id="aaa-bbb">
hump: <div id="aaaBbb">
配置值：
underline: 下划线方式（aaa_bb）
dash: 启用规则（aaa-bb）
hump: 启用规则（aaBbb）
false: 禁用规则
- 不该使用样式标签
规则 ID: style-disabled
级别: warning
不符合规范的：
<head><style type="text/css"></style></head>
<body><style type="text/css"></style></body>
配置值：
true: 启用规则
false: 禁用规则
- 不该使用行内样式
规则 ID: inline-style-disabled
级别: warning
不符合规范的：
<div style="color:red"></div>
配置值：
true: 启用规则
false: 禁用规则
- 不该使用行内脚本
规则 ID: inline-script-disabled
级别: warning
不符合规范的：
<img src="test.gif" onclick="alert(1);">
<img src="javascript:alert(1)">
<a href="javascript:alert(1)">test1</a>
配置值：
true: 启用规则
false: 禁用规则
- 空格和制表符一定不可混合在行前
必须使用空格做为代码缩进的前导字符，缩进的数量必须整个 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" />
说明：上面的实例代码，·表示空格，→表示制表符
配置值：
space: 空格方式（只有空格缩进）
space4: 空格方式并且要求缩进空格个数
tab: 制表符方式（只有制表符缩进）
false: 禁用规则
- 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>
配置值：
true: 启用规则
false: 禁用规则
- 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>
配置值：
abs: 绝对路径方式
rel: 相对路径方式
false: 禁用规则
- 属性值一定不可使用不安全字符
规则 ID: attr-unsafe-chars
级别: warning
符合规范的：
<li><a href="https://vimeo.com/album/1951235/video/56931059">Sud Web 2020</a></li>
不符合规范的：
<li><a href="https://vimeo.com/album/1951235/video/56931059\u0009">Sud Web 2020</a></li>
说明：通常不安全字符都在 href 属性值的尾部
配置值：
true: 启用规则
false: 禁用规则
- 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>
配置值：
true: 启用规则
false: 禁用规则
类似资料：