HTML路径错误导致资源失效的本质是“位置感”缺失：从当前HTML文件出发，用./（同级）、../（上一级）精准计算层级；/开头路径需本地启HTTP服务才有效；务必通过Network面板查404请求URL并比对真实路径，同时注意大小写、命名规范与不可见字符。
HTML路径写错，图片不显示、CSS不生效、链接404——不是代码写错了，是“位置感”没建立起来。所有路径问题，本质都是当前文件在哪、目标文件在哪、中间要走几步没算清楚。
相对路径怎么算：从当前HTML文件出发，用../和./定位
浏览器解析路径时，只看HTML文件物理存放位置，不看你在编辑器里怎么折叠文件夹。所谓“相对”，就是以这个HTML文件为起点走路：
-
logo.png：同级目录，直接写文件名（./可省略） -
images/logo.png：进一层叫images的子文件夹 -
../assets/logo.png：先退一级（../），再进assets文件夹 -
../../public/logo.png：连退两级，再进public
常见错误：在/pages/about.html里想引用根目录下的js/app.js，写成js/app.js（少退一级）或../../../js/app.js（多退一级）。正确是../js/app.js。
/开头的路径为什么本地双击打不开
以/开头的路径是Web服务器绝对路径，意思是“从网站根目录开始找”。但当你双击HTML文件用file://协议打开时，浏览器会把它当成磁盘根目录（比如C:/或/），而不是你项目文件夹的根。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 本地开发时：
/css/style.css→ 浏览器去找C:/css/style.css，当然404 - 部署到服务器后：
https://example.com/pages/a.html中引用/css/style.css→ 实际请求https://example.com/css/style.css，正常
解决办法：本地开发务必用live-server、VS Code Live Server插件，或python3 -m http.server起一个本地HTTP服务，让/真正指向你的项目根目录。
图片加载失败却不报错？必须看Network面板
<img src="xxx">路径错了，浏览器不会在Console抛JS错误，只会Network里标红404，页面上留个空白方块。新手常因此卡半天，以为是标签写法问题。
- 按
F12→ 切到Network标签 → 刷新页面 → 找Img类型请求 → 看状态码是不是404 - 点开那个404请求，看
Request URL列显示的完整地址，对比你项目里真实路径 - 把
Request URL粘贴到新标签页直接访问，确认是不是真不存在，还是路径层级搞反了
顺手加个onerror兜底：<img src="logo.png" onerror="this.src='placeholder.png'">，避免白屏干扰判断。
大小写、空格、扩展名：Linux服务器上全都要命
Windows/macOS本地开发不区分Logo.png和logo.PNG，但大多数线上服务器（Linux）严格区分大小写。路径里多一个空格、少一个点、扩展名写成.jpeg而实际是.jpg，都会导致404。
- 统一用小写字母+短横线命名：
header-banner.jpg，别用HeaderBanner.JPG - 检查文件是否真的存在：在终端
ls -l images/确认名字完全一致 - 路径中禁用中文、空格、括号、emoji——哪怕本地能跑，部署就挂
最隐蔽的坑：编辑器里看着是logo.png，右键“在资源管理器中显示”却发现系统实际存的是logo.png\ufeff（带BOM或不可见字符）。遇到诡异404，直接删掉重命名一次。
