原生HTML不支持模块化，可通过JavaScript动态加载、服务器端包含（SSI）、构建工具或服务端语言实现复用。1. JavaScript使用fetch将header/footer.html插入页面；2. SSI在.shtml文件中通过嵌入内容；3. 构建工具如Vite或Webpack配合插件预处理标签；4. PHP等后端语言用实现模板包含。选择方案需根据项目类型：静态网站可用JS，现代开发推荐构建工具，动态站点宜用服务端技术，核心目标是减少重复代码、提升维护性。
在HTML开发中，如果想把公共部分如 header 和 footer 保存为可复用的模板，原生HTML本身不支持模块化引入，但可以通过几种实用方法实现复用。以下是常见的实现方式。
创建公共模板文件：
示例：header.html 内容
<header>
<nav>
<a href="/">首页</a>
<a href="/about">关于我们</a>
</nav>
</header>在主页面中使用 JavaScript 加载：
立即学习“前端免费学习笔记（深入）”；
<div id="header"></div>
<script>
fetch('header.html')
.then(response => response.text())
.then(data => {
document.getElementById('header').innerHTML = data;
});
</script>同理加载 footer.html 到对应 div 中。
启用 SSI 后，HTML 文件需改为 .shtml 扩展名：
特色介绍： 1、ASP+XML+XSLT开发，代码、界面、样式全分离，可快速开发 2、支持语言包，支持多模板，ASP文件中无任何HTML or 中文 3、无限级分类，无限级菜单，自由排序 4、自定义版头（用于不规则页面） 5、自动查找无用的上传文件与空目录，并有回收站，可删除、还原、永久删除 6、增强的Cache管理，可单独管理单个Cache 7、以内存和XML做为Cache，兼顾性能与消耗 8、
0
<!--#include file="header.html" --> <main>页面内容</main> <!--#include file="footer.html" -->
服务器会自动将 header 和 footer 内容嵌入页面，适合传统静态部署场景。
例如使用 gulp-html-inject 或 posthtml-include：
<include src="partials/header.html"></include> <main>内容区</main> <include src="partials/footer.html"></include>
构建时这些标签会被替换为实际内容，输出标准HTML文件，适合生成静态站点。
index.php 示例：
<?php include 'header.php'; ?> <main>页面主体</main> <?php include 'footer.php'; ?>
这种方式在动态网站中非常常见，部署需支持PHP环境。
基本上就这些常用方法。选择哪种取决于你的项目类型和技术栈。静态页可用JS加载，开发项目建议用构建工具，有后台可直接用服务端包含。关键是避免重复代码，提升维护效率。
以上就是html如何存为模板_HTML页面（header/footer）存为可复用模板方法的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
581
收藏
取消收藏
