使用服务器端包含、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异步加载并插入：fetch(‘header.html’)
.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，中大型项目建议使用构建工具或模板引擎，保证结构清晰和维护性。关键是把公共部分独立出来，避免重复代码。
以上就是如何提取公共html_HTML公共部分（header/footer）提取与复用方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590359.html
微信扫一扫 
支付宝扫一扫 
