双击打开时 file:// 协议下 / 指向磁盘根而非项目根，导致 href="/css/style.css" 请求 file:///css/style.css 而 404；应改用相对路径或启动本地服务（如 http.server）。
为什么 href="/css/style.css" 在本地双击就 404
浏览器看到以 / 开头的路径，会按「站点根目录」解析，即认为资源在 http://localhost/css/style.css 下；但双击打开时地址是 file:///D:/project/index.html，此时 / 指向的是磁盘根（D:/），不是你的项目文件夹。它实际请求的是 file:///css/style.css，自然 404。
这不是路径写错了，是你默认的「根」根本不存在——/ 在 file:// 协议下没有站点上下文，只认物理磁盘根。
- 开发阶段别依赖
/xxx路径，改用相对路径（如css/style.css）或起本地服务（python3 -m http.server） - 检查浏览器地址栏：如果是
file://开头，就别用根路径；如果是http://127.0.0.1或http://localhost，根路径才生效 - VS Code 的 Live Server 插件默认只服务已保存的
.html文件，未保存或扩展名是.HTML也会导致路径加载失败
相对路径怎么算才不晕
相对路径的「相对」，只认当前 HTML 文件在文件系统中的**实际位置**，不是编辑器里你「觉得」它在哪。比如 C:\my-site\blog\post.html 里写 ../css/main.css，就是从 blog/ 向上跳一级到 my-site/，再进 css/ 目录找。
- 同级资源：直接写文件名，如
style.css、app.js - 子目录资源：用目录名开头，如
js/main.js、images/logo.png - 父目录资源：用
../，每层一个，如../assets/fonts/roboto.woff；避免嵌套太多层（如../../../），容易错且难维护 -
./是冗余的，./style.css和style.css完全等价，没必要加
用开发者工具快速定位路径问题
页面打开但样式/脚本不生效，90% 是路径错。别猜，直接看 Network 面板：
立即学习“前端免费学习笔记（深入）”；
- 刷新页面，切换到 Network 标签页，筛选
css或js - 点开红色 404 请求，看「Headers」里的 Request URL —— 浏览器实际请求的是哪条路径？和你写的是否一致？
- 常见误判：
Uncaught SyntaxError: Unexpected token ' 往往是 JS 路径错，服务器返回了 HTML 404 页面而不是 JS 文件 - 右键「Open in new tab」那个 404 地址，看能不能手动访问到资源，能说明路径本身对，只是引用方式不对
编辑器场景下路径失效的隐藏原因
富文本或可视化 HTML 编辑器里，路径问题常叠加 DOM 结构动态性与 Shadow DOM 隔离：
- 如果资源链接写在 Shadow DOM 内部（比如自定义元素的
shadowRoot.innerHTML），href或src的解析起点仍是宿主文档的 base URL，不是 shadowRoot 所在位置 - 用
Element.closest查语义块时，若目标在 Shadow DOM 内，e.target.closest('.block')会查不到，得用e.composedPath()[0]?.closest('[data-editor-block]') - 预渲染的 fragment 或未挂载节点里写的路径，在插入 DOM 前不会触发加载，也不会报错，但后续永远不生效
路径不是越“绝对”就越稳，关键是你清楚它在哪个协议、哪个上下文、哪个 DOM 树层级里被解析。本地双击、Live Server、Nginx 部署、CDN 加速，同一行 href 可能对应四个完全不同的物理路径。
