企业官网HTML页面必须按变更频率和复用范围切分为独立模块，推荐构建工具（如Vite/webpack插件）或ES Module动态加载；禁用SSI、iframe、正则替换等高风险方案。
企业官网 HTML 页面不是一整块硬编码，而是必须按功能切分成可独立维护的模块，否则改个导航就要通篇找 、换轮播图就得翻 200 行 JS、加个联系方式还得手动复制到每个页面——这种写法半年后连自己都不敢动。
用 include 或服务端模板？别在纯 HTML 里硬扛
纯静态 HTML 文件不支持原生 include（ 是 SSI 语法，需服务器开启且配置支持，Nginx 默认关，Apache 也常禁用）。强行启用不仅部署受限，本地双击打开直接失效，调试成本陡增。
实操建议：
- 开发阶段用构建工具：推荐
vite-plugin-html（Vite）或html-webpack-plugin+html-loader（Webpack），把header.html、footer.html当作片段引入，打包时自动合并 - 小项目可接受「伪模块」：用 VS Code 的
emeraldwalk.runonsave插件 + 自定义 shell 脚本，在保存header.html时自动替换所有页面中的注释块 - 拒绝手写正则替换：有人用 Notepad++ 批量替换
.*?，但一旦嵌套注释或格式换行就崩，极易漏改
iframe 做模块？只适合孤立内容，别碰导航和 SEO
用 看似简单，但实际埋雷：
- 导航栏里的链接点击后，目标页会在 iframe 内打开，导致整个官网“缩在框里”，URL 不变、无法分享、前进后退失效
- 搜索引擎几乎不索引 iframe 内容，
nav.html里的菜单文字等于对 SEO 透明 - 移动端 iframe 宽度错位、滚动冲突频发，iOS Safari 对
iframe的height:100%支持尤其差 - 唯一可用场景：嵌入第三方客服 widget、地图或独立表单，且确认其源站允许跨域加载
现代轻量方案：ES Module 动态加载 HTML 片段
不用框架、不依赖构建工具，也能在纯 HTML 中实现模块化加载，核心是利用 fetch() + insertAdjacentHTML()：
<script type="module">
async function loadFragment(url) {
const res = await fetch(url);
if (res.ok) {
document.getElementById('header').insertAdjacentHTML('beforeend', await res.text());
}
}
loadFragment('/fragments/header.html');
</script>
注意点：
- 必须用
type="module"，否则await在脚本中无效；fetch路径需同源，不能跨域 -
header.html只放纯 HTML 片段，不要含、或<script></script>标签，否则会污染主页面结构 - 首屏渲染会有一小段空白（FOUC），需配合 CSS
opacity:0+ JS 加载完成再设为 1 来缓解 - SEO 友好性取决于你是否服务端渲染（SSR）：纯客户端加载的模块，爬虫看到的是空容器
真正要盯死的三个模块边界
企业官网模块划分不是按视觉区块，而是按「变更频率」和「复用范围」定界：
-
header和nav必须合一：Logo、主导航、搜索框、语言切换——这些极少改动，且全站统一，合并在一个文件里，避免多处同步出错 -
footer拆成两层：上层（版权信息、备案号）全站固定；下层（快捷链接、社交媒体图标）按频道不同，用数据驱动（如 JSON 配置）而非硬编码 - 「联系我们」等页面级模块，不要做成全局模块：这类内容每页不同，应由页面自身控制，通过
data-fragment="contact"属性触发对应加载逻辑，而非塞进 footer
模块化的本质不是让代码看起来整齐，而是让每次修改的影响范围可控——改一个电话号码，不该牵扯到产品列表的 DOM 结构。
