需遵循语义化布局与模块解耦原则：一、用语义化class的div搭建HTML5框架；二、将公共模块存为独立HTML片段；三、用fetch动态加载模板；四、用SSI服务端包含；五、用template元素克隆复用。
如果您希望使用 HTML5 标准结构，通过 div 元素搭建页面基础框架，并将头部、导航、侧边栏、主内容区、页脚等公共模块抽象为可复用的模板文件，则需遵循语义化布局与模块解耦原则。以下是实现该目标的具体方法：
一、基于语义化 div 的 HTML5 框架结构搭建
此方法不依赖任何构建工具或框架，纯手工编写符合 HTML5 规范的结构化 div 布局，确保各区域命名清晰、层级合理，便于后续提取为独立模板片段。所有模块均使用具有明确含义的 class 名称，避免语义模糊的命名如 box、wrap 等。
1、新建一个空白 HTML 文件，声明 HTML5 文档类型：<!DOCTYPE html>。
2、在 <body> 内按顺序添加五个核心 div 区域，分别赋予 class：header、nav、aside、main、footer。
立即学习“前端免费学习笔记（深入）”；
3、为每个 div 添加简短示意性文本内容，例如在 header 中写“网站标题”，在 nav 中写“首页 | 关于 | 联系”，在 main 中写“主内容区域”。
4、为每个 class 编写基础 CSS 样式，设置最小高度、边框及内边距，用于视觉区分模块边界。
二、将公共模块保存为独立 HTML 片段文件
此方法将重复使用的结构（如导航栏、页脚）从主页面中剥离，单独保存为 .html 后缀的片段文件，便于在多个页面中通过服务器端包含或前端加载方式复用，提升维护效率。
1、创建新文件，命名为 header.html，仅包含完整语义化 header 结构及其内部元素，不包含 <html>、<body> 或 <head> 标签。
2、同理创建 nav.html、footer.html 两个文件，每个文件只保留对应模块的 div 及其子元素。
3、确保所有片段文件保存在同一项目目录下的 /templates/ 子目录中，路径统一且无空格或中文字符。
4、在主页面中预留占位 div，例如 <div id="header-placeholder"></div>，并为每个占位符添加唯一 data-template 属性，值为对应片段文件名。
三、使用原生 JavaScript 动态加载模板片段
此方法利用 fetch API 在页面加载完成后异步获取外部 HTML 片段内容，并注入到指定容器中，无需后端支持即可实现模块复用，适用于静态站点或轻量级项目。
1、在主页面 <body> 底部添加 <script> 标签，定义一个 loadTemplate 函数，接收文件路径和目标容器 ID 作为参数。
2、在函数内部调用 fetch(path)，检查响应状态是否为 ok，再使用 response.text() 获取 HTML 字符串。
3、获取成功后，使用 document.getElementById(containerId).innerHTML = htmlContent 将内容写入对应容器。
4、依次调用 loadTemplate('/templates/header.html', 'header-placeholder')、loadTemplate('/templates/nav.html', 'nav-placeholder') 等完成全部模块加载。
四、使用 Server-Side Includes（SSI）服务端包含
此方法要求 Web 服务器启用 SSI 功能，通过注释语法在 HTML 中直接引用外部文件，由服务器在响应前自动合并内容，生成最终 HTML 输出，对浏览器完全透明且性能高效。
1、确认 Apache 或 Nginx 已启用 SSI 支持，Apache 需开启 includes 模块并在配置中设置 Options +Includes 和 AddType text/html .shtml。
2、将主页面扩展名改为 .shtml，例如 index.shtml。
3、在需要插入公共模块的位置，写入标准 SSI 语法：<!--#include file="/templates/header.html" -->。
4、确保被包含的 header.html、footer.html 等文件路径相对于当前 .shtml 文件所在目录正确，且权限允许读取。
五、使用 HTML Template 元素配合 cloneNode 实现客户端模板复用
此方法利用 HTML5 原生 <template> 标签定义不可渲染的模板内容，在运行时通过 JavaScript 克隆并插入 DOM，适合需要多次实例化同一结构（如列表项、卡片组件）的场景。
1、在主页面 <head> 或 <body> 顶部添加 <template id="header-template">，内部嵌套完整的 header 结构代码。
2、同理添加 <template id="nav-template"> 和 <template id="footer-template">，每个 template 标签内仅含对应模块的 div 及其子节点。
3、编写初始化脚本，获取 template 元素，调用 content.cloneNode(true) 创建深度克隆副本。
4、使用 document.body.insertBefore(clonedNode, document.querySelector('header')) 等方式，将克隆后的节点插入到预设位置。
