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. spring cloud关于feign client的调用对象列表参数、设置header参数、多环境动态参数试配

    spring cloud关于feign client的调用 1.有些场景接口参数需要传对象列表参数 2.有些场景接口设置设置权限等约定header参数 3.有些场景虽然用的是feign调用,但并不会走 ...

  2. Cisco路由器配置基本命令

    特权模式:enable Router1 # show running-config Router1 # show ip route Router # show ip interface brief S ...

  3. [LC] 513. Find Bottom Left Tree Value

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  4. Django使用DjangoUeditor教程

    文章目录 1.将下在DjangoUeditor解压2.将解压的文件夹复制到项目的根目录中,这里使用的是虚拟环境3.进入到DjangoUedior3-master文件下,执行离线安装命令 python ...

  5. js手机浏览器video标签会一直置顶，遮盖住弹出层问题

    <video x5-playsinline="" playsinline="" webkit-playsinline="">&l ...

  6. springboot学习笔记：6.内置tomcat启动和外部tomcat部署总结

    springboot的web项目的启动主要分为: 一.使用内置tomcat启动 启动方式: 1.IDEA中main函数启动 2.mvn springboot-run 命令 3.java -jar XX ...

  7. linux下如何查看服务器的硬件配置信息

    性能测试时一定要确定测试环境和的硬件配置.软件版本配置,保证和线上一致,才更接近真实环境. 那么linux下如何查看服务器的硬件配置信息?? 一.查看cpu信息 1.所有信息 lscpu [root@ ...

  8. Method POST, Status (canceled) error message

    I have the following code which is giving me a Method POST, Status (canceled) error message: $(docum ...

  9. deeplearning.ai 人工智能行业大师访谈

    Geoffrey Hinton 1. 怀揣着对大脑如何存储记忆的好奇,Hinton本科最开始学习生物学和物理学,然后放弃,转而学习哲学:然后觉得哲学也不靠谱,转而学习心理学:然后觉得心理学在解释大脑运 ...

  10. WebFilter 在springBoot工程中不起作用

    [1]@ServletComponentScan 必须有一个注解将带有@WebFilter的类包含进去. [2]自定义 FiltersConfig extends WebMvcConfigurerAd ...