本地双击打开HTML时，以/开头的路径被解析为本地磁盘根目录而非站点根目录，导致404；应使用相对路径或本地服务器。
在 index.html 里写超链接，90% 的路径问题都出在混淆了「站点根目录」和「文件系统根目录」——不是路径写错了，而是你默认的「根」根本不存在。
为什么 href="/css/style.css" 在本地双击打开就失效
浏览器看到以 / 开头的路径（比如 href="/css/style.css"），会认为这是「站点根目录」，即 http://localhost/ 或 https://example.com/ 下的根。但如果你只是双击 index.html 打开，地址栏是 file:///D:/project/index.html，此时 / 指向的是本地磁盘根（D:/），而不是你的项目文件夹。
结果就是：浏览器去请求 file:///css/style.css，当然 404。
- ✅ 正确做法：开发阶段用相对路径（如
href="css/style.css"）或起一个本地服务器（python3 -m http.server） - ❌ 不要依赖
/xxx路径在file://协议下工作 - ⚠️ 注意：
/开头 ≠ 绝对路径错误，而是协议上下文不匹配
../ 和 ./ 的实际行为经常被高估
../ 不是“返回上一级”，而是「解析时向上跳一层目录」；./ 也不是必须写，而是显式声明「从当前目录开始」。关键看当前 HTML 文件的**真实位置**，不是你想象的“它应该在哪”。
立即学习“前端免费学习笔记（深入）”；
- 如果
index.html在/pages/home/index.html，想引用同级的/pages/about.html，得写href="../about.html"（不是../../about.html） -
href="./images/logo.png"和href="images/logo.png"完全等价，./只在脚本或 CLI 场景中防歧义，HTML 里纯属冗余 - 嵌套太深时（比如 4 层以上），优先重构目录结构，而不是堆
../../../..—— 难读、难维护、一挪就断
什么时候必须用绝对 URL（带 https://）
只有两类情况真正需要完整协议+域名的绝对路径：
- 指向外部网站或 CDN 资源，例如：
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" - 生成可被邮件、微信、钉钉等第三方环境直接打开的 HTML（它们不走本地服务器，也不认
/根） - ⚠️ 注意：
href="D:\project\contact.html"是本地文件绝对路径，仅 Windows 记事本+IE 可能偶然生效，现代浏览器一律屏蔽，属于无效写法
构建工具介入后，路径逻辑就变了
用 Vite、Webpack 或 Hugo 时，index.html 最终输出位置可能和源码位置不同，而构建工具通常会重写 href 和 src 中的路径（尤其是 / 开头的）。这时候你写的 href="/assets/main.js" 实际会被替换成带 hash 的路径，或者自动补 base URL。
- ✅ 查构建文档确认是否启用了
base配置（Vite 的base、Vue CLI 的publicPath） - ❌ 不要在构建项目里手动拼接
../去“绕过” base —— 构建器会忽略或报错 - ? 真正容易被忽略的点：开发服务器（
vite dev）和静态部署（vite build后直接放 Nginx）的根路径行为不一致，必须测上线环境
