html中以/开头的路径是根相对路径，代表网站根目录（如https://example.com/），非文件系统根；本地双击打开会解析为file:///导致404，必须用本地服务器测试。
绝对路径以斜杠开头表示根目录
HTML 中 <link> 标签用绝对路径引入 CSS，关键在于路径以 / 开头，它代表网站根目录（不是文件系统根目录，而是 Web 服务器配置的文档根目录，比如 /var/www/html 或项目部署后的域名根路径）。
例如，你的 CSS 文件实际位于服务器上的 /static/css/main.css，那么在任意 HTML 页面中都应这样写：
<link rel="stylesheet" href="/static/css/main.css">
- 这个
/static/css/main.css会从当前域名根开始解析，如访问https://example.com/blog/post.html，浏览器最终请求的是https://example.com/static/css/main.css - 路径不依赖当前 HTML 所在位置，所以适合多级子目录下的统一资源引用
- 注意：不能写成
//static/css/main.css（这是协议相对 URL，容易因 HTTP/HTTPS 混合引发问题），也不该写成C:/project/static/css/main.css（这是本地文件路径，浏览器拒绝加载）
绝对路径和相对路径混用时常见错误
开发者常把绝对路径误写成“看起来像绝对”的相对路径，比如在 /blog/index.html 里写 href="static/css/main.css"（缺开头斜杠）或 href="../static/css/main.css"（靠猜测层级）。这类写法一旦页面挪动位置就 404。
典型错误现象：Failed to load resource: the server responded with a status of 404 ()，打开浏览器 DevTools 的 Network 面板，看请求地址是否拼错了。
- 检查
href值是否以/开头 —— 这是判断是否为绝对路径的唯一依据 - 确认服务器上真实存在的路径与
href完全一致（区分大小写，Linux 服务器尤其敏感） - 如果用本地
file://协议打开 HTML（双击运行），/xxx会被解析为本地磁盘根目录（如C:/xxx），必然失败 —— 绝对路径必须配合本地服务器（如python -m http.server）测试
开发环境与生产环境路径不一致怎么办
开发时可能用 http://localhost:3000，生产部署后变成 https://example.com/app/，此时根路径 / 指向的是 /app/ 下，而非整个域名根。硬写 /static/... 就会 404。
这不是路径写法问题，而是部署上下文变化导致的。解决方案取决于构建工具：
- Vite：配置
base: "/app/"，它会自动重写所有<link>的href前缀 - Webpack：通过
output.publicPath控制资源基准路径 - 纯静态页：改用相对路径 + 构建时注入前缀，或服务端渲染时动态输出
href
直接在 HTML 里手写 /static/... 并假设它永远有效，只适用于部署路径和域名根完全对齐的简单场景。
为什么不用 file:// 协议测试绝对路径
因为浏览器对 file:// 的安全策略限制极严：href="/static/css/main.css" 在本地双击打开时，会被解析为 file:///static/css/main.css（即 C 盘根目录下的 static 文件夹），几乎不可能命中你项目里的文件。
- 现象：控制台报错
net::ERR_FILE_NOT_FOUND - 正确做法：用轻量本地服务器启动，例如终端执行
python3 -m http.server 8000，然后访问http://localhost:8000 - 编辑器插件（如 VS Code Live Server）本质也是起一个本地 HTTP 服务，它能正确解析
/为服务根目录
路径本身没错，但测试方式错了，就会误判为写法问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
