htmlhint 规则详解

2018-02-27 10:59:31来源:https://segmentfault.com/a/1190000013276858作者:SegmentFault人点击

分享
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

符合规范的:


<span><div>

不符合规范的:


<SPAN><BR>

配置值:


true: 启用规则
false: 禁用规则


2.
属性名必须
小写


规则 ID:attr-lowercase
级别:error

符合规范的:


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

不符合规范的:


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

配置值:


true: 启用规则
false: 禁用规则
['viewBox', 'test']
: 忽略一些属性名


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


规则 ID:attr-value-double-quotes
级别:error

符合规范的:


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

不符合规范的:


<a href='' title=abc>

配置值:


true: 启用规则
false: 禁用规则


4.
属性值一定不可
为空



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


规则 ID:attr-value-not-empty
级别:warning

符合规范的:


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

不符合规范的:


<input type="button" disabled>

配置值:


true: 启用规则
false: 禁用规则


5.
属性值一定不可
重复


同一个标签中,同一个属性一定不可
多次赋值。
规则 ID:attr-no-duplication
级别:error

符合规范的:


<img src="a.png" />

不符合规范的:


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

配置值:


true: 启用规则
false: 禁用规则


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


规则 ID:doctype-first
级别:error

符合规范的:


<!DOCTYPE HTML><html>

不符合规范的:


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

配置值:


true: 启用规则
false: 禁用规则


7.
标签必须
成对


规则 ID:tag-pair
级别:error

符合规范的:


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

不符合规范的:


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

配置值:


true: 启用规则
false: 禁用规则


8.
标签必须
自封闭


空标签必须
自封闭
规则 ID:tag-self-close
级别:warning

符合规范的:


<br />

不符合规范的:


<br>

配置值:


true: 启用规则
false: 禁用规则


9.
特殊字符必须
转义


规则 ID:spec-char-escape
级别:error

符合规范的:


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

不符合规范的:


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

配置值:


true: 启用规则
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>

配置值:


true: 启用规则
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>

配置值:


true: 启用规则
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>

配置值:


true: 启用规则
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" />

配置值:


true: 启用规则
false: 禁用规则


14.
Doctype必须
是 HTML5


规则 ID:doctype-html5
级别:warning

符合规范的:


<!DOCTYPE html><html>

配置值:


true: 启用规则
false: 禁用规则


15.
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: 禁用规则


16.
不该
使用样式标签


规则 ID:style-disabled
级别:warning

不符合规范的:


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

配置值:


true: 启用规则
false: 禁用规则


17.
不该
使用行内样式


规则 ID:inline-style-disabled
级别:warning

不符合规范的:


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

配置值:


true: 启用规则
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>

配置值:


true: 启用规则
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" />
说明:上面的实例代码,·表示空格,→表示制表符

配置值:


space: 空格方式(只有空格缩进)
space4: 空格方式并且要求缩进空格个数
tab: 制表符方式(只有制表符缩进)
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>

配置值:


true: 启用规则
false: 禁用规则


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


规则 ID:href-abs-or-rel
级别:warning

符合规范的:


abs: <a href="http://www.alibaba.com/">test1</a`<a href="/2014th7cj/d/file/p/20180223/ <a href="test.html">test1</a`<a href="../test.html">test2</a>

配置值:


abs: 绝对路径方式
rel: 相对路径方式
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 属性值的尾部

配置值:


true: 启用规则
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>

配置值:


true: 启用规则
false: 禁用规则

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台