html路径解析取决于运行时html文件位置：相对路径以html物理路径为起点，/开头路径以站点根为起点；本地双击file://协议下根路径失效，须用本地服务测试；上线需验证部署结构与路径匹配。
HTML里写路径，不是选“对错”，而是选“在哪跑、怎么维护”。本地双击打开和部署到服务器，同一行 src 可能一个显示一个404——问题从来不在路径类型本身，而在你没意识到路径的解析起点是谁。
相对路径怎么算？起点是当前 HTML 文件，不是编辑器打开的位置
相对路径的“相对”，只认当前 HTML 文件在文件系统中的实际位置。比如你在编辑器里打开了 /blog/post.html，它实际存放在 C:\my-site\blog\post.html，那所有相对路径就从这个物理路径出发计算。
- 同级文件：直接写
index.html（./index.html中的./可省略） - 子目录资源：如图片在
img/logo.png，就写img/logo.png - 上级目录资源：当前是
blog/article.html，要引用根目录下的js/main.js，就得写../js/main.js—— 注意不是../../js/main.js，因为只跨了一级 - 常见错误：
src="C:\assets\icon.svg"这种磁盘绝对路径，浏览器会拒绝加载（CORS 或 file:// 协议限制），本地双击可能偶然成功，但一上传必挂
以 / 开头的路径不是绝对路径，是根目录相对路径
开头带斜杠的 /css/style.css 既不是文件系统绝对路径，也不是完整 URL，而是“站点根目录相对路径”。它的解析起点是当前域名的根，比如 https://example.com/，浏览器会自动拼成 https://example.com/css/style.css。
- 优势：页面挪到
/admin/user.html或/api/docs.html都不用改这个路径 - 陷阱：开发时用
file://协议双击打开 HTML，/css/style.css会被解析成file:///css/style.css（系统根目录），而不是你项目文件夹的根——所以本地测试必须起本地服务（如python -m http.server） - 不推荐混用：不要在一个项目里有的地方用
./img/，有的用/img/，后期重构或迁移子目录时容易漏掉某类路径
href 和 src 对路径处理逻辑一致，但语义影响行为
a 标签的 href 和 img 的 src 都按相同规则解析路径，但浏览器对失败的响应不同：链接跳转失败只是 404 页面；而 src 加载失败会导致占位符或空白，且可能阻塞渲染（尤其 script 的 src）。
-
href="/login"：无论当前在/blog/2024/还是/about，都指向站点根下的/login -
src="../data/config.json"：如果当前 HTML 在/pages/detail.html，就会尝试请求/pages/../data/config.json→/data/config.json - 动态生成路径时（如 JS 拼接
src），务必确认运行时 HTML 所在位置是否和开发时一致——单页应用（SPA）路由切换不刷新页面，但路径解析仍以初始 HTML 文件位置为准
上线前必须验证的三件事
路径问题往往上线才暴露，因为开发环境和生产环境的部署结构可能不同。
- 检查所有以
/开头的路径是否对应真实部署的站点根。比如你把整个项目部署为子路径https://example.com/myapp/，那/css/app.css就会请求https://example.com/css/app.css，而不是https://example.com/myapp/css/app.css——这时得改成相对路径或配置 base href - 用浏览器开发者工具的 Network 面板，看 404 请求的发起者是哪个 HTML 文件、请求的完整 URL 是什么，反推它认为的“当前路径”是什么
- 静态资源（CSS/JS/img）优先用根路径
/，页面内跳转链接可酌情用相对路径——但前提是整个站点不会被部署到子路径下；否则统一用构建工具注入公共路径前缀更稳妥
最常被忽略的一点：路径解析完全由浏览器执行，不经过后端。哪怕你用 Node.js 或 PHP 渲染页面，只要返回的是纯 HTML，里面的 src 和 href 就按前端规则解析。别指望服务器能“自动修正”路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
