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. mysql中datetime时间转字符串(避免java层映射为数字串)

    -- in_date datetime NULLDATE_FORMAT(ls.`in_date`,'%Y-%m-%d %T')AS create_time

  2. Spring容器中的Bean几种初始化方法和销毁方法的先后顺序

    https://blog.csdn.net/caihaijiang/article/details/8629725

  3. 吴裕雄--天生自然python学习笔记：python 用pygame模块基本绘图

    绘制几何图形是游戏包的基本功能,很多游戏角色都是由基本图形组合而成的 . 绘制矩形: pygame.draw.rect Pygam巳绘制矩形的语法为: 用基本绘图绘制一个人脸 用基本绘图功能绘制人脸 ...

  4. python3下scrapy爬虫(第十二卷:解决scrapy数据存储大量数据时阻塞问题）

    之前我们使用scrapy爬取数据,用的存储方式是直接引入PYMYSQL,或者MYSQLDB,案例中数据量并不大,这种数据存储方式属于同步过程,也就是上一条语句执行完才能执行下一条语句,当数据量变大时, ...

  5. Python的range（n）的用法

    Python的range(n) 方法就是: API定义: If you do need to iterate(迭代) over a sequence(一系列) of numbers, the buil ...

  6. Yii框架的学习指南（策码秀才篇）1-1 如何认识Yii framework

    Yii的框架和其他框架的区别在于:它是更加 快速,安全,专业的PHP框架 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii是一个基于组件.用于开发大型 Web 应用的 高性能 P ...

  7. python3下scrapy爬虫(第六卷:利用cookie模拟登陆抓取个人中心页面）

    之前我们爬取的都是那些无需登录就要可以使用的网站但是当我们想爬取自己或他人的个人中心时就需要做登录,一般进入登录页面有两种 ,一个是独立页面登陆,另一个是弹窗,我们先不管验证码登陆的问题 ,现在试一下 ...

  8. cs231n spring 2017 lecture11 Detection and Segmentation

    1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...

  9. auto uninstaller 密钥 破解 修复卸载工具

    auto uninstaller 修复卸载工具 密钥注册机破解分享 只可以用于8.8.38,亲测可用 zhAAxzm5Wmmhzomyxyhoahra6AXrzy6X## hzWh6maaa5hmah ...

  10. Visual Studio通过Cordova支持混合跨平台移动开发

    Microsoft在Visual Studio 2013 Update 2中添加了对混合跨平台移动应用程序的本地支持. Microsoft早在2011年就已经开始了与PhoneGap的合作,那时候是为 ...