MPA中HTML文件必须放根目录或统一pages/下，所有链接用根相对路径（如/pages/contact.html），避免本地双击404；pages/不嵌套子目录，公共结构用构建工具注入，资源引用均以/开头，归档页命名语义化且路径扁平。
多页应用（MPA）下 HTML 文件怎么放才不翻车
HTML 静态项目用多页，就别硬套单页那套“路由注册”逻辑——index.html必须在根目录，pages/about.html这种路径是安全且可预测的，但前提是所有内部链接用根相对路径。
常见错误是写 <a href="pages/contact.html">，本地双击打开时浏览器会按文件系统路径解析，变成 file:///.../pages/pages/contact.html，直接 404；正确写法是 <a href="/pages/contact.html">，以域名根为基准，无论页面在哪都能命中。
-
pages/目录只放业务 HTML，不嵌套子目录（如pages/blog/post-1.html容易让路径计算失控） - 公共结构（header、footer）别重复写，用构建工具或服务端包含注入，否则改一处要同步 20 个文件
- 所有
<link>、<script>、<img>的src或href必须以/开头，例如/css/main.css、/js/utils.js
data-action 映射后端路由时怎么避免硬编码
前端 <button data-action="user.delete"> 和后端 DELETE /api/v1/users/:id 之间不该靠文档对齐，而应靠一张映射表驱动——但这张表不能写死在代码里，更不能每个按钮都配 data-route。
映射表本质是语义到路径+方法的转换规则，加载时机比内容更重要：必须在路由中间件初始化前完成读取，否则请求进来时查不到条目，直接 fallback 或 404。
立即学习“前端免费学习笔记（深入）”；
- 映射表支持通配符参数（如
:id），但透传给路由匹配器，不是字符串替换——user.delete→{ path: "/api/v1/users/:id", method: "DELETE" } -
data-method可覆盖映射表默认值，适合灰度或临时绕过：<button data-action="user.delete" data-method="POST"> - 上线前清理所有
data-route="/debug/xxx"类型的显式路径，它们绕过映射逻辑，是维护隐患
静态资源缓存与 HTML 页面更新不同步怎么办
用户刷新页面看不到新内容？大概率是 HTML 被强缓存了，而 CSS/JS 已更新——浏览器按 Cache-Control 策略决定是否发请求，HTML 默认可能缓存数小时甚至数天。
解决思路不是关缓存，而是让 HTML 缓存时间短（比如 max-age=60），其他资源缓存长（max-age=31536000），再配合文件内容哈希命名（如 main.a1b2c3.css）彻底切断旧资源引用。
- 服务器需对
.html响应头设Cache-Control: public, max-age=60，确保每次访问都校验最新版 -
.css、.js、图片等资源启用长期缓存，但文件名含内容哈希（构建工具自动处理） - 避免手动改
main.css内容却不改 HTML 中的引用路径——这是纯静态项目最隐蔽的“更新失效”来源
归档类页面（如漫画列表、博客目录）怎么保持链接稳定
25 个漫画页全放 /comics/ 下，命名用 comic-001.html、comic-025.html，不是为了排序好看，而是让新增页面时无需改任何导航逻辑——URL 结构固定，archive.html 里用静态 <a href="/comics/comic-025.html"> 即可。
这种方案比 JS 动态渲染归档列表更可靠：没有构建依赖、不卡首屏、不怕 JS 失败白屏，且搜索引擎能直接抓取全部链接。
- 归档页本身也放
/archive.html，别塞进/pages/或/comics/archive.html——路径越浅，链接越稳 - 每页
<link rel="prev"/>和<link rel="next"/>指向相邻文件，辅助爬虫和键盘导航 - 如果后期想升级 SPA，保留这些 HTML 文件仍可作为 fallback，不用推倒重来
../”去救火。 
