div不能替代语义标签，因其无内置语义，而header/nav/main等标签自带隐式aria角色与结构含义，对seo、读屏器和浏览器解析至关重要；仅当纯视觉分组且无逻辑语义时才应使用div。
div 标签本身不参与文档结构语义表达，它只是个无含义的块级容器；想靠它“构建结构”，必须配合 class、id 或 ARIA 属性赋予上下文，否则对 SEO、读屏器、浏览器解析都毫无帮助。
div 为什么不能替代 header/nav/main/section
浏览器和辅助技术只认语义标签的含义，div 对它们来说就是“一段没名字的盒子”。比如一个导航区域写成 <div class="nav">，读屏软件不会播报“导航栏”，而 <code><nav></nav> 会明确告知用户这是可跳转的导航区块。
- 搜索引擎更倾向抓取
<article></article>、<section></section>内容，div包裹的内容默认权重更低 -
header、footer等标签自带隐式 ARIA role，div需手动加role="banner"才等效 - HTML5 规范明确建议：有语义标签可用时，不要用
div模拟
什么时候必须用 div，而不是语义标签
当内容纯粹是视觉分组、无逻辑语义，且无法映射到任何 HTML5 语义元素时，div 才是合理选择。
- 轮播图外层容器（内部包含图片、按钮、指示器，整体无统一语义）
- 卡片阴影层或 border-radius 包裹层（仅为视觉修饰，不改变内容层级）
- JS 动态插入 DOM 的临时挂载点，如
<div id="root"></div> - Grid/Flex 布局中仅作容器、不承载语义的父级（如
<div class="grid-container">） <h3>div 嵌套过深时怎么快速定位问题</h3> <p>常见现象是空白高度异常、点击区域错位、CSS 选择器失效——根本原因往往是父级 <code>div没设 height 或 overflow，导致子元素脱离预期流。- 用浏览器开发者工具选中目标
div，看 computed 样式里height和overflow是否为auto或visible - 检查父级是否漏写了
display: flex或display: grid，导致子项未被识别为 flex/grid item - 避免写
<div><div><div><div> 这类纯嵌套，优先用语义标签 + 单层 <code>div作样式钩子，例如：<article><div class="article-inner"> <h3>div 在 Flex/Grid 布局中最容易漏的关键声明</h3> <p>很多人给 <code>div加了justify-content却没生效，不是属性写错，而是忘了容器本身没激活布局模式。- Flex 容器必须显式设
display: flex或display: inline-flex，否则所有 flex 属性无效 - Grid 容器至少要定义
grid-template-columns或grid-template-rows，哪怕只写1fr - 子
div若是span或其他 inline 元素，需先设display: block才能响应 flex/grid 排列 -
flex-wrap: wrap默认是nowrap，内容超宽时直接溢出，不是自动折行
真正难的不是怎么写
div，而是判断该不该写——每次敲下<div> 之前，先问一句：这个区块在语义上有没有更准确的标签可选？如果答案是肯定的，就别用 <code>div。 - Flex 容器必须显式设
- 用浏览器开发者工具选中目标
