HTMLHint 工具内置 23 条规则,可以对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量。现在把 23 条规则翻译如下。
标签名必须小写
规则 ID: tagname-lowercase
级别: error
符合规范的:
<span><div>
不符合规范的:
<SPAN><BR>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<img src="test.png" alt="test">
不符合规范的:
<img SRC="test.png" ALT="test">
配置值:
true: 启用规则
false: 禁用规则
['viewBox', 'test']: 忽略一些属性名
符合规范的:
<a href="" title="abc">
不符合规范的:
<a href='' title=abc>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<input type="button" disabled="disabled">
不符合规范的:
<input type="button" disabled>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<img src="a.png" />
不符合规范的:
<img src="a.png" src="b.png" />
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<!DOCTYPE HTML><html>
不符合规范的:
<!--comment--><!DOCTYPE HTML><html>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<ul><li></li></ul>
不符合规范的:
<ul><li></ul>
<ul></li></ul>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<br />
不符合规范的:
<br>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<span>aaa>bbb<ccc</span>
不符合规范的:
<span>aaa>bbb<ccc</span>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<div id="id1"></div><div id="id2"></div>
不符合规范的:
<div id="id1"></div><div id="id1"></div>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
<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: 禁用规则
符合规范的:
<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: 禁用规则
符合规范的:
<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 html><html>
配置值:
true: 启用规则
false: 禁用规则
可以是单词加下划线、单词加连字符或者驼峰方式,但是必须采用一种规则,整个 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: 禁用规则
不符合规范的:
<div style="color:red"></div>
配置值:
true: 启用规则
false: 禁用规则
不符合规范的:
<img src="test.gif" onclick="alert(1);">
<img src="javascript:alert(1)">
<a href="javascript:alert(1)">test1</a>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
→→<img src="tab.png" />
········<img src="space.png" />
不符合规范的:
→····<img src="tab_before_space.png" />
····→<img src="space_before_tab.png" />
说明:上面的实例代码,·表示空格,→表示制表符
配置值:
space: 空格方式(只有空格缩进)
space4: 空格方式并且要求缩进空格个数
tab: 制表符方式(只有制表符缩进)
false: 禁用规则
符合规范的:
<div id="adcontainer"></div>
不符合规范的:
<div id="ad-container"></div>
<div id="ad_container"></div>
配置值:
true: 启用规则
false: 禁用规则
符合规范的:
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: 禁用规则
符合规范的:
<body><script type="text/javascript" src="test.js"></script></body>
不符合规范的:
<head><script type="text/javascript" src="test.js"></script></head>
配置值:
true: 启用规则
false: 禁用规则