相对路径必须以HTML文件物理位置为基准：同级写logo.png，上级用../逐级回退，子目录用/分隔；禁用绝对路径/assets/以防部署子路径404，第三方资源须硬编码进index.html，大小写与空格需严格统一。
大型 HTML 项目里静态资源一乱，本地能跑、上线就 404，改个 logo 要翻三页代码——根本不是资源多，是路径没管住。
相对路径怎么写才不被浏览器“骗”
浏览器解析 src 和 href 时，只认 HTML 文件在磁盘上的物理位置，不看你地址栏里写了啥。index.html 在根目录，logo.png 就行；它在 /pages/dashboard.html，想引用根目录下的 /assets/icon.svg，就得写 ../assets/icon.svg。
- 别用
/assets/logo.png：部署到子路径（如/admin/）时，请求直接发到域名根，必 404 -
./logo.png和logo.png效果一样，但前者多打字符还容易手误写成./ ./logo.png - Windows 上大小写不敏感，Linux 服务器上
IMG.PNG≠img.png，上线就挂 - 路径里有空格或中文？URL 编码后难调试，构建工具也可能截断
第三方 CSS/JS 必须硬编码进 index.html
你在 React 组件里写 <link href="{{cdnUrl}}/bootstrap.css">，Vite 或 Webpack 构建时根本不会去算这个变量，直接报错 NG2008: Could not find stylesheet file，或者打包完还是原样，运行时请求 https://example.com/{{cdnUrl}}/bootstrap.css。
- 所有全局依赖（Bootstrap、FontAwesome、jQuery、字体文件）统一塞进
index.html的<head>或<body>底部 - CDN 地址写死，例如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，别拼process.env.CDN_BASE + '/bootstrap.css' - 如果用了多语言 HTML（如
index.en.html），每个模板都得单独维护这些链接，没法共用
静态资源和代码放一起真没问题
不用非得建 /public 或 /static 目录。Vite、Zero Server 甚至 file:// 协议都支持同目录访问：main.js 和 style.css、logo.svg 放同一级，HTML 里写 style.css 就能加载。
立即学习“前端免费学习笔记（深入）”；
- 关键不是目录结构，而是“入口边界”清晰：整个 SPA 只有一个 HTML 入口（
index.html），其他页面靠前端路由跳转 - 如果是多页应用（MPA），所有 HTML 文件建议放根目录或统一
/pages/下，链接用根相对路径（如/pages/contact.html），避免嵌套子目录（/pages/blog/post-1.html容易让路径失控） - 公共结构（页头/页脚）别复制粘贴，用构建工具注入，或服务端 includes，否则改一处要同步二十个文件
HTML 强缓存和资源更新不同步怎么破
用户刷新看不到新样式？大概率是 HTML 被强缓存了，而 main.a1b2c3.css 已更新。浏览器按 Cache-Control 决定是否发请求，HTML 默认可能缓存几小时。
- HTML 响应头设
Cache-Control: public, max-age=60，确保每分钟校验一次 - CSS/JS/图片等启用长期缓存（
max-age=31536000），配合内容哈希命名（如main.a1b2c3.js）切断旧引用 - 禁用 HTML 强缓存不是解法——它会让每次访问都重拉整个页面，反而拖慢首屏
最常被忽略的点：路径基准永远是 HTML 物理位置，不是你“觉得”它在哪；所有外部资源入口必须收口到 index.html，不然构建工具和浏览器就各算各的账。
