HTML模块化有五种方法：一、已废弃的HTML Imports；二、服务器端包含（SSI）；三、JavaScript动态加载；四、构建工具与模板引擎；五、Web Components与template元素。
如果您希望将HTML代码组织为可复用、易维护的独立单元，则需要通过外部引用、嵌入机制或构建工具实现结构分离。以下是实现HTML模块化的具体方法：
一、使用HTML Imports（已废弃但需了解历史方案）
HTML Imports曾是W3C提出的原生模块化方案，允许通过link标签引入外部HTML文件，从而复用头部、侧边栏等片段。尽管现代浏览器已移除支持，但在遗留项目或Polyfill环境中仍可能遇到。
1、在主HTML文件的
中添加导入语句：。2、通过JavaScript读取导入内容：const header = document.querySelector('link[rel="import"]').import;。
立即学习“前端免费学习笔记（深入）”；
3、将导入的DOM节点插入目标容器：document.getElementById('header-container').appendChild(header.querySelector('header').cloneNode(true));。
二、采用服务器端包含（SSI）
SSI是一种由Web服务器在响应前动态拼接HTML片段的技术，适用于Apache或Nginx启用SSI模块的环境，无需客户端JavaScript参与。
1、确保服务器配置启用SSI，例如Apache中启用include模块并设置Options +Includes。
2、将公共模块保存为独立文件，如footer.html，内容仅包含片段：。
3、在主HTML中插入SSI指令：，文件扩展名需为.shtml或服务器配置支持的类型。
三、利用JavaScript动态加载HTML片段
通过fetch API获取外部HTML文件内容，并注入到指定DOM容器中，适用于静态站点或轻量级前端项目，不依赖构建流程。
1、在HTML中预留挂载点：。
2、编写异步加载脚本：fetch('nav.html').then(r => r.text()).then(html => document.getElementById('navigation').innerHTML = html);。
3、将脚本置于页面底部或使用DOMContentLoaded事件确保DOM就绪后再执行。
四、使用构建工具与模板引擎（如Webpack + HTML Webpack Plugin）
在开发阶段将HTML拆分为多个.html或.ejs模板文件，通过构建流程合并输出单一HTML，适合中大型项目，支持变量注入与条件渲染。
1、安装html-webpack-plugin和html-loader：npm install --save-dev html-webpack-plugin html-loader。
2、在Webpack配置中设置loader规则，使require('./header.html')可被识别为字符串资源。
3、在入口HTML中使用ES6模板字面量或插件提供的templateParameters注入模块：。
五、采用现代HTML标准：原生Web Components与<template></template>元素
利用<template></template>定义可复用结构，结合Custom Elements API注册自定义标签，在运行时实例化模块，完全遵循Web标准且无构建依赖。
1、在HTML中声明模板：
2、定义自定义元素类：class HtmlCard extends HTMLElement { connectedCallback() { this.innerHTML = document.getElementById('card-template').content.cloneNode(true); } }。
3、注册并使用该元素：customElements.define('html-card', HtmlCard);，随后可在任意位置写<html-card><span slot="title">标题</span>正文</html-card>。
