相对路径404的根本原因不是路径写错，而是浏览器按当前URL拼出的请求地址与服务器真实文件位置不匹配，涉及拼接逻辑、服务端根目录配置及协议环境三者错位。
相对路径出现404，根本不是“路径写错了”，而是浏览器按当前 URL 拼出来的请求地址，和服务器上真实文件位置对不上——拼接逻辑、服务端根目录、协议环境三者稍有错位，就必然 404。
浏览器怎么拼相对路径？
浏览器从不看你的项目文件夹结构，它只认当前页面的完整 URL，然后按规则补全 href 或 src。比如当前页面是 https://example.com/admin/（注意结尾斜杠），location.href = "user/profile" 实际发出的请求就是 https://example.com/admin/user/profile；但如果当前页是 https://example.com/admin（无结尾斜杠），结果会变成 https://example.com/user/profile——同一段代码，在不同 URL 下行为完全不同。
- 用
new URL("user/profile", window.location).href可规避歧义，它严格按 WHATWG URL 标准解析 -
./开头看似安全，但部分构建工具（如旧版 Webpack Dev Server）会忽略它，行为不可靠 - 不要依赖开发者工具 Elements 面板里看到的
href值——JS 可能动态改过它，必须看 Network 面板里的 Request URL
服务器根目录 vs 文件系统路径
你把 index.html 放在 /project/pages/about.html，不代表它就能通过 http://localhost/pages/about.html 访问。Nginx 的 root 或 Apache 的 DocumentRoot 才是真正的“/”起点。如果配置的是 root /var/www/html;，那只有放在 /var/www/html/pages/about.html 才有效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Linux/macOS 服务器严格区分大小写：
About.html≠about.html - Windows 主机本地测试不报错，一上 Linux 服务器立刻 404
- 路径末尾斜杠影响重定向：访问
/blog时，服务器可能自动跳转到/blog/并尝试找index.html；而/blog/下若没放index.html，就直接 404
file:// 协议下根本不是 404
双击打开 HTML 文件时地址栏显示 file:///Users/xxx/index.html，此时所有相对路径（./img/logo.png、../css/app.css）都受浏览器安全策略限制，失败时控制台报 Not allowed to load local resource，HTTP 状态码压根不会出现 404——这是跨域读取本地文件被拒，不是路径问题。
立即学习“前端免费学习笔记（深入）”；
- 真正验证 404，必须用 HTTP 服务：Python 用户跑
python -m http.server 8000，Node 用户用npx serve -s - VS Code Live Server 插件已启服务，就该用它输出的
http://127.0.0.1:5500/xxx.html，别拖文件进浏览器再手动改地址栏 - 某些框架（Django、Flask）默认只服务
/static/下的资源，./images/foo.jpg这种写法永远 404，哪怕文件真在那儿
base 标签悄悄改了所有路径规则
<base href="/subapp/"> 会让所有相对路径（<a href="page">、<script src="app.js">、CSS 里的 url(./img.png)）自动补上前缀。一旦 href 值漏斜杠（"/subapp"）、多斜杠（"/subapp//"），或跟构建配置（Vite 的 base、CRA 的 homepage）不一致，跳转和资源加载会同步失效。
- 检查 HTML 源码（右键 → 查看页面源代码），确认
<base>存在且值与部署路径完全一致 - Vite 项目中
vite.config.ts的base必须和<base href>保持同步，否则import()动态导入也会出错 - 没用子路径部署就别写
<base>——现代构建工具默认不需要它，加了反而埋雷
