MPA本质是多个独立HTML文件的集合，靠相对路径链接跳转、共享CSS/JS资源、统一目录结构来维持一致性；禁用frameset、避免锚点模拟路由，严格管理路径并手动设置导航高亮。
直接说结论：MPA（多页应用）不是“怎么做”，而是“怎么组织”——它本质是多个独立 HTML 文件的集合，靠链接跳转、共享资源、统一结构来维持一致性。别被“应用”二字带偏，它不依赖框架，也不需要路由系统。
用标准 HTML 文件 + 相对路径做页面跳转
这是最轻量、最可靠、兼容性最好的方式。每个页面都是真实存在的 index.html、about.html、contact.html，彼此通过 <a href="about.html"> 连接。
- 所有链接必须用相对路径（如
./pages/services.html或../about.html），避免硬编码域名或协议 - 根目录放
index.html，其他页面按功能分目录（如/pages/、/blog/），保持 URL 可读且利于后期部署 - 不要在
href里写#section模拟跳转——那是 SPA 的做法，MPA 里这会导致刷新失败或锚点失效 - 检查每个页面的
<title>和<h1>是否唯一，否则 SEO 和可访问性会出问题
用外部 CSS/JS 统一控制样式与行为
MPA 的维护成本高，主要来自重复代码。解决方法不是合并页面，而是抽离公共资源。
- CSS 文件统一放在
/css/style.css，所有页面都用<link rel="stylesheet" href="/css/style.css">引入（注意是根路径/css/，不是./css/） - JS 行为逻辑（比如导航高亮、表单提交）写进
/js/main.js，并在每个页面<body>底部用<script src="/js/main.js"></script>加载 - 导航栏如果完全一致，可用服务器端包含（SSI）或构建时模板（如 EJS、Hugo）注入，但纯静态环境就老实用复制粘贴+人工校验
- 避免在 JS 中用
window.location.pathname动态加 class 做当前页高亮——容易因路径大小写、尾部斜杠、查询参数出错；更稳的方式是每个页面手动加class="active"
别碰 <frameset> 和过时的框架方案
<frameset> 在 HTML5 中已被废弃，现代浏览器虽仍解析，但存在硬伤：URL 不同步、前进后退异常、SEO 几乎归零、移动端完全不可用。
立即学习“前端免费学习笔记（深入）”；
- 看到
<frameset cols="200,*">或<frame src="nav.html">就该删掉重写 -
<iframe>可以用，但只限局部嵌入（如评论区、地图、第三方工具），不能用来搭整站骨架——它造成 DOM 隔离、事件穿透困难、打印和缩放体验差 - 所谓“框架页面”在 2026 年已无实际工程价值，除非你明确要支持 IE6 或某款定制内嵌浏览器
真正容易被忽略的是路径管理：一个页面里 href="about.html" 在根目录能用，在 /pages/ 下就会 404；而 href="/about.html" 又可能在本地双击打开时失效（file:// 协议下根路径指向磁盘根）。所以实际项目中，要么全用相对路径并严格约定目录层级，要么上简易构建脚本自动补全路径——手工硬调，三天就崩溃。
