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
符合规范的:
<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="https://www.alipay.com/">test2</a>
rel: <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: 禁用规则
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 ...
随机推荐
- 提高线程数,解决redis超时问题
根据压测结果做出的修改历史: 第一步:只针对maxWorkerThreads.maxIoThreads和minWorkerThreads做了修改<processModel autoConfig= ...
- Elasticsearch Rest模式和RPC模式性能比较
Elasticsearch 有两种链接模式,即Rest方式(对应端口9200)和RPC方式(对应端口9300)这两种访问效率到底差多少,在同样的业务逻辑下,测试了一波. 用的JMeter进行压力测试 ...
- EXAM-2018-8-3
EXAM-2018-8-3 D H 喜闻乐见的水题 J lower_bound + upper_bound 一个可以查找第一个大于,另一个可查找第一个不小于. F 找规律+奇偶分析 偶数好找,就是奇数 ...
- Qt 无法打开包括文件:“QGLWidget”: No such file or directory
只需要在.pro文件中加上 QT += opengl 然后再执行qmake即可
- [LC] 746. Min Cost Climbing Stairs
On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you pay ...
- python实现经典冒泡算法
利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面
- 《自动化平台测试开发-Python测试开发实战》新书出版了
首先 第一本书,当初在百度阅读初步写了个电子版,刚一上线不久即收到了数百位读者朋友阅读收藏购买,于是顺利成章就出版了纸质书. <软件自动化测试开发>认真看过的读者应该都知道,介绍的主要是自 ...
- python中字符串操作--截取,查找,替换
python中,对字符串的操作是最常见的,python对字符串操作有自己特殊的处理方式. 字符串的截取 python中对于字符串的索引是比较特别的,来感受一下: s = '123456789' #截取 ...
- Archlinux 自动挂载移动硬盘,开机自动启动smb服务
Archlinux + Raspberry 打造NAS: samba篇 树莓派自动挂载硬盘,并开启smb服务. 开机自动挂在移动硬盘ntfs 安装ntfs-3g sudo pacman -S ntfs ...
- Bitstream or PCM?
背景 提问 讨论精选 一 二 三 四 五 最后 电视上同轴输出的做法. 背景 USB通道下播放声音格式为AAC的视频文件,同轴输出设置为Auto,功放没有声音,设置成PCM,有声音. 提问 Auto/ ...