htmlproofer 是最可靠的 cli 工具，通过真实 http 请求检测 404、301 等状态码；需配置 --url-ignore、--allow-hash-href、--http-status-ignore 0 --timeout 10、--check-favicon 等参数以避免误报。
用 htmlproofer 扫描静态 HTML 中的真实 404
htmlproofer 是目前最可靠的 CLI 工具，它会真实发起 HTTP 请求，拿到 404、301、503 等状态码，不依赖浏览器渲染或 JS 行为。
安装后执行默认扫描：htmlproofer ./_site --only-4xx（假设静态文件在 _site 目录）。
常见必须加的参数：
-
--url-ignore "/^file:\/\//,/^http:\/\/localhost:/"：跳过本地开发路径，否则一碰到file:///或未启动的localhost就报错退出 -
--allow-hash-href：不然所有#section锚点都会被当成坏链接 -
--http-status-ignore 0 --timeout 10：避免因 CDN 或内网响应慢导致假死；0表示连接超时，不是 HTTP 状态码 -
--check-favicon：如果favicon.ico返回 404，htmlproofer 默认不报，得显式开启
W3C Validator 只能查“伪失效”，不是真 404 检测器
W3C Validator 不发请求，只做语法校验。它能发现 href 写成 href=about.html（缺引号）、<base> 缺失导致相对路径全部错位、或 href="#" 这类无 JS 支撑的空锚点——这些是“用户点了没反应”或“跳到页面顶部”的伪失效，不是服务器返回的 404 Not Found。
使用时注意：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须粘贴完整 HTML，含
和 <code>，否则<base href="">的作用域判断会出错 - 重点看 Error 级提示，比如
Bad value "blog/post.html" for attribute "href"，说明值里有非法字符或未闭合引号 - 验证通过 ≠ 链接可用；它不管文件是否存在、路径是否拼错、服务器权限是否拒绝读取
浏览器 Network 面板里看真实响应状态
当某个链接或图片突然变红叉、控制台报 Failed to load resource: the server responded with a status of 404 ()，直接打开 DevTools → Network 标签页，刷新页面，筛选 Doc 或 Img，点开对应请求，看 Status 列。
这里容易误判的几种情况：
-
Status显示403：路径对，但服务器拒绝访问（比如 Nginx 配置了deny all，或文件权限为600） -
Status是404，但Response Headers里有X-Proxy-Cache: MISS：说明 CDN 没缓存，回源失败，问题在源站 -
Initiator显示other：可能是 JS 动态插入的a标签，W3C Validator 和 htmlproofer 都扫不到 -
Size是(from disk cache)：说明你看到的是旧缓存，强制刷新（Ctrl+Shift+R）再试
相对路径错位：最隐蔽也最高频的 404 根源
比如页面路径是 /blog/2024/01/hello.html，里面写 <a href="about.html"></a>，实际请求的是 /blog/2024/01/about.html，而不是你预期的根目录下的 /about.html。
排查这类问题的关键动作：
- 在 Network 面板里点开那个 404 请求，看
Request URL真实发出的是什么地址 - 对比当前页面 URL 和请求 URL 的前缀差异，确认是不是多套了一层目录
- 改用绝对路径：把
href="about.html"换成href="/about.html"（开头加/） - 检查是否漏了
<base href="/">，尤其在单页应用或构建工具生成的 HTML 中，没有 base 标签时，所有相对路径都以当前页面路径为基准
真正难定位的 404 往往不在链接本身，而在路径解析逻辑、服务器权限配置、CDN 回源策略或构建时的静态资源输出路径偏移——别急着改 HTML，先让 Network 面板告诉你服务器到底收到了什么请求、又返回了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
