HTML可扩展性靠语义分层、作用域隔离与动态注入点：用<main><section><article>划定逻辑边界，避免冗余<div>；通过模板注入复用结构；控制DOM深度与节点密度；用data-属性预留配置钩子。
HTML结构可扩展，不靠堆 <div>，而靠语义分层 + 作用域隔离 + 动态注入点。
用 <main>、<section>、<article> 划定逻辑边界
硬编码一堆 <div class="container"> 是最常见也最危险的起点——它让后续任何新增模块都得猜“这个 div 是干啥的”。语义标签不是装饰，是 DOM 的契约：浏览器、辅助技术、CSS 选择器、JS 查询都依赖它做上下文推断。
-
<main>只能出现一次，且必须包裹页面核心内容；嵌套在<main>里的<section>表示主题性分组（比如“用户评论区”“相关推荐”），不是视觉容器 -
<article>用于可独立分发的内容单元（如博客条目、卡片式新闻），它自带隐式节标题层级，影响<h1>–<h6>的语义嵌套逻辑 - 避免
<section>套<section>超过两层——第三层开始，应考虑是否该抽成独立组件或用<aside>/<nav>明确角色
把重复结构抽象成可复用的 HTML 片段注入点
当多个页面共用头部、侧边栏或页脚时，不要复制粘贴 HTML 块。直接写死会带来三类问题：改一处漏十处、diff 时无法识别语义变更、无法按需加载。
- 服务端场景：用
include_once()（PHP）或<template>+fetch()（前端）加载片段，确保每次注入都是同一份源 - 构建时场景：用 Webpack 的
html-webpack-plugin配合html-loader引入.html片段，避免运行时请求开销 - 关键约束：所有注入点必须有唯一
id或data-role属性（如data-role="header-slot"），防止 JS 初始化时错绑事件
控制 DOM 深度与子节点密度
DOM 树太深（>5 层嵌套）或单个容器子元素太多（>50 个），会显著拖慢 CSS 选择器匹配和 JS 查询性能，尤其在动态渲染大量列表时。
立即学习“前端免费学习笔记（深入）”；
- 检查工具：Chrome DevTools → Elements → 右键节点 → “Show DOM Tree Size”，重点关注
<div id="list-container">这类高密度父节点 - 拆解策略：对长列表，用
DocumentFragment批量插入，或按视口分页（IntersectionObserver触发加载） - 嵌套简化：把
<div><div><div><p>改成<article class="card"><p>，用 CSS 控制内边距和布局，而非靠 div 堆叠占位
预留 data- 属性作为扩展钩子
HTML 不是静态快照，而是运行时状态的载体。硬编码 class 名或内联样式会让后续功能叠加变得脆弱——比如加个暗色模式，就得全局搜 class="btn" 并补上 dark:btn-dark。
- 为交互区域统一加
data-component="tabs"、data-config='{"mode":"accordion"}'，JS 初始化时读取，而不是靠 class 名字约定 - 避免用
data-id存业务主键（易泄露），改用data-ref指向内部标识符（如data-ref="pricing-card-2"） - 所有自定义
data-属性值建议 JSON 序列化，方便 JS 直接JSON.parse(el.dataset.config)，减少字符串解析错误
真正卡住可扩展性的，往往不是语法能力，而是初始结构没给后续留出“呼吸空间”：一个没命名的 <div>、一段没声明用途的 class、一个没预留配置入口的模块——它们不会报错，但会让下一次改动的成本翻倍。
