原生HTML不支持模块化，可通过JavaScript动态加载、服务器端包含（SSI）、构建工具或服务端语言实现复用。1. JavaScript使用fetch将header/footer.html插入页面；2. SSI在.shtml文件中通过嵌入内容；3. 构建工具如Vite或Webpack配合插件预处理标签；4. PHP等后端语言用实现模板包含。选择方案需根据项目类型：静态网站可用JS，现代开发推荐构建工具，动态站点宜用服务端技术，核心目标是减少重复代码、提升维护性。
在HTML开发中，如果想把公共部分如 header 和 footer 保存为可复用的模板，原生HTML本身不支持模块化引入，但可以通过几种实用方法实现复用。以下是常见的实现方式。
1. 使用JavaScript动态加载（简单实用）
通过JavaScript读取外部HTML文件并插入到页面中，适合静态网站或小型项目。
创建公共模板文件：
header.html footer.html
示例：header.html 内容
在主页面中使用 JavaScript 加载：
立即学习“前端免费学习笔记（深入）”；
fetch('header.html') .then(response => response.text()) .then(data => { document.getElementById('header').innerHTML = data; });
同理加载 footer.html 到对应 div 中。
2. 使用服务器端包含（SSI）
如果你的服务器支持 SSI（Server Side Includes），可以在 Apache 或 Nginx 环境下使用。
启用 SSI 后，HTML 文件需改为 .shtml 扩展名：
Axiom
Axiom是一个浏览器扩展，用于自动化重复任务和web抓取。
163 查看详情
页面内容
服务器会自动将 header 和 footer 内容嵌入页面，适合传统静态部署场景。
3. 使用构建工具（推荐现代开发）
在现代前端开发中，使用 Webpack、Vite 或 HTML Includes 插件可以预处理模板。
例如使用 gulp-html-inject 或 posthtml-include：
内容区
构建时这些标签会被替换为实际内容，输出标准HTML文件，适合生成静态站点。
4. 使用PHP等服务端语言（最灵活）
如果你使用 PHP，可以直接用 include 实现模板复用。
index.php 示例：
页面主体
这种方式在动态网站中非常常见，部署需支持PHP环境。
基本上就这些常用方法。选择哪种取决于你的项目类型和技术栈。静态页可用JS加载，开发项目建议用构建工具，有后台可直接用服务端包含。关键是避免重复代码，提升维护效率。
以上就是html如何存为模板_HTML页面（header/footer）存为可复用模板方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/909281.html
微信扫一扫 
支付宝扫一扫 
