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>
```
配置值：
1. true: 启用规则
2. false: 禁用规则

2. 属性名必须小写

规则 ID: attr-lowercase
级别: error
符合规范的：
```
<img src="test.png" alt="test">
```
不符合规范的：
```
<img SRC="test.png" ALT="test">
```
配置值：
1. true: 启用规则
2. false: 禁用规则
3. ['viewBox', 'test']: 忽略一些属性名

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

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

htmlhint 规则详解的更多相关文章

Nginx 常用全局变量及Rewrite规则详解
每次都很容易忘记Nginx的变量,下面列出来了一些常用 $remote_addr //获取客户端ip $binary_remote_addr //客户端ip(二进制) $remote_port //客 ...
53个Oracle语句优化规则详解(转）
Oracle sql 性能优化调整 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种:a. RULE (基于规则) b. COST (基于成本) c. CHOOSE ...
ESLint 规则详解（二）
接上篇 ESLint 规则详解(一) 前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查.这个工具包含 ...
QuantLib 金融计算——基本组件之天数计算规则详解
目录天数计算规则详解定义 30 / 360 法 30/360 US 30/360 Bond Basis 30E/360 30E/360 ISDA Actual 法 Actual/Actual IC ...
Apache Rewrite 规则详解
在开篇之前: 我想说这篇文章其实是我刚刚接触Rewrite的时候学习的文档,应属转载,但是在这里我不想写明原地址,原因是文章中大多数给出的配置命令经实验都是错误的.需要原文的可以在谷歌上搜索一下&qu ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
eslint规则详解
{ // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser":true, "node& ...
Nginx之location 匹配规则详解
有些童鞋的误区 1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其实是“先匹配普通,再匹配正则”.我这么说,大家一定会反驳我,因为按“先匹配普通, ...
jQuery.validator 验证规则详解
前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

随机推荐

[Codefoeces398B]Painting The Wall(概率DP)
题目大意:一个$n\times n$的棋盘,其中有$m$个格子已经被染色,执行一次染色操作(无论选择的格子是否已被染色)消耗一个单位时间,染色时选中每个格子的概率均等,求使每一行.每一列都存在被染色的 ...
网站爬取-案例三：今日头条抓取(ajax抓取JS数据)
今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...
android完整智能家居、备忘录、蓝牙配对、3D动画库、购物车页面、版本更新自动安装等源码
Android精选源码 app 版本更新.下载完毕自动自动安装 android指针式分数仪表盘 ANdroid蓝牙设备搜索.配对 Android 图片水印框架,支持隐形数字水印 android3D旋转 ...
yii执行流程简单介绍
1. 用户访问 http://www.example.com/index.php?r=post/show&id=1,Web 服务器执行入口脚本 index.php 来处理该请求. 2. 入口 ...
OpenCV、EmguCV函数注解
如何使用iTunes制作iPhone铃声
新版iTunes(iTunes11)推出以后,界面上发生了一些改变,给人带来一种面貌一新的感觉,但也给许多朋友带来一些操作上的不太适应.下面就大家比较关心的iPhone的铃声制作方法,我在iTunes ...
蓝桥杯-PREV3-带分数
有人管蓝桥杯叫暴力杯,现在感觉还是挺贴切的.看到这题首先想到让i从1到n循环,首先判断i中无重复数字,再怎样判断能否用剩下的数构成n - i的假分数.之后看了题解.发现思路错了. 总结两点: 1.蓝桥 ...
Rancher的部署安装(编排选用K8S)
为什么要使用Rancher Rancher是一个开源的企业级容器管理平台.通过Rancher,企业再也不必自己使用一系列的开源软件去从头搭建容器服务平台.Rancher提供了在生产环境中使用的管理Do ...
吴裕雄--天生自然 R语言开发学习：基本数据管理（续二）
#---------------------------------------------------------# # R in Action (2nd ed): Chapter 4 # # Ba ...
Eclipse无Server或者Tomcat8.5解决办法
原文链接:https://blog.csdn.net/fangzicheng/article/details/78333567 ...

htmlhint 规则详解

HTML 静态检查规则

一、规则列表

二、规则解读

htmlhint 规则详解的更多相关文章

随机推荐

热门专题