HTML页面可拆分为多个独立可复用部分，方式包括：一、iframe嵌入；二、已废弃的HTML Imports；三、服务端包含（SSI）；四、JavaScript动态加载；五、Web Components自定义元素。

如果您希望将一个完整的HTML页面拆分为多个独立的、可复用的部分，通常是为了提升代码可维护性、实现模块化开发或适配不同设备与场景。以下是实现HTML页面分割的多种具体方式：

一、使用嵌入外部HTML文件

允许在当前页面中嵌入另一个HTML文档，实现视觉与结构上的物理分割，各部分可独立加载与更新。

1、创建一个独立的HTML文件，例如header.html，内容仅包含页眉结构。

2、在主页面中插入。

3、为确保语义正确与无障碍访问，需为添加title属性，例如title="网站顶部导航"。

4、通过CSS设置iframe的border: none和vertical-align: top，消除默认边框与基线对齐偏移。

二、利用HTML Imports（已废弃，但需知其历史路径）

该机制曾用于通过导入外部HTML片段，但已被现代浏览器弃用，不建议在新项目中使用。

1、编写一个sidebar.html，仅含

侧边栏内容

。

2、在主页面中写入。

3、通过JavaScript读取导入内容：var link = document.querySelector('link[rel="import"]'); var content = link.import.querySelector('aside');。

4、将content追加至目标容器：document.getElementById('sidebar-container').appendChild(content.cloneNode(true));。

三、服务端包含（SSI）分割

在支持SSI的Web服务器（如Apache启用mod_include）中，可通过注释指令动态拼接HTML片段，分割逻辑发生在服务端。

1、将页脚保存为footer.shtml，内容为

。

2、在主HTML文件中启用SSI解析（需以.shtml为扩展名），插入。

3、确保服务器配置中AddType text/html .shtml与Options +Includes已启用。

4、访问时服务器自动将footer.shtml内容注入到注释位置，客户端仅接收合并后的完整HTML。

四、前端JavaScript动态加载

通过fetch或XMLHttpRequest异步获取HTML片段并注入DOM，实现运行时逻辑分割，适用于单页应用或按需加载场景。

1、创建nav-menu.html，仅包含

。

2、在主页面底部添加作为挂载点。

3、编写脚本：fetch('nav-menu.html').then(r => r.text()).then(html => document.getElementById('nav-container').innerHTML = html);。

4、为避免渲染阻塞，将脚本置于末尾，并添加try...catch处理加载失败，显示加载失败，请刷新重试提示。

五、使用Web Components自定义元素

通过customElements.define()注册可复用的封装组件，将结构、样式与行为打包为独立HTML单元，实现真正意义上的语义化分割。

1、新建my-header.js，内含class MyHeader extends HTMLElement { connectedCallback() { this.innerHTML = '

我的站点

'; } }。

2、在主页面引入：。

3、在HTML中直接使用：。

4、组件内可调用this.attachShadow({mode: 'open'})封装样式，确保内部CSS不会污染全局作用域。