HTML路径错误主因是混淆当前文件位置与浏览器URL解析规则；本地双击用相对路径，部署后用根相对路径“/”，所有src/href等路径属性解析逻辑完全相同。
HTML 模板里路径写错，90% 是因为没搞清当前文件在哪、目标资源在哪、浏览器到底按什么规则拼接 URL。 直接用 / 开头或瞎写 ../ 不是解法，而是掩盖问题的临时补丁。
怎么判断该用相对路径还是根相对路径（/xxx）
看部署环境和引用稳定性需求。本地双击打开 HTML 文件时，/images/logo.png 会失败——浏览器把它当成本地磁盘根目录 file:///images/logo.png，而你实际文件在 file:///D:/project/images/。这种场景必须用纯相对路径，比如 images/logo.png 或 ../images/logo.png。
但一旦部署到 Web 服务器（如 Nginx、Apache、Vercel），/images/logo.png 就能稳定工作，因为 / 此时指向的是网站根目录（比如 https://example.com/ 下的 /images/）。大型项目中，模板被多个子路由（如 /blog/2024/、/admin/users/）复用时，根相对路径可避免每个页面都去算 ../../../。
- 本地开发调试：优先用不带
/的相对路径（css/main.css、../js/app.js） - 构建后部署上线：统一用根相对路径（
/css/main.css、/js/app.js），配合构建工具（如 Vite、Webpack）的base配置 - 引用 CDN 或跨域资源：必须用完整 URL（
https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js）
src 和 href 路径解析规则完全一样吗
是的，src（<img>、<script>、<iframe>）、href（<a>、<link>）、甚至 poster（<video>）、data-src（懒加载）等所有属性，只要值是路径，浏览器都按同一套规则解析：先看是否以 / 开头 → 否则看是否以 http:// 或 https:// 开头 → 否则按当前 HTML 文件 URL 的路径部分做基准拼接。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见误解：<a href="about.html"> 是跳转，<img src="about.html"> 是加载图片——但路径计算逻辑一模一样。区别只在语义和后续行为，不在解析阶段。
- 当前 HTML 是
https://a.com/blog/post.html，href="contact.html"→ 解析为https://a.com/blog/contact.html - 同上，
src="contact.html"→ 也解析为https://a.com/blog/contact.html（虽然加载失败，但路径没错） - 当前 HTML 是
https://a.com/blog/post.html，href="../index.html"→https://a.com/index.html；src="../index.html"→ 同样是https://a.com/index.html
为什么 ../ 写多了或写少了就 404
因为 ../ 不是“返回上一级”，而是“把当前 URL 路径的最后一级去掉”。浏览器不是靠文件系统真实跳转，而是字符串裁剪：从当前 HTML 的完整 URL 中，把最后一段路径名（不含 /）删掉，再拼上你写的路径。
例如当前页面是 https://a.com/a/b/c/d/e.html，你想引用 https://a.com/a/js/app.js：
- 错误写法
../../js/app.js：裁掉e.html→/a/b/c/d/，再裁掉d→/a/b/c/，拼上js/app.js→/a/b/c/js/app.js（错） - 正确写法
../../../js/app.js：裁三次 →/a/b/→/a/→/，拼上js/app.js→/a/js/app.js（对） - 更稳写法
/a/js/app.js：直接根相对，不依赖层级
最易忽略的一点：URL 路径末尾有没有 / 会影响裁剪结果。比如 https://a.com/blog/（结尾有 /）和 https://a.com/blog（无 /）对 ../ 的解析完全不同——前者裁掉空段，后者裁掉 blog。
