怎么检测HTML中的404死链错误-html教程-PHP中文网

最可靠方法是打开开发者工具→network面板→刷新页面→查看标红的404请求项，重点核对request url、status和initiator三列，确认路径是否匹配实际部署位置。

怎么检测html中的404死链错误

直接看 Network 面板里的红色请求，比任何工具都准——404 是服务器明确返回的状态码，不是前端能“猜”出来的。

打开开发者工具，盯住 Network 标签页

这是最可靠、零依赖的检测方式。别信本地双击打开的 file:// 页面，它根本不会发 HTTP 请求，所有“404”都是假的。

用 http://localhost:8080/ 这类地址访问页面（Live Server / npx serve -s / python3 -m http.server）
按 F12 → 切到 Network → 刷新页面
点顶部过滤器选 XHR、JS、CSS、Img、Doc，或直接扫一眼所有标红的条目
重点看三列：Name（请求路径）、Status（必须是 404）、Initiator（谁触发的，比如 index.html:12 或某个 app.js）

检查 `<img>`、`<script></script>`、`<link>` 的 src/href 是否拼错

90% 的静态资源 404 来自路径写错，尤其是相对路径在嵌套目录下失效。浏览器不会报错说“你路径错了”，只会默默发一个错的请求。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<img src="logo.png"> 在 /pages/about.html 下，实际请求的是 /pages/logo.png，不是根目录下的 /logo.png
<script src="./js/main.js"></script> 中的 ./ 在某些构建环境或服务器里会被忽略，行为不一致
<link href="css/style.css"> 若 CSS 文件实际在 /assets/css/style.css，就必须改 href 为 /assets/css/style.css
用右键 → “Copy link address” 粘贴出来，看浏览器最终解析出的完整 URL 是不是你预期的

留意 `<iframe></iframe>` 和 `location.href` 动态跳转的路径陷阱

这类 404 很隐蔽，因为 HTML 源码里看不出问题，全靠运行时拼接。

<iframe src="report.html"></iframe> 在 /admin/dashboard.html 下，会请求 /admin/report.html，而不是你放资源的 /assets/report.html
location.href = "user/profile" 在 /admin/ 页面执行，结果跳去 /admin/user/profile，而非 /user/profile
安全写法：location.href = "/user/profile"（开头带 /）或 new URL("user/profile", window.location).href
iframe 建议一律用绝对路径：src="/assets/report.html" 或完整 URL：src="https://cdn.example.com/report.html"

别被“软 404”骗了：确认响应头真是 `404 Not Found`

有些服务器配置错误，导致本该 404 的路径返回了 200 OK + 一段“页面未找到”的 HTML。这对 SEO 是灾难，但 Network 面板里看起来却“没报错”。

点开那个疑似 404 的请求 → Headers → 看 Response Headers 里的 Status 行
如果是 HTTP/1.1 200 OK 或 302 Found，说明是“软 404”，得去查服务器配置（ErrorDocument / error_page）
用 curl -I http://localhost/nonexistent-path 验证，输出必须含 404 Not Found
GitHub Pages / Netlify 默认正确；Nginx/Apache 必须显式配 error_page 404 /404.html 并加 internal 防直连