htmlhint 规则详解

最新推荐文章于 2023-10-13 17:45:39 发布
最新推荐文章于 2023-10-13 17:45:39 发布
阅读量442 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000013276858
版权

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: 禁用规则
weixin_34239592
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cpplint规则详解
03-24
Cpplint是一个python脚本,Google使用它作为自己的C++代码规范检查工具。 本文档是根据cpplint自己整理的规则详细解释，不对之处还请见谅。
RationalPerformanceTester数据关联规则详解
02-27
内容1.概述2....基于Jazz产品的数据关联算法5.数据关联规则扩展总结参考资料简介： 利用RationalPerformanceTester...本文详细描述了RPT8.1提供的自动数据关联规则及扩展数据关联规则的方法，旨在帮助读者了解RPT所能提供
html文本hint,htmlhint 规则详解
weixin_35520863的博客
06-16 589
HTML 静态检查规则HTMLHint 工具内置 23 条规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。现在把 23 条规则翻译如下。一、规则列表标签名必须小写属性名必须小写属性值必须放在双引号中属性值一定不可为空属性值一定不可重复Doctype必须是 HTML 文档的第一行标签必须成对标签必须自封闭特殊字符必须ID 属性必须唯一src 属性一定不可为...
HTMLHint 配置文件
weixin_33682719的博客
02-12 344
HTMLHint 工具可以对 HTML 代码做静态代码检查，从而保证 HTML 代码的规范和质量。HTMLHint 工具内置 23 条规则，建议在 .htmlhintrc 配置文件中将规则尽可能都打开： { "tagname-lowercase": true, "attr-lowercase": true, "attr-val...
HTML disabled属性的启用和禁止
sunsineq的专栏
03-23 845
HTML中的input元素、button元素、option元素等都具有一个disabled属性。 当赋予该属性时该元素将变得不可交互，如下代码所示： Html代码 <inputtype="button"disabled="disabled"value="测试按钮"> 其中属性值“disabled”可以替换成任何的其它单词甚至是“enabled”（不过“false”除外），因为属性值为“false”时表示属性不启用，属性值“true”表示启用属性。如下代码的butt...
VScode插件——HTMLHint插件使用指南、规则配置说明指南、如何修改HTMLHint规则
ShawBurton的博客
10-13 1678
VScode插件——HTMLHint使用指南、规则配置说明指南、如何修改HTMLHint规则。HTMLHint是一个用于检查HTML代码错误和潜在问题的插件。它提供了一系列的规则，用于检查HTML代码的语法、结构、标签使用等方面的问题。说白了就是以.html后缀结束的文件，进行语法检查，方便我们及时找到代码错误。
前端代码检查工具之HTMLHint使用指南
weixin_40073115的博客
01-03 2589
作为前端开发leader你必须要对组员开发的代码制定适合项目的开发规范，并且要做到跟踪检查，传统的做法是制定军规，比如命名方式，代码结构，注释模版，缩紧换行等等，然后通过代码review检查，但这样耗时成本太大，没有必要将团队大量时间浪费在这种代码格式的检查上，但代码格式统一对于项目开发人员至关重要，因为我们要相互承接阅读修改彼此的代码，所以自动化的代码检查约束就显得非常重要，本篇博文介绍前端产出...
Allegro16.6约束规则设置详解-SCC
05-19
Allegro16.6约束规则设置详解_SCCAllegro16.6约束规则设置详解_SCCAllegro16.6约束规则设置详解_SCCAllegro16.6约束规则设置详解_SCC
C++命名规则详解
12-21
关开C++程序的命名规则详解,轻松教你学会命名规则，让你学会好的编码习惯
HTMLHint：:gear_selector:HTML所需的静态代码分析工具
02-03
HTML提示 HTML所需的静态代码分析工具。 •• 目录 :pager: 安装及使用 先决条件：Node.js（> = 6.14），npm版本3+。 有两种安装HTMLHint的方法：全局和本地。 本地安装和使用 如果要将HTMLHint包含在项目中，可以使用NPM在本地安装它： $ npm install htmlhint --save-dev 之后，您可以在任何文件或目录上运行HTMLHint，如下所示： $ ./node_modules/.bin/htmlhint www/index.html $ ./node_modules/.bin/htmlhint www/**/*.html 全局安装和使用 如果要使HTMLHint可用于所有项目中运行的工具，则可以使用NPM全局安装HTMLHint： $ npm install htmlhint -g 之后，您可以在任何这样的文件上运行HTMLHint： $ htmlhint www/index.html $ htmlhint www/**/*.html 您甚至可以启动HTMLHint来分析URL： $ htmlhint
htmlhint&csslint&jshint配置参数详解
qq_33207773的博客
12-26 1199
htmlHint和csslint和jshint相关配置参数详解
html中span标签的详细介绍
qy_yyyyy的博客
11-11 3万+
一、span标签的定义及用法 在html中，span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签本身并没有什么格式表现（比如：换行等），需要对它应用样式才会有视觉上的变化。 span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。 二、span标签语法格式 内容 三.语法格式说明 1.span标签是内联元素，不像块级元素（如：div标签、p标签等）那样有换行的效果； 2.如果不对span元素应用样式，使用span标签没有任何的显示效
Hint作用
十一仓
12-28 222
Hint作用 Oracle的Hint是用来提示Oracle的优化器，用来选择用户期望的执行计划。 背景 在许多情况下，oracle默认执行的执行方式并不总是最优的，只不过由于平时操作的数据量比较小，所以，好的执行计划与差的执行计划所消耗的时间差异不大，用户感觉不到而已。但对于书写操作大数据量的SQL而言，其SQL的书写则需要先了解一下执行计划是否是最优或满足生产需要。通常当从开发环境迁移到生产环境下时，往往会出现此类情况。 语法格式 {SELECT |INSERT | UPDATE | DELETE} /*
html button 隐藏_HTML 表单
weixin_39533052的博客
11-29 1381
点击上方蓝字关注我们~软件测试大师 让测试so easy01表单语法常用值：get|post)action="result.html">(表示向何处发送表单数据)名字：密码：name="Button" value="提交"/>name="Reset" value="重填“/> 经验：在实际网页开发中通常采用post方式提交表单数据02表单元素格式1.语法：valu...
html文本框的hint,HTML 5 <input> placeholder 属性
weixin_39628160的博客
06-03 368
原文链接：http://www.w3school.com.cn/html5/att_input_placeholder.aspHTML 5 placeholder 属性实例带有 placeholder 文本的搜索字段：定义和用法placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用...
html input文本框 输入框提示（hint）内容的实现
热门推荐
王小磊
06-02 7万+
HTML开发中经常遇到input元素，往往又需要提示使用者输入一定规则的内容，这时最好的一个方法就是在input里面实现一个提示，实现如下方式：输入框为空时提示内容出现，当输入框获得焦点时或输入框不为空时则消失。 1.HTML5引入了新属性placeholder很容易实现 html input 输入框提示（hint）内容的实现 Postcode: 显示提示内容“
html hint标签,htmlhint
weixin_30877775的博客
06-22 596
更新记录1.0.4(2020-07-22)优化 修改插件配置规范, 支持插件配置文件独立1.0.3(2020-06-13)新增 validate-html插件查看更多HBuilderX插件通用注意事项HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件1. validate-html 说明此插件用于html语法校验2. 配置文件，如何配置...
HTMLHint、CSSLint、ESLint
dubinglin的博客
06-20 3859
HTMLHint、CSSLint、ESLint ESLint    灵活，任何规则都可以开启闭合，以及有些规则有些额外配置    很容易拓展和有需要可用插件    容易理解产出    包含了在其他检查器中不可用的规则，使得ESLint在错误检查上更有用    支持ES6，唯一支持JSX的工具    支持自定义报告  一、安装 VisualStudio Code 二、安装插件，点击扩展安装ESLin...
java 规则引擎使用详解
最新发布
12-28
规则引擎在Java项目中的使用可以提高系统的可维护性、可扩展性、可重用性和可测试性。以下是Java规则引擎的使用详解： 1. 规则引擎的基本原理： 规则引擎将业务规则形式化、集中管理，将业务规则与应用程序分离。它通过规则的条件和动作来实现业务逻辑的处理。当满足规则的条件时，规则引擎会执行相应的动作。 2. 规则引擎的优势： - 可维护性：规则引擎将业务规则集中管理，使得修改和维护规则变得更加方便。 - 可扩展性：通过添加新的规则，可以快速响应业务变化，而无需修改应用程序的代码。 - 可重用性：规则引擎将业务规则与应用程序分离，可以在不同的应用程序中重用规则。 - 可测试性：规则引擎可以通过单元测试来验证规则的正确性。 3. Java项目中的规则引擎实现方式： 在Java项目中，可以选择多种规则引擎的实现方式，例如： - Drools：Drools是一个开源的规则引擎，它提供了强大的规则管理和执行功能。 - Easy Rules：Easy Rules是一个轻量级的规则引擎，它提供了简单易用的规则定义和执行接口。 - JRules：JRules是IBM提供的一种规则引擎，它具有高性能和可扩展性。 - RuleBook：RuleBook是一个简单的规则引擎，它提供了基本的规则定义和执行功能。 以上是Java规则引擎的使用详解。通过使用规则引擎，可以将业务规则形式化、集中管理，提高系统的可维护性、可扩展性、可重用性和可测试性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值