404是HTTP状态码,由服务器返回,需通过浏览器Network面板观测;W3C Validator仅校验HTML语法,无法检测真实404;htmlproofer可批量发起HTTP请求验证链接存活。

404 不是 HTML 代码,而是 HTTP 状态码;你无法在 HTML 源码里“写”或“检查”它——它由服务器返回,必须通过网络请求过程观测。
用浏览器 Network 面板看真实状态码
这是最直接、最可靠的方式。打开 Chrome 或 Edge,按 F12 → 切到 Network 标签页 → 勾选 Preserve log → 点击你要测试的链接(或刷新页面)。在列表中找到对应请求,看 Status 列:
-
404:服务器明确告知资源不存在(不是前端 JS 报错,也不是控制台警告) -
0或空白:常见于file://协议下直接双击打开 HTML,此时根本没有 HTTP 请求,浏览器不会发 404,只是不加载 -
403:路径对,但服务器拒绝访问(比如目录没开索引、权限不足) -
301/302:跳转了,得点开跳转后的 URL 再查一次状态码
为什么 W3C Validator 查不出 404
W3C Validator 只校验 HTML 语法结构,不发起 HTTP 请求。它可能报出 Bad value for href 这类错误(比如 href="#" 没配 JS),但这和 404 无关;它也可能完全通过验证,但链接依然 404——因为文件路径写错了、服务器没部署、大小写不匹配,这些 Validator 根本看不到。
- 它不检查
href="about.html"对应的文件是否真在磁盘上 - 它不关心你当前页面 URL 是
/blog/还是/,所以相对路径拼接结果它也不算 - 如果你用了
<base href="/app/">但忘了写,Validator 不会警告,但所有href都会错位
用 htmlproofer 扫描静态站的真实 404
这是唯一能批量发起 HTTP 请求、真正验证链接存活的 CLI 工具,适合构建后或上线前兜底检查。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
立即学习“前端免费学习笔记(深入)”;
- 默认只发
HEAD请求,但某些 CDN 或 Nginx 对HEAD返回 404、GET才返回 200,此时要加--http-status-ignore 0 --timeout 10 - 本地开发路径如
http://localhost:3000或file:///会直接失败,必须加--url-ignore "/^file:\/\//,/^http:\/\/localhost/" - 锚点链接如
href="#section1"默认被当失效链,需显式加--allow-hash-href - 它不查图片是否显示红叉,只查
src发起的请求是否返回 200/304;红叉更可能是路径错、403、或 MIME 类型被拦截
别被“页面能打开”骗了
有些 404 被前端路由或服务端 fallback 掩盖了:比如 Vue Router history 模式下,/user 页面能正常显示,但刷新就 404——说明 Nginx 缺 try_files $uri $uri/ /index.html;;又比如后端 Express 定义了 GET /order API,而前端也想用 /order 当页面,结果一刷就返回 JSON 或 404,这时要看 Network 里响应头的 Content-Type 是 application/json 还是 text/html。
真正的 404 问题,永远不在 HTML 标签里,而在路径、服务器配置、部署结构这三层之间咬合松动的地方。


















