大型网站必须拆分HTML文件：纯静态MPA需按模块拆为多页并统一管理公共结构；SPA则用index.html作壳，由React/Vue等框架接管路由与渲染。
大型网站不能靠一个 index.html 硬撑，否则路由刷新、状态丢失、SEO 拉胯、改个页头要手动修二十个文件——这不是开发，是受刑。
用多页结构（MPA）还是单页结构（SPA）？
判断依据不是“哪个新”，而是谁在接管视图逻辑：
- 有 React/Vue/Angular 等框架，且路由由 JS 控制 → 用 SPA，
index.html做壳，所有页面渲染交给框架 - 纯静态、无构建流程、后端只吐 HTML → 必须走多页（MPA），按业务拆成
dashboard.html、profile.html、settings.html等独立文件 - 混合场景（如部分页面 SSR，部分纯静态）→ 拆页 + 统一模板层，避免脚本/样式路径错乱
常见错误：Uncaught ReferenceError: $ is not defined 只出现在某个子页？大概率是那个 HTML 漏引了 jquery.js，而你根本没意识到有十几个 HTML 文件各自管理 <script> 标签。
如何让所有页面共享页头、导航、页脚？
硬编码复制粘贴是维护地狱的起点。三种可行路径：
立即学习“前端免费学习笔记（深入）”；
- 服务端 includes：PHP 用
include 'header.php'，Node.js 用 EJS/Nunjucks 的<% include('header') %> - 构建时注入：Eleventy、Hugo、Harp 等静态生成器支持 layout 模板，HTML 片段存
_includes/header.html，自动套用 - 客户端动态加载（纯静态兜底方案）：写
js/nav-loader.js，内含const navHTML = `<nav><a href="index.html">首页</a></nav>`，每页放<div id="nav-container"></div>，再执行document.getElementById('nav-container').innerHTML = navHTML
注意：客户端方案需确保 nav-loader.js 在 DOM 就绪后执行，且不要依赖 DOMContentLoaded 外部监听——直接放在 </body> 前最稳。
资源路径怎么写才不 404？
GET /css/style.css 404 表面是路径错，根因常是开发与部署环境不一致：
- 开发时双击打开
file://，./css/style.css能读；上线进 Nginx 的/app/子目录，请求变成/app/css/style.css，但文件实际在/app/dist/css/style.css - 相对路径（
./、../）依赖当前 HTML 所在位置，换目录就崩；绝对路径（/css/style.css）依赖服务端 root 配置，换部署路径就得改代码 - 推荐方案：统一用根相对路径（
/css/style.css），并在 Nginx/Apache 中配置root /path/to/dist;，确保 URL 路径与磁盘路径对齐 - 若必须支持子目录部署（如 GitHub Pages 的
username.github.io/repo/），则用<base href="/repo/">，之后所有相对路径都基于此解析
模块化 HTML 片段怎么组织才可持续？
把重复结构抽成独立文件只是第一步，关键是怎么加载、怎么传参、怎么避免冲突：
- 物理存放：建
components/目录，放navbar.html、card.html、footer.html，不混在pages/里 - 加载方式：构建工具优先（Webpack + html-loader、Eleventy includes）；纯静态可配合
fetch()+insertAdjacentHTML()，但要处理加载失败 fallback - 参数传递：别用全局变量，改用
data-属性，例如<div data-module="carousel" data-config='{"autoplay": true, "delay": 5000}'></div>，JS 按需读取初始化 - 样式隔离：Web Components 是原生解法，但兼容性要求高；更现实的是用 BEM 命名 + scoped CSS（如
.card--profile）避免跨模块污染
最容易被忽略的一点：所有页面的 <title>、<meta name="description">、<link rel="canonical"> 必须差异化，不能全从模板继承同一份——SEO 死角往往藏在这里。
