相对路径正确写法取决于HTML文件的物理位置：同级可省略./，子目录用/，上级用../逐级，大小写敏感，避免绝对路径和手动拼接参数，全局资源须硬编码在index.html中。
相对路径怎么写才不会 404
核心就一条：所有 src、href 的解析基准，是当前 HTML 文件在磁盘上的物理位置，不是浏览器地址栏显示的 URL，也不是编辑器里你“觉得”它在哪。
常见错误现象：Network 面板里看到 style.css 状态是 failed，但文件明明存在；本地双击打开正常，一丢到服务器就挂；Linux 上图片不显示，Windows 却没问题。
-
./前缀可省略：同级目录下写script.js和./script.js效果一样，多打字符还容易手误 - 子目录用正斜杠：写
src="js/main.js"，别用反斜杠src="js\main.js" - 上级必须逐级
../：HTML 在/pages/article.html，想引用根目录/assets/logo.svg，就得写src="../assets/logo.svg"，少一个../就 404 - 大小写敏感：服务器上
IMG.PNG≠img.png，本地 Windows 不报错，上线必挂 - 绝对路径
/xxx别在开发期乱用：双击打开时会被解析成file:///xxx，几乎肯定net::ERR_FILE_NOT_FOUND
第三方 CSS/JS 为什么不能塞进组件模板
因为构建工具（如 Vite、Webpack、Angular CLI）在编译阶段会静态分析 HTML 模板，而组件模板（比如 header.component.html）不是资源入口，它不参与构建时的资源收集和哈希注入流程。
常见错误现象：你在组件里写 <link href="{{cdnUrl}}/bootstrap.css">，构建直接报错 NG2008: Could not find stylesheet file；或者打包后 HTML 里仍是未替换的变量，导致运行时请求 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' - 如果用了构建工具生成带哈希的资源（如
main.a1b2c3.js），只有index.html能被插件（如html-webpack-plugin）自动注入正确路径；组件模板里的链接永远无法被自动更新
HTML 引用静态资源时，哪些写法会破坏长期缓存
所谓“持久化链接”不是靠改路径写法实现的，而是靠 URL 稳定 + 服务端响应头协同。一旦 HTML 里写的路径和实际部署的哈希文件不匹配，缓存就形同虚设。
常见错误现象：你改了 JS 逻辑，重新构建发布，但用户刷新页面还是旧行为——不是 CDN 没刷新，而是 HTML 文件本身没更新，还在请求旧哈希的 app.oldhash.js，而那个文件早已被清理。
- 禁止在 HTML 中手动拼接查询参数：比如
app.js?v=1.2.3或app.js?t=1719765120，这会让浏览器绕过强缓存，且无法利用ETag协商 - 避免硬编码无哈希路径：写
<script src="/js/app.js">看似简洁，但一旦该文件内容变更，旧缓存不会自动失效，用户可能长期卡在旧版 - 确保 HTML 和它引用的所有哈希资源原子性发布：一次部署中，
index.html和app.a1b2c3.js必须同时上线；否则会出现 HTML 指向已删除的哈希文件 -
index.html自身缓存周期要短：建议Cache-Control: public, max-age=600（10 分钟），避免它成为更新瓶颈
要不要建 /public 或 /static 目录
不强制。Vite、Zero Server、甚至原生 file:// 协议都支持直接访问同级资源。你完全可以把 main.jsx、style.css、logo.svg 放一起，只要 HTML 入口能明确访问就行。
真正关键的是“入口边界”意识：所有页面必须通过一个确定的 URL 加载（如 https://example.com/index.html），而不是靠文件系统路径猜。
- 若用前端路由（如 React Router 的
BrowserRouter），服务端必须配置 fallback，否则直接访问/about会 404 - 多个 HTML 页面（如漫画站的
comic-001.html、comic-002.html）可行，但每次翻页都是全量重载，导航栏、CSS、JS 全部重解析——体验断层明显 - 如果追求无缝翻页，应转向纯前端动态加载方案：用一个
reader.html+ JS 控制 DOM 替换内容，只更新主体区域，保留头部/脚部/样式上下文
最易被忽略的一点：路径管理不是纯技术问题，它是部署流程的镜像。你写的每个 ../、每个哈希、每个 index.html 的缓存策略，最终都要和服务端配置、CI/CD 发布脚本对齐。差一环，缓存就废一半。
