应使用html-validate工具检测废弃标签，需通过npx html-validate --init生成配置并启用"html-validate/no-obsolete-elements"规则，运行npx html-validate src/*.html即可精准报错，如“Element font is obsolete”。
怎么用 html-validate 检测废弃标签
html-validate 是目前最可靠的本地自动化工具，能直接识别 <font>、<center>、<u>、<strike>、<marquee> 等已废弃标签，且不依赖浏览器渲染，纯静态分析。
安装后默认不启用废弃标签规则，必须显式开启：
- 初始化配置：
npx html-validate --init生成.htmlvalidate.json - 在配置中加入 rule：
"html-validate/no-obsolete-elements": "error" - 运行检测：
npx html-validate src/*.html，报错会明确标出Element font is obsolete这类提示 - CI/CD 中建议设为
error级别，避免合并含废弃标签的代码
为什么 grep 不够用，但仍是快速筛查手段
grep 命令快、无依赖，适合开发中途随手扫一眼，但它本质是字符串匹配，无法理解 HTML 结构上下文——比如 <!-- <font> --> 会被误报，而 <my-font>（自定义元素）可能被漏掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 基础筛查命令：
grep -rni " - 加
-v "node_modules\|dist"排除构建产物和依赖 - 结果里出现
<b>或<i>不代表错误——它们未被废弃，但需人工判断是否该换成<strong>或<em> - 发现
<img></img>或<input></input>必须立刻修复：这不是废弃问题，而是 HTML5 解析错误，会导致 DOM 层级崩坏
W3C Validator 能否替代本地工具
可以，但不适合自动化集成。W3C Validator（validator.w3.org/nu/）是权威校验器，会明确写出 Element font is obsolete 或 Element img is not closed，但它只接受单文件上传或 URL，没法跑在 CI 流水线里。
更适合做上线前终审：
- 粘贴完整 HTML 源码（注意：不能带构建时注入的模板语法，如
{{title}}） - 确认
<!DOCTYPE html>独占第一行，前面**无 BOM、无空格、无注释**，否则直接进 Quirks Mode - 报错中若出现
Element header is not declared in the DTD，说明文档类型声明缺失或拼错，不是浏览器兼容问题，而是语法错误 - 它不报
<main>兼容性警告——因为这是合法标签，只是旧浏览器不认识；这种问题得靠运行时检测，不是结构校验范畴
自动化流程里最容易漏掉的一环
所有工具都只查“写了什么”，不查“浏览器认不认”。比如 <main> 在 IE9 里存在但被当普通 inline 元素，CSS main { display: block } 若没配 html5shiv 就完全无效——而 html-validate、grep、W3C Validator 全部对此静默。
真正要卡住的点是：
- 语义标签检测必须和运行时验证配合：在目标环境执行
document.querySelectorAll('header, main, nav').length，返回 0 就说明白写了也白写 - CI 中可加轻量 Puppeteer 脚本，在模拟旧版 WebView 中加载页面并执行该检查
- 不要把“通过 html-validate”当成兼容性达标信号——它只保语法合规，不保渲染正确
