可复用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 = '

标签： css javascript java html js git apache github nginx seo 浏览器