html资源路径90%错误源于解析基准误判：始终以html文件物理位置为起点，非地址栏url；本地双击失效因/被解析为磁盘根而非站点根，应统一用相对路径或本地http服务器。
HTML里资源路径写错，90%不是拼错了，而是没搞清解析基准——它永远以HTML文件在磁盘上的物理位置为准，跟浏览器地址栏显示的URL无关。
相对路径怎么写才不404
所有 src、href 的解析起点，是当前 HTML 文件在项目目录中的实际存放位置。本地双击打开正常、一丢服务器就挂，基本就是这个基准被误判了。
- 同级文件：直接写
style.css，./style.css是等价但冗余的 - 子目录资源：用正斜杠，如
js/main.js；别用反斜杠js\main.js（Windows 编辑器容易自动补，得手动改） - 上级目录：必须逐级写
../，比如 HTML 在/pages/article.html，要引用根目录下/assets/logo.svg，就得写../assets/logo.svg - 大小写敏感：Linux 服务器上
IMG.PNG≠img.png，本地 Windows 不报错，上线必 404
/ 开头的路径为什么在本地打不开
以 / 开头的路径（如 /css/style.css）是 Web 绝对路径，解析基准是「域名根目录」，不是你电脑的 C: 盘或 /home/user。直接双击 HTML 文件走的是 file:// 协议，此时 /css/style.css 会被浏览器当成 file:///css/style.css，几乎肯定报 net::ERR_FILE_NOT_FOUND。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只在部署到真实 Web 服务器（Nginx/Apache/Vite dev server）时才安全可用
- 开发阶段建议统一用相对路径，或配一个本地 HTTP 服务（如
npx http-server） - 如果非要用
/开头，确保项目部署路径和服务器配置的 root 一致，否则子路径部署（如https://example.com/my-app/）会全部失效
第三方 CSS/JS 为什么不能塞进组件模板
像 Angular 的 header.component.html 或 React 的 JSX 中写 <link href="%7B%7BcdnUrl%7D%7D/bootstrap.css">，构建阶段就会失败，因为构建工具（Vite/Webpack/Angular CLI）在编译时静态分析 HTML 模板，但组件模板不是资源入口，无法解析变量、也无法注入哈希值。
- 所有全局依赖（Bootstrap、FontAwesome、jQuery、字体）必须硬编码进
index.html的或底部 - CDN 地址要写死，例如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，别拼process.env.CDN_BASE + '/bootstrap.css' - 如果用了哈希文件（如
main.a1b2c3.js），只有index.html能被插件（如html-webpack-plugin）自动更新路径；组件里的链接永远无法被重写
路径写法对缓存和部署的影响
路径本身不决定缓存效果，但错误写法会让“持久化链接”失效——比如 HTML 里写的还是 main.js，而构建后实际生成的是 main.a1b2c3.js，浏览器加载旧路径，就拿不到新内容，长期缓存形同虚设。
- 避免手动拼接路径参数，如
logo.png?v=1.2；版本控制应交给构建工具生成哈希文件名 - 静态资源可和代码混放（
main.jsx和style.css同目录没问题），但 HTML 入口必须明确，且所有资源引用都得基于该入口的物理位置来算 - HTML 文件本身禁用强缓存（
Cache-Control: no-cache），而带哈希的 JS/CSS 可缓存一年；路径一旦写死且匹配，浏览器就能精准复用缓存
最易忽略的一点：路径问题往往不是“怎么写”，而是“在哪运行”。本地 file:// 下能跑，不等于线上能跑；开发服务器能跑，不等于 Nginx 配置正确。验证前先看 Network 面板里请求的真实 URL 是什么，再反推路径该从哪一级开始写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
