前端开发中，HTML 是我们必须掌握的基础知识。正确的 HTML 结构会直接影响到网页的渲染效果，也会影响到搜索引擎爬取和网站可访问性。但是，有时候我们需要保证我们的 HTML 代码符号规范和标准，这时我们就可以使用 HTML 验证工具。本文将介绍一个非常优秀的 HTML 验证工具：npm 包 html-validator 的使用教程。
什么是 html-validator？
html-validator 是一个由 W3C 委员会推荐的用于 HTML 验证的工具。它可以对你的 HTML 代码进行检查，并提示你引入了哪些标签、属性以及元素未被正确使用。
html-validator 的优秀之处在于它不仅仅能够检查 HTML 代码错误（如语法、标签不正确等），还可以对一些潜在的问题进行警告提示，例如正确使用不同的字符集、在 head 应该声明文档的语言等。
安装和使用 html-validator
html-validator 之所以受到前端开发者的青睐，除了其功能外，还因为它易于使用且可以方便地集成到我们的项目中。
接下来我们就来介绍如何安装和使用 html-validator：
安装
前置依赖：
- NodeJS 环境
安装命令：
--- ------- -------------- --
使用
API
可以使用以下代码来检测一个 HTML 文件：
----- ------------- - -------------------------- ----- ---- - ----------------------------------------------------- ------------------------- --------------- ----- ----- ------- ------- ---------------- -- - -------------------- -- ----- -- - ------------------- ---
这里要注意的是，html-validator 函数接收一个配置对象，其中必须包含 data 属性，该属性的值为要检验的 html 内容。
命令行
也可以使用命令行检测 HTML 文件，具体命令如下：
-------------- ----------
执行该命令后，html-validator 会在控制台输出检测结果。此外，我们还可以将检测结果写入到指定的文件：
-------------- ---------- - ----------
html-validator 的选项
html-validator 提供了许多有用的选项，让用户可以更好地控制检测过程。下面我们来介绍一些常用的选项：
format
这个选项用于指定检测结果的格式。默认值为 json，可选值还包括：
text: 普通文本格式gnu: GNU grep 格式xml: xml 格式html: html 格式xhtml: xhtml 格式json-pretty: 格式化后的 json 格式text-verbose: 输出详细的检测结果
例如，我们可以使用如下命令获得 text 格式的检测结果：
-------------- ---------- -------- ----
w3c
html-validator 官方提供了两个 w3c 服务：html 的验证接口和 css 的验证接口。这个选项就是用于指定要使用 w3c 的哪个服务，值为 html 或 css。
例如，我们可以使用如下命令检测 css 文件：
-------------- --------- ----- ---
verbose
这个选项控制着检测结果的详细程度，可选值为 true 和 false。当该选项为 true 时，检测结果包含了更多详细信息。
示例代码
下面是一个完整的示例代码，我们来对其中的 HTML 代码进行检验：
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
-------
------
------------------ ---------
-----------------
---------- --------------------- ------------------
-- -----------------------------------------
---- --------------------------
------- -----------------------
-- -- ---------
---------
-------------
-------
-------我们使用如下命令进行检验：
-------------- ---------- --------- -------- ----
检测结果如下：
--------------- ------- - ---- --- ------- -- ------- ----- --------------- ---- - ---------- ----- - ----- ---- ----------------- ----- - --- ------- --- ---- -- -------- -- --- -------- -------- ---- ------- ------- ---------------- ----- - --- ------- ------ ---- -- -------- -- --- -------- -------- ---- ------- -------
上述检测结果指出了 HTML 代码中的一些错误和潜在问题。其中：
- 第一个警告信息指出我们不能在 head 元素中添加文本内容。
- 关于
info - <!DOCTYPE> isn't a HTML5 tag.的原因是要求文档类型必须是<!DOCTYPE html>而不是<!DOCTYPE>。 - 第三个信息指出 img 标签必须包含在 html 根元素中，而此处我们放在了 body 下。
- 第四个信息同样指出 script 标签也必须包含在 html 根元素中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/63066