以/开头的路径是根相对路径，从网站根目录解析，所有页面统一写法，避免因嵌套层级变化导致路径错误；但本地双击会404，须用本地服务器运行，且部署在子路径时需配合publicPath或路由重写。
/ 开头的路径不是“绝对路径”，而是“根相对路径”——它依赖网站部署后的根目录，不依赖当前 HTML 文件位置。真正容易维护的，是这种以 / 开头的写法，而不是带协议的完整 URL（如 <a href="https://www.php.cn/link/cbcf331a5f3f1356bdab345699d5ca9f">https://www.php.cn/link/cbcf331a5f3f1356bdab345699d5ca9f</a>）。
为什么 /css/style.css 比 ../css/style.css 更好维护？
/ 开头的路径从网站根目录算起，所有页面引用同一份 CSS 时写法统一，不用关心自己在第几层子目录里。
比如：
- index.html 在根目录 → href="/css/style.css"
- blog/post.html 在二级目录 → 还是写 href="/css/style.css"
- admin/users/edit.html 在四级目录 → 依然写 href="/css/style.css"这避免了因页面嵌套层级不同而反复调整 ../ 数量，也杜绝了 “../../css/style.css 写成 ../../../css/style.css 导致样式不加载” 这类低级但高频的错误。
/ 开头路径的常见误用和坑
- 它只在**部署后生效**：本地双击打开 HTML 文件（file:// 协议）时，/css/style.css 会尝试加载 file:///css/style.css，404 是必然的；开发阶段必须走本地服务器（如 http://localhost:3000）。
- 不要混用：如果项目实际部署在子路径下（如 https://example.com/myapp/），而你仍写 /css/style.css，浏览器会请求 https://www.php.cn/link/cbcf331a5f3f1356bdab345699d5ca9f，而非 https://example.com/myapp/css/style.css。此时需配合构建工具注入公共路径（如 Webpack 的 publicPath）或后端路由重写。
- src 和 href 行为一致：无论是 <link href="/css/style.css"> 还是 <img src="/assets/logo.png">，都按相同规则解析。
什么时候该用带协议的绝对 URL？
仅限跨域资源： - CDN 上的第三方库：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
- 外部字体服务：https://fonts.googleapis.com/css2?family=Inter
- 无法保证部署路径一致的静态资源托管（如 S3 + CloudFront 自定义域名）
这些场景下，/ 开头路径完全无效，必须用完整 URL。
真正影响维护成本的，不是“绝对 vs 相对”的二分法，而是路径基准点是否稳定。根相对路径（/xxx）把基准点锚定在部署后的网站根，比文件相对路径（./、../）更可控——前提是你的部署环境支持且路径结构固定。否则，再“规范”的写法也会在上线那一刻失效。
立即学习“前端免费学习笔记（深入）”；
