选绝对路径还是相对路径取决于阶段、环境和资源类型：以“/”开头的站点根路径适合部署后多级目录项目，相对路径适配本地双击预览，带协议URL专用于CDN或跨域资源。
选绝对路径还是相对路径，关键看你在什么阶段、什么环境、引用什么资源。不是哪个“更好”，而是哪个更合适。
什么时候用以 / 开头的绝对路径（站点根目录路径）
这种写法是 Web 服务器环境下最常用、最稳定的内部路径方式，前提是你的项目已部署或通过本地服务器运行（如 python3 -m http.server）。
- 所有页面都能统一从网站根目录找资源，比如
<link rel="stylesheet" href="/css/main.css">，无论当前页是/blog/post.html还是/admin/users.html，都指向同一个 CSS 文件 - 适合多级目录结构，避免写一堆
../../../ - 构建工具（Vite、Webpack）通常默认支持并自动处理这类路径，还会注入 base 配置
-
注意：双击 HTML 文件用
file://协议打开时，/css/main.css会被当成磁盘根目录（如C:/css/main.css），必然失败——这不是路径写错了，是协议不匹配
什么时候用相对路径（如 css/main.css、../images/logo.png）
相对路径依赖当前 HTML 文件所在位置，天然适配本地开发和便携式项目。
- 文件挪动时，只要保持它们之间的相对位置不变，路径就依然有效
- 双击打开 HTML 就能正常加载资源，不用起服务，适合快速预览或邮件附件类静态页
-
./可省略，./images/logo.png和images/logo.png效果完全一样 - 用
../返回上级目录时，要数清当前文件嵌套了几层——比如/pages/blog/article.html引用根目录下的index.html，就是../../index.html，不是../index.html
带协议的完整 URL（如 https://cdn.example.com/js/app.js）只在两种情况必须用
这是真正的跨域绝对路径，浏览器会直接发起网络请求，不经过当前站点上下文。
立即学习“前端免费学习笔记（深入）”；
- 引用 CDN 上的第三方资源，比如 jQuery、Bootstrap、字体或图标库
- 生成的 HTML 要发给微信、钉钉、邮件等外部环境打开，这些场景不走本地服务器，也不认
/根，只有完整 URL 才能访问 - 不要用它做站内跳转，比如把
<a href="https://yoursite.com/about">当导航链接——既多余又增加 DNS 查询开销
哪些写法应该避免
有些路径看似“绝对”，实则不可靠或已被现代浏览器限制。
-
D:\project\index.html这类本地磁盘绝对路径：仅 IE + 记事本时代可能偶然生效，现在所有主流浏览器都会拦截，属于无效写法 - 深层嵌套相对路径，比如
../../../../assets/data.json：难读、易错、一改目录结构就全崩，应优先调整文件组织，而不是堆点点斜杠 - 混用路径风格却不统一：同一项目里有的地方用
/img/，有的用../img/，后期维护成本陡增
