如何提取公共html_HTML公共部分（header/footer）提取与复用方法

使用服务器端包含、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异步加载并插入：

可将加载逻辑封装成函数，在多个页面调用。

公文宝

AI公文写作神器，一键生成合规材料

403

查看详情

3. 借助构建工具（如Webpack、Gulp）

在现代前端工程化流程中，使用构建工具预处理HTML片段。

常用方案：

• 使用 gulp-file-include 插件：

• 构建时自动合并文件，输出完整HTML。
• 适合配合自动化部署流程使用。

4. 使用后端模板引擎

若项目使用Node.js、PHP、Python等后端语言，推荐使用模板引擎。

示例（使用EJS）：

• 其他常见引擎：Pug、Handlebars、Twig（PHP）、Jinja2（Python）等。
• 服务端渲染，SEO友好，结构清晰。

基本上就这些。选择哪种方式取决于项目规模和技术栈。小项目可用JS加载或SSI，中大型项目建议使用构建工具或模板引擎，保证结构清晰和维护性。关键是把公共部分独立出来，避免重复代码。

以上就是如何提取公共html_HTML公共部分（header/footer）提取与复用方法的详细内容，更多请关注php中文网其它相关文章！