html模板拆分核心是保障语义结构与维护性，而非视觉整洁；必须用语义化标签替代div硬编码，严格遵循dom契约，并通过构建时内联或服务端包含实现模块化，同时控制dom深度、密度及data属性设计以支撑可扩展性。
HTML 模板拆分不是为了“看起来整洁”，而是为了不让修改页脚时意外破坏导航的语义结构、不让新增模块时被迫全局搜索 class="container"。
用 <header></header> <nav></nav> <main></main> 替代 <div class="header"> 等硬编码容器
<p>语义标签不是“锦上添花”，是 DOM 的契约。浏览器、辅助技术、CSS 选择器、JS 查询都依赖它做上下文推断。</p>
<ul>
<li>
<code><main></main> 只能出现一次，且必须包裹页面核心内容；嵌套在里面的 <section></section> 表示主题性分组（比如“用户评论区”），不是视觉容器
<nav></nav> 只放导航链接，混入 <button></button> 或登录状态文本会破坏语义，这类交互应移入 <header></header> 或独立 <section></section>
<aside></aside> 必须与邻近的 <article></article> 或 <section></section> 相关（如博客旁的“延伸阅读”），全站广告位不该塞进这里<header></header> 可以存在（每个 <article></article> 自带一个），但别为“样式统一”把所有标题包进一个顶层 <header></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></iframe>做常规模块拆分——它创建独立 DOM 和 JS 上下文，CSS 隔离、事件穿透全是坑
控制 DOM 深度与子节点密度，避免隐式性能陷阱
DOM 树太深（>5 层嵌套）或单个容器子元素太多（>50 个），会拖慢 CSS 选择器匹配和 JS 查询，尤其在动态渲染长列表时。
- Chrome DevTools → Elements → 右键节点 → “Show DOM Tree Size”，重点关注
<div id="list-container"> 这类高密度父节点 <li>把 <code><div><div><div> <p> 改成直接 <code><p></p>，用 CSS 控制内边距和布局，而非靠 div 堆叠占位 - 对长列表，优先用
DocumentFragment批量插入，或用IntersectionObserver分页加载，而不是一次性吐出全部 DOM - 避免
<section></section>套<section></section>超过两层——第三层开始，该抽成独立组件或用<nav></nav>明确角色 - 给按钮加
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 结构
用 data- 属性预留扩展钩子，别硬编码 class 名
硬编码 class="btn" 让后续叠加暗色模式、A/B 测试、埋点等变得脆弱——改一处就得全局搜，还容易漏。
真正难的不是怎么拆，而是谁来维护拆分边界——比如 <main></main> 里该不该允许嵌套 <article></article>，<section></section> 的标题是否必须有 <h2></h2>。这些规则一旦松动，碎片就变泥潭。
