HTML模板拆分核心是保障语义结构与维护性，而非视觉整洁；必须用语义化标签替代div硬编码，严格遵循DOM契约，并通过构建时内联或服务端包含实现模块化，同时控制DOM深度、密度及data属性设计以支撑可扩展性。
HTML 模板拆分不是为了“看起来整洁”，而是为了不让修改页脚时意外破坏导航的语义结构、不让新增模块时被迫全局搜索 class="container"。
用 <header> <nav> <main> 替代 <div class="header"> 等硬编码容器
语义标签不是“锦上添花”，是 DOM 的契约。浏览器、辅助技术、CSS 选择器、JS 查询都依赖它做上下文推断。
-
<main>只能出现一次，且必须包裹页面核心内容；嵌套在里面的<section>表示主题性分组（比如“用户评论区”），不是视觉容器 -
<nav>只放导航链接，混入<button>或登录状态文本会破坏语义，这类交互应移入<header>或独立<section> -
<aside>必须与邻近的<article>或<section>相关（如博客旁的“延伸阅读”），全站广告位不该塞进这里 - 多个
<header>可以存在（每个<article>自带一个），但别为“样式统一”把所有标题包进一个顶层<header>—— 会丢失内容粒度
构建时合并 HTML 片段，而非运行时 fetch() 注入
前端动态 fetch('header.html').then(...) 写法看着轻量，实际带来首屏白屏、CSP 阻断、SSR 不友好、SEO 抓取失败三重风险。
- Webpack 场景：用
html-webpack-plugin+html-loader，通过require('./header.html')引入片段，构建时内联，无额外请求 - 服务端场景：Nginx/Apache 启用 SSI，写
<!--#include file="footer.html" -->，由服务器拼接，零 JS 依赖 - 所有注入点必须有唯一标识，如
data-role="header-slot"，防止 JS 初始化时错绑事件 - 禁用
<iframe>做常规模块拆分——它创建独立 DOM 和 JS 上下文，CSS 隔离、事件穿透全是坑
控制 DOM 深度与子节点密度，避免隐式性能陷阱
DOM 树太深（>5 层嵌套）或单个容器子元素太多（>50 个），会拖慢 CSS 选择器匹配和 JS 查询，尤其在动态渲染长列表时。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Elements → 右键节点 → “Show DOM Tree Size”，重点关注
<div id="list-container">这类高密度父节点 - 把
<div><div><div><p>改成直接<p>，用 CSS 控制内边距和布局，而非靠 div 堆叠占位 - 对长列表，优先用
DocumentFragment批量插入，或用IntersectionObserver分页加载，而不是一次性吐出全部 DOM - 避免
<section>套<section>超过两层——第三层开始，该抽成独立组件或用<nav>明确角色
用 data- 属性预留扩展钩子，别硬编码 class 名
硬编码 class="btn" 让后续叠加暗色模式、A/B 测试、埋点等变得脆弱——改一处就得全局搜，还容易漏。
- 给按钮加
data-role="primary-cta"，而不是依赖class="btn btn-primary"做逻辑判断 - 用
data-theme="dark"控制整体风格，CSS 里写[data-theme="dark"] .text { color: #fff; }，不污染 class 名体系 - 所有
data-属性值应语义明确、可枚举，避免自由字符串（如data-id="123abc"），方便后续 JS 查询与条件渲染 - 预留钩子不是“提前设计所有功能”，而是让新增功能能无侵入接入，比如加个打印按钮，只需识别
data-printable，不用动原有 HTML 结构
真正难的不是怎么拆，而是谁来维护拆分边界——比如 <main> 里该不该允许嵌套 <article>，<section> 的标题是否必须有 <h2>。这些规则一旦松动，碎片就变泥潭。
