HTML 静态检查规则

HTMLHint 工具内置 23 条规则,可以对 HTML 代码文件进行静态代码检查,从而提高 HTML 代码编写的规范和质量。现在把 23 条规则翻译如下。

一、规则列表

  1. 标签名必须小写
  2. 属性名必须小写
  3. 属性值必须放在双引号中
  4. 属性值一定不可为空
  5. 属性值一定不可重复
  6. Doctype必须是 HTML 文档的第一行
  7. 标签必须成对
  8. 标签必须自封闭
  9. 特殊字符必须
  10. ID 属性必须唯一
  11. src 属性一定不可为空
  12. title 属性必须出现在标签中
  13. img 标签必须包含 alt 属性
  14. Doctype 必须是 HTML5
  15. ID 和 Class 的命名规则必须统一
  16. 不该使用样式标签
  17. 不该使用行内样式
  18. 不该使用行内脚本
  19. 空格和制表符一定不可混合在行前
  20. ID 和 Class 一定不可使用广告关键词
  21. href 必须是绝对路径或者相对路径
  22. 属性值一定不可使用不安全字符
  23. 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>
  • 不符合规范的:

    <!--comment--><!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 规则详解的更多相关文章

  1. Nginx 常用全局变量 及Rewrite规则详解

    每次都很容易忘记Nginx的变量,下面列出来了一些常用 $remote_addr //获取客户端ip $binary_remote_addr //客户端ip(二进制) $remote_port //客 ...

  2. 53个Oracle语句优化规则详解(转)

    Oracle sql 性能优化调整  1. 选用适合的ORACLE优化器        ORACLE的优化器共有3种:a. RULE (基于规则)   b. COST (基于成本) c. CHOOSE ...

  3. ESLint 规则详解(二)

    接上篇 ESLint 规则详解(一) 前端界大神 Nicholas C. Zakas 在 2013 年开发的 ESLint,极大地方便了大家对 Javascript 代码进行代码规范检查.这个工具包含 ...

  4. QuantLib 金融计算——基本组件之天数计算规则详解

    目录 天数计算规则详解 定义 30 / 360 法 30/360 US 30/360 Bond Basis 30E/360 30E/360 ISDA Actual 法 Actual/Actual IC ...

  5. Apache Rewrite 规则详解

    在开篇之前: 我想说这篇文章其实是我刚刚接触Rewrite的时候学习的文档,应属转载,但是在这里我不想写明原地址,原因是文章中大多数给出的配置命令经实验都是错误的.需要原文的可以在谷歌上搜索一下&qu ...

  6. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  7. eslint规则详解

    { // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser":true, "node& ...

  8. Nginx之location 匹配规则详解

    有些童鞋的误区 1. location 的匹配顺序是“先匹配正则,再匹配普通”. 矫正: location 的匹配顺序其实是“先匹配普通,再匹配正则”.我这么说,大家一定会反驳我,因为按“先匹配普通, ...

  9. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

随机推荐

  1. 提高线程数,解决redis超时问题

    根据压测结果做出的修改历史: 第一步:只针对maxWorkerThreads.maxIoThreads和minWorkerThreads做了修改<processModel autoConfig= ...

  2. Elasticsearch Rest模式和RPC模式性能比较

    Elasticsearch 有两种链接模式,即Rest方式(对应端口9200)和RPC方式(对应端口9300)这两种访问效率到底差多少,在同样的业务逻辑下,测试了一波. 用的JMeter进行压力测试 ...

  3. EXAM-2018-8-3

    EXAM-2018-8-3 D H 喜闻乐见的水题 J lower_bound + upper_bound 一个可以查找第一个大于,另一个可查找第一个不小于. F 找规律+奇偶分析 偶数好找,就是奇数 ...

  4. Qt 无法打开包括文件:“QGLWidget”: No such file or directory

    只需要在.pro文件中加上 QT += opengl 然后再执行qmake即可

  5. [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 ...

  6. python实现经典冒泡算法

    利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面

  7. 《自动化平台测试开发-Python测试开发实战》新书出版了

    首先 第一本书,当初在百度阅读初步写了个电子版,刚一上线不久即收到了数百位读者朋友阅读收藏购买,于是顺利成章就出版了纸质书. <软件自动化测试开发>认真看过的读者应该都知道,介绍的主要是自 ...

  8. python中字符串操作--截取,查找,替换

    python中,对字符串的操作是最常见的,python对字符串操作有自己特殊的处理方式. 字符串的截取 python中对于字符串的索引是比较特别的,来感受一下: s = '123456789' #截取 ...

  9. Archlinux 自动挂载移动硬盘,开机自动启动smb服务

    Archlinux + Raspberry 打造NAS: samba篇 树莓派自动挂载硬盘,并开启smb服务. 开机自动挂在移动硬盘ntfs 安装ntfs-3g sudo pacman -S ntfs ...

  10. Bitstream or PCM?

    背景 提问 讨论精选 一 二 三 四 五 最后 电视上同轴输出的做法. 背景 USB通道下播放声音格式为AAC的视频文件,同轴输出设置为Auto,功放没有声音,设置成PCM,有声音. 提问 Auto/ ...