htmlhint 规则详解

BradleyAnastasia 发布于6月前 阅读89次
0 条评论

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>bbb<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 规则详解

  • smallmeercat
  • blueswan
  • organicpanda
  • smallfrog
  • organicduck
  • smallswan
  • beautifullion
  • blackdog
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。