可复用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代码，例如<nav><ul><li><a href="/">首页</a></li></ul></nav>。

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 = '

冰舟分类信息系统

冰舟分类信息系统说明:本次更新修改了部分错误，增加了自定义标签管理，这个版本后所有页面均可调用一个标签，大大的提升了效率使用前请先 运行 install.asp 文件进行安装程序！！安装时请填写好 ACCESS文件目录以及ACCESS文件名，请确保填写的信息与FTP上的完全吻合，否则会出错！！安装玩后请，务必删除 install.asp 文件！ 本2.1版本含有强大的模板编辑功能，且初始模板均为D

0

查看详情

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，仅包含<footer><p>© 2024</p></footer>。

2、在主页面中插入：。

3、为iframe容器设置CSS样式，确保其高度适配内容，必要时启用sandbox属性增强安全性。

4、注意移动端需添加scrolling="no"并配合overflow: hidden防止双滚动条出现。

以上就是如何写html模板_编写可复用的HTML模板文件【复用】的详细内容，更多请关注php中文网其它相关文章！