html无法原生include公共文件，需依赖外部机制：前端可用fetch动态加载纯html片段，构建时可用工具预处理内联，服务端可配置ssi或php包含；三者在运行环境、seo和工程化程度上各有适用场景。
HTML 中无法原生 include 公共文件
浏览器加载单个 .html 文件时，不会自动解析或执行类似 include 的服务端指令。所谓“每个 HTML 包含同一个文件”，本质是**需要外部机制介入**——不是 HTML 自己能干的事。
用 <script></script> 动态加载 HTML 片段最直接
适合页脚、导航栏这类纯结构复用，且不依赖服务端环境。核心思路：用 JavaScript 抓取公共 HTML 文件内容，再插入到指定容器里。
- 必须用
fetch或XMLHttpRequest加载，不能靠<script src="xxx.html"></script>—— 浏览器会把它当 JS 解析，报SyntaxError - 目标文件（如
header.html）只能是纯 HTML 片段，不能含、等顶层标签，否则插入后结构错乱 - 需在 DOM 加载完成后操作，否则
document.getElementById找不到容器；推荐放在底部或用DOMContentLoaded - 示例：
<div id="nav-placeholder"></div> <script> fetch('nav.html') .then(r => r.text()) .then(html => document.getElementById('nav-placeholder').innerHTML = html); </script>
构建时用工具预处理（推荐用于生产）
开发阶段写一个 header.html，发布前自动拼进所有页面——这才是真正“包含”的做法，没有运行时请求、无跨域、SEO 友好。
- 静态站点生成器（如
Hugo、Jekyll）天然支持 partials / includes，配置include指令即可 - 前端构建工具：Webpack 配
html-webpack-plugin+html-loader，或 Vite 配vite-plugin-html，都能在打包时内联 - 简易替代：用 Node.js 脚本读取
index.html，用正则或cheerio替换<!-- include:header.html -->占位符，适合小项目 - 注意路径：构建工具里的相对路径，通常以入口 HTML 为基准，不是以被 include 文件为基准
服务端 include（仅限有服务端权限时）
如果你控制着 Web 服务器（比如 Nginx、Apache）或后端语言（PHP、Node.js），这是最干净的方案——HTML 文件本身保持原样，由服务端实时组装。
立即学习“前端免费学习笔记（深入）”；
- Apache 启用
mod_include后，可写<!--#include file="footer.html" -->，但要求文件扩展名是.shtml，且服务器必须配置允许 - Nginx 不原生支持 SSI，需用
ngx_http_ssi_module并开启ssi on，同样只对.shtml生效 - PHP 最简单：
<?php include 'header.php'; ?>，但所有页面得改成.php后缀，哪怕没其他 PHP 逻辑 - 关键限制：本地双击打开
file://协议下的 HTML，SSI 和 PHP 都不工作——必须走 HTTP 服务
最容易被忽略的是：动态加载（fetch 方案）会导致搜索引擎爬虫看到空容器，除非你额外做 SSR 或 prerender；而构建时处理和服务器 include 是真·静态输出，内容从一开始就在 HTML 源码里。选哪种，其实取决于你有没有构建流程、能不能改服务器配置、以及是否在意首屏 SEO。
