如何在纯 HTML 网站中动态插入复用的页眉与页脚

雨涛同学_8288

发布时间：2026-07-01 09:04:37

733人浏览过

来源于php中文网

原创

如何在纯 HTML 网站中动态插入复用的页眉与页脚

本文介绍一种无需服务器端语言（如 PHP）或构建工具，仅使用原生 JavaScript 和 HTML 实现页眉/页脚模块化复用的方法，适用于 .html 后缀静态站点，兼容现代浏览器。

本文介绍一种无需服务器端语言（如 php）或构建工具，仅使用原生 javascript 和 html 实现页眉/页脚模块化复用的方法，适用于 `.html` 后缀静态站点，兼容现代浏览器。

在开发多页面静态网站（如影院管理系统）时，保持页眉（header）和页脚（footer）结构一致且易于维护至关重要。但由于 HTML 原生不支持文件包含（include），而 <link rel="import"> 已被废弃、PHP 又要求 .php 扩展名，纯前端方案需依赖 JavaScript 动态加载——这是当前最轻量、兼容性良好且无需构建流程的解决方案。

✅ 推荐方案：Fetch + DOM 注入（现代原生 JS）

核心思路：将页眉内容单独保存为 header.html（纯 HTML 片段，不含 <html>/<body> 标签），再通过 fetch() 获取其文本内容，并注入到指定容器中。

1. 创建可复用的页眉文件（header.html）

<!-- header.html —— 仅包含语义化片段，无DOCTYPE或根标签 -->
<nav class="navigation-open">
  <div class="global container grid-x">
    <div class="logowrapper grid-x">
      <div class="logo-container">
        <a href="index.html">
          <img class="logo" src="../img/logo.png" alt="Cate Cinema Logo">
        </a>
      </div>
    </div>
    <div class="dashboard-nav cell grid-x">
      <nav class="choicewrapper">
        <ul class="wrapper">
          <li class="page-cinema">
            <a href="cinema.html" class="gradient-fill-hover">
              <span>A</span><span>l</span><span> </span><span>C</span><span>i</span><span>n</span><span>e</span><span>m</span><span>a</span>
            </a>
          </li>
          <!-- 其他导航项... -->
        </ul>
      </nav>
    </div>
    <nav class="loginwrapper grid-x cell align-right">
      <!-- 登录区域... -->
    </nav>
  </div>
</nav>

⚠️ 注意事项：

anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

header.html 必须是纯 HTML 片段（无 <html>、<head>、<body>），否则会破坏主文档结构；

路径需相对主页面（如 ../header/header.html），建议统一存放于 /includes/ 目录下便于管理；

所有内部链接（如 href="cinema.html"）应使用相对路径，确保跨页面一致性。

2. 在每个 HTML 页面中注入页眉

在目标页面（如 index.html）的 <body> 内合适位置添加占位符，并在末尾引入加载逻辑：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cate Cinema</title>
  <!-- 所有 CSS 链接（字体、样式表等） -->
</head>
<body>
  <!-- 页眉占位符（推荐放在 body 开头） -->
  <div id="header-placeholder"></div>

  <!-- 主要内容 -->
  <main id="content">
    <h1>Welcome to Cate Cinema</h1>
    <!-- 页面具体内容 -->
  </main>

  <!-- 页脚占位符（可选） -->
  <div id="footer-placeholder"></div>

  <!-- 动态加载脚本（置于 body 底部，确保 DOM 已就绪） -->
  <script>
    // 加载页眉
    fetch('../includes/header.html')
      .then(res => {
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
        return res.text();
      })
      .then(html => {
        document.getElementById('header-placeholder').innerHTML = html;
      })
      .catch(err => console.error('Failed to load header:', err));

    // （同理可扩展 footer 加载）
    // fetch('../includes/footer.html')
    //   .then(res => res.text())
    //   .then(html => document.getElementById('footer-placeholder').innerHTML = html);
  </script>
</body>
</html>