必须用开发者工具network面板确认真实请求路径：f12→network→勾选preserve log→刷新或交互→找标红404→查看headers中request url→粘贴直访验证；注意status code: 0、隐藏字符、大小写、斜杠、编码及框架静态目录约束。
用 Network 面板看浏览器实际请求的资源路径
浏览器地址栏显示的 URL 不等于它真正发出去的请求，很多 404 是因为相对路径被自动补全、<base> 干扰或 JS 动态改写导致的。必须用开发者工具确认真实请求。
操作步骤：
- F12 打开开发者工具 → 切到 Network 标签 → 勾选 Preserve log
- 刷新页面，或点击触发资源加载的操作（比如打开新页面、切换 tab）
- 在列表中找标红的
404条目，点开 → 查看 Headers 里的Request URL - 把这个 URL 粘贴到新标签页直访：如果也 404，说明路径本身无效；如果能打开，问题出在原页面的 JS 或 CSP
注意：Status Code: 0 不是 404，大概率是跨域、file:// 协议限制，或服务端主动断连，和地址拼写无关。
检查 HTML 中的 href 和 src 是否含不可见字符或格式错误
复制粘贴来的链接常带隐藏问题：开头/结尾空格、全角冒号、中文引号、换行符，甚至零宽空格（U+200B）。这些在编辑器里看不见，但服务器会拒收。
验证方法：
- 全选
href或src的值 → 粘贴进纯文本编辑器（如系统记事本），观察是否有异常空格或符号 - 特别注意末尾斜杠：
href="blog"和href="blog/"在多数服务器上是两个不同资源 - Linux/macOS 服务器区分大小写：
IMG.JPG≠img.jpg；Windows 主机不敏感，但 CDN 或反向代理层可能区分 - 若用了
<base href="/sub/">，所有相对路径都会被前缀补全，此时href="page.html"实际请求的是/sub/page.html
确认静态资源是否落在服务器可服务的目录下
不是“文件放哪了”，而是“服务器允许从哪提供”。框架和托管平台对静态资源有硬性路径约束。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见规则：
- Flask：必须放在
static/目录下，HTML 中用url_for('static', filename='css/app.css')；写成./css/app.css必然 404 - Django：图片必须放进
static/子目录（如static/images/logo.png），模板中用{% static 'images/logo.png' %}，且settings.py中STATIC_URL = '/static/'已配置 - GitHub Pages：静态资源必须和 HTML 在同一仓库，且
404.html必须放在根目录；子目录资源需按/project-name/css/style.css这类路径引用 - Vercel/Netlify：默认支持，但若自定义了
public/或dist/输出目录，HTML 中的路径必须与构建产物结构严格对齐
排查 URI 中非法字符导致的截断式 404
浏览器遇到未编码的空格、中文、&、= 会直接截断请求路径，后半截丢弃——服务器只收到前半段，自然返回 404。
典型例子：
-
src="js/app.js?q=你好 world"→ 浏览器只发js/app.js?q=你好，world被丢弃 -
href="page?name=张三&age=25"→ 若未编码，&被当作参数分隔符，age=25可能被忽略 - 文件名含中文或
ö等字符时，浏览器自动编码为%C3%B6，但文件系统若存的是未编码名，就会 404
解决办法：静态资源文件名坚持用 ASCII 字符；查询参数必须用 encodeURIComponent() 编码；避免在 src/href 中拼接原始用户输入。
最容易被忽略的一点：你看到的 404 页面本身，可能就是由一个错误的 404.html 路径引发的连锁反应——比如它引用了 css/404.css，而这个 CSS 文件又因路径错位返回了 404，导致样式失效，进一步掩盖了真正的错误线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
