HTML如何制作可复用的header和footer

大家好，今天本人给大家带来文章《HTML页面如何制作可复用的header和footer模板》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

原生HTML不支持模块化，可通过JavaScript动态加载、服务器端包含（SSI）、构建工具或服务端语言实现复用。1. JavaScript使用fetch将header/footer.html插入页面；2. SSI在.shtml文件中通过嵌入内容；3. 构建工具如Vite或Webpack配合插件预处理标签；4. PHP等后端语言用实现模板包含。选择方案需根据项目类型：静态网站可用JS，现代开发推荐构建工具，动态站点宜用服务端技术，核心目标是减少重复代码、提升维护性。

在HTML开发中，如果想把公共部分如 header 和 footer 保存为可复用的模板，原生HTML本身不支持模块化引入，但可以通过几种实用方法实现复用。以下是常见的实现方式。

1. 使用JavaScript动态加载（简单实用）

创建公共模板文件：

• header.html
• 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 中。

2. 使用服务器端包含（SSI）

启用 SSI 后，HTML 文件需改为 .shtml 扩展名：

<!--#include file="header.html" -->
<main>页面内容</main>
<!--#include file="footer.html" -->

服务器会自动将 header 和 footer 内容嵌入页面，适合传统静态部署场景。

3. 使用构建工具（推荐现代开发）

例如使用 gulp-html-inject 或 posthtml-include：

<include src="partials/header.html"></include>
<main>内容区</main>
<include src="partials/footer.html"></include>

构建时这些标签会被替换为实际内容，输出标准HTML文件，适合生成静态站点。

4. 使用PHP等服务端语言（最灵活）

index.php 示例：

<?php include 'header.php'; ?>
<main>页面主体</main>
<?php include 'footer.php'; ?>

这种方式在动态网站中非常常见，部署需支持PHP环境。

基本上就这些常用方法。选择哪种取决于你的项目类型和技术栈。静态页可用JS加载，开发项目建议用构建工具，有后台可直接用服务端包含。关键是避免重复代码，提升维护效率。

以上就是《HTML如何制作可复用的header和footer》的详细内容，更多关于html代码的资料请关注golang学习网公众号！