使用服务器端包含、JavaScript动态加载、构建工具或后端模板引擎可实现HTML公共部分复用，提升开发效率与维护性，具体选择取决于项目规模和技术栈。
网页开发中，多个页面常包含相同的结构部分，比如头部（header）和底部（footer）。重复编写这些代码不仅效率低，还增加维护成本。将公共HTML部分提取并复用，是提升开发效率和项目可维护性的关键做法。以下是几种实用的提取与复用方法。
1. 使用服务器端包含（SSI）
适用于使用Apache等支持SSI的服务器。通过在HTML中插入特殊指令，动态引入外部文件。
操作步骤：
- 将公共头部保存为 header.html，底部保存为 footer.html。
- 主页面使用SSI语法引入：
页面内容
- 确保服务器配置启用SSI，文件扩展名通常为 .shtml。
2. 利用JavaScript动态加载
前端通过AJAX或fetch请求加载公共部分，适合静态站点或无法使用后端语言的场景。
立即学习“前端免费学习笔记（深入）”；
实现方式：
- 创建 header.html 和 footer.html 文件，仅包含对应结构。
- 在主页面中预留容器：
主体内容
- 使用JavaScript异步加载并插入：
.then(response => response.text())
.then(data => document.getElementById('header').innerHTML = data);
可将加载逻辑封装成函数，在多个页面调用。
3. 借助构建工具（如Webpack、Gulp）
在现代前端工程化流程中，使用构建工具预处理HTML片段。
常用方案：
- 使用 gulp-file-include 插件：
内容区
- 构建时自动合并文件，输出完整HTML。
- 适合配合自动化部署流程使用。
4. 使用后端模板引擎
若项目使用Node.js、PHP、Python等后端语言，推荐使用模板引擎。
示例（使用EJS）：
页面主体
- 其他常见引擎：Pug、Handlebars、Twig（PHP）、Jinja2（Python）等。
- 服务端渲染，SEO友好，结构清晰。
基本上就这些。选择哪种方式取决于项目规模和技术栈。小项目可用JS加载或SSI，中大型项目建议使用构建工具或模板引擎，保证结构清晰和维护性。关键是把公共部分独立出来，避免重复代码。
