htmlproofer是专用于资源可用性验证的工具，必须用于发布前检查图片404、链接失效等问题，因其会真实发起http请求验证src/href等资源路径，而htmlhint仅校验标签语法，无法发现运行时资源问题。
HTMLHint 还是 HTMLProofer？选错工具会卡在 CI 流程里
直接结论：发布前做「结构规范性检查」用 htmlhint，做「资源可用性验证」必须用 htmlproofer。两者定位不同，混用或只用其一都会漏掉关键问题。
常见错误现象是：CI 流程里 htmlhint 检查全绿，但上线后发现图片 404、跳转链接失效——这是因为 htmlhint 不解析资源路径，只校验标签语法；而 htmlproofer 会真实发起 HTTP 请求验证文件存在性。
-
htmlhint的规则如tag-pair、attr-lowercase都在 AST 层面工作，不依赖网络，速度快，适合 pre-commit 或 PR 触发时快速反馈 -
htmlproofer必须读取生成后的 HTML 文件（比如./dist/*.html），并逐个请求src、href、data-src等属性指向的资源，天然带网络延迟和超时风险 - 若项目含大量 CDN 外链或第三方脚本，
htmlproofer默认会失败；需配置--url-ignore "/^https?:\/\/cdn\./"或启用--check-html跳过远程资源
npx htmlhint "**/*.html" 为什么总报错找不到文件
根本原因是 glob 表达式在不同 shell 下行为不一致：bash 会提前展开 "**/*.html"，而 sh（GitHub Actions 默认）不展开，导致 htmlhint 收到字面量字符串，找不到任何匹配文件。
实操建议统一用 ./src/**/*.html 这类明确路径，或改用 --config 指向配置文件内定义的 files 字段，避免 shell 依赖。
- GitHub Actions 中务必加
shell: bash到 run 步骤：run: npx htmlhint "./src/**/*.html" --config .htmlhintrc - Windows 用户注意路径分隔符，
htmlhint内部使用path.join，但 glob 仍建议用正斜杠 - 若 HTML 是构建产物（如
dist/），确保checkout后执行了构建步骤，否则dist/目录为空
htmlproofer 跑得慢、经常超时？三个硬核调优点
默认并发数 10、超时 60 秒，在静态站页面多、资源分散时极易卡住或误报。这不是 bug，是设计使然——它优先保准确，而非快。
关键参数必须显式设，不能靠默认：
- 用
--concurrency 3降低并发，减少服务器压力，尤其对自建 CMS 或内网站点更稳定 - 加
--timeout 10缩短单请求等待，配合--retry-status-code [500,502,503]对服务端错误自动重试 - 跳过非关键资源：
--url-ignore "/\.pdf$/i,/^mailto:/,/^tel:/,/^#/"，避免因 PDF 下载慢或锚点跳转拖慢整体
另外，htmlproofer 不支持 glob，必须指定目录或文件列表，写成 htmlproofer ./dist --extension=".html,.htm" 才生效。
怎么让 HTML 质量报告进 Slack 或邮件，且只报真正要修的问题
原始输出全是 console 日志，没法直接告警。必须做两层过滤：先提取错误，再按严重性分级。
推荐用 htmlproofer 的 JSON 输出 + jq 解析，或 htmlhint 的 --format=unix 格式配合 grep：
-
npx htmlhint --format=unix src/**/*.html 2>&1 | grep -E "ERROR|WARNING" | head -n 20截取前 20 条，避免刷屏 -
htmlproofer ./dist --output=/tmp/report.json --format=json，然后用jq '.issues[] | select(.status_code != 200)'提取真实失效链接 - 邮件通知里别只写“检查失败”，要带具体文件名+行号+错误类型，比如：
index.html:42: img missing alt，开发才能立刻定位
最容易被忽略的是：CI 环境里 htmlproofer 的 exit code 在有错误时为 1，但 GitHub Actions 默认把非零码当失败终止流程——如果只想告警不阻断发布，得加 continue-on-error: true 并自己解析结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
