HTML静态页面复用头部底部需前端动态加载：推荐fetch+innerHTML方案，将header/footer抽为独立HTML文件并注入预留容器；注意路径基准、动态内容用data-*占位、样式作用域隔离。
HTML 静态页面本身不支持服务端包含（如 PHP 的 include），所以要复用头部和底部，必须借助前端手段实现“逻辑拆分+运行时组装”。核心思路是：把 header 和 footer 抽成独立 HTML 文件，再在每个页面中动态加载并注入对应位置。方法虽多，但只有少数几种真正实用、兼容性好、维护成本低。
推荐用 fetch + innerHTML（现代轻量方案）
不用 jQuery，原生 JavaScript 即可完成，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2022）：
- 新建
header.html和footer.html，只写纯结构，**不要包含<html><head><body>标签**，例如：<header class="site-header"><img src="logo.svg" alt="Logo"><nav><a href="/home">首页</a></nav></header> - 主页面中预留容器：
<header id="js-header"></header><main>...内容...</main><footer id="js-footer"></footer> - 页面底部加脚本（确保 DOM 已加载）：
<script>fetch('components/header.html').then(r => r.text()).then(html => document.getElementById('js-header').innerHTML = html);fetch('components/footer.html').then(r => r.text()).then(html => document.getElementById('js-footer').innerHTML = html);</script> - 注意：图片、CSS 路径按**主页面所在路径**计算，不是 header.html 的路径；若部署在子目录，建议用相对根路径（
/assets/logo.png）或 CSS 中统一管理图标
兼容老项目：jQuery load()（需注意跨域限制）
如果项目已引入 jQuery，.load() 最简洁，但有明确约束：
- 必须通过 HTTP(S) 协议访问（不能双击打开
file://），否则 Chrome/Firefox 会因跨域拒绝加载 - 公共文件中禁止出现
<script>标签（会执行但上下文丢失，易报ReferenceError）；交互逻辑应移至主页面统一初始化 - 示例：
<div id="header"></div><div id="footer"></div><script>$('#header').load('common/header.html');$('#footer').load('common/footer.html');</script> - 若 header 中含用户昵称等动态内容，需改用占位符（如
<span data-user-name></span>），再用 JS 单独填充
简单可靠但语义稍弱：iframe 嵌入
适合对 SEO 要求不高、内容完全静态、且需严格隔离样式/脚本的场景：
立即学习“前端免费学习笔记（深入）”；
- 直接嵌入：
<iframe src="header.html" title="网站顶部导航" width="100%" height="60" frameborder="0" style="border: none; vertical-align: top;"></iframe> - 必须加
title属性以满足无障碍要求 - CSS 中重置 body 默认 margin/padding：
body { margin: 0; padding: 0; }，否则 iframe 内外留白不一致 - 缺点：SEO 友好性差、无法继承父页面样式、移动端高度自适应麻烦（需 postMessage 或 JS 动态调整）
避免踩坑的关键细节
无论选哪种方式，以下三点直接影响能否长期稳定维护：
-
路径一致性：所有资源（图片、CSS、JS）引用路径，均以主页面为基准。header.html 里写
img/logo.png，意味着该图必须位于主页面同级的img/目录下 -
动态内容解耦：用户名、未读数、登录状态等，不能硬编码在 header.html 里。应使用
data-*占位符（如<span data-user-name></span>），由主页面 JS 统一注入 -
样式隔离与复位：header/footer 的 CSS 应限定作用域（如加前缀
.header-*），或用 CSS Scoped（若构建工具支持）；避免全局h1{...}影响主内容区
