可复用HTML模板有五种方法：一、服务端包含（SSI）；二、JavaScript动态加载；三、Web Components自定义元素；四、构建工具（如EJS+Webpack）预编译；五、iframe嵌入。
如果您希望在多个网页中重复使用相同的HTML结构，避免每次手动编写重复代码，则需要创建可复用的HTML模板文件。以下是实现该目标的多种方法：
一、使用HTML原生的include机制（需服务端支持）
部分服务器环境（如Apache配合SSI模块或Nginx配置SSI）允许通过服务器端包含指令将公共片段嵌入HTML文件中。此方式无需额外构建工具，直接由服务器解析并合并内容。
1、确保Web服务器已启用SSI功能，并将文件扩展名设为.shtml。
2、在主HTML文件中插入如下语句：。
立即学习“前端免费学习笔记（深入）”；
3、将页眉、导航栏等内容保存为独立的header.html文件，与主文件位于同一目录下。
4、访问该.shtml文件时，服务器会自动将header.html的内容注入到对应位置。
二、利用JavaScript动态加载HTML片段
通过fetch API读取外部HTML文件内容，并将其插入到指定DOM容器中。适用于静态托管环境（如GitHub Pages、Netlify），无需服务端配置。
1、创建一个nav.html文件，仅包含导航栏的HTML代码，例如
。
2、在主HTML文件的底部添加一个空容器：
。
3、添加内联或外部JavaScript代码，执行fetch请求：fetch(‘nav.html’).then(r => r.text()).then(html => document.getElementById(‘nav-placeholder’).innerHTML = html)。
4、确保浏览器同源策略允许加载该HTML文件，且路径正确无拼写错误。
三、采用Web Components自定义元素封装
使用Custom Elements API定义可复用的HTML标签，将结构、样式和行为封装为独立组件，支持跨项目复用且不依赖构建工具。
1、在HTML文件中注册自定义元素：customElements.define(‘site-header’, class extends HTMLElement { connectedCallback() { this.innerHTML = ‘
我的网站
‘; } });。
2、在页面任意位置使用该标签：。
3、如需外部HTML内容，可在connectedCallback中调用fetch加载对应文件并注入。
4、将该注册逻辑保存为components.js，在所有页面中统一引入。
四、借助构建工具生成静态模板（如HTMLWebpackPlugin + EJS）
在开发阶段使用模板引擎预编译HTML，将公共部分抽象为变量或partial，最终输出纯静态HTML文件，适合需要SEO优化且部署至CDN的场景。
1、初始化Webpack项目并安装html-webpack-plugin和ejs-loader。
2、创建template.ejs文件，在其中使用引入复用片段。
3、配置插件选项，指定template: './src/template.ejs'作为入口模板。
4、运行webpack命令后，生成的index.html将自动包含所有被引用的partial内容。
五、使用iframe嵌入固定结构区域
将页脚、侧边栏等变化极少的模块保存为独立HTML文件，通过iframe嵌入主页面。虽存在样式隔离和SEO限制，但实现最简单且完全兼容旧浏览器。
1、创建footer.html，仅包含
。
2、在主页面中插入：。
3、为iframe容器设置CSS样式，确保其高度适配内容，必要时启用sandbox属性增强安全性。
4、注意移动端需添加scrolling="no"并配合overflow: hidden防止双滚动条出现。
以上就是如何写html模板_编写可复用的HTML模板文件【复用】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607189.html
微信扫一扫 
支付宝扫一扫 
