div 是无语义的通用容器，适用于无现成语义标签但需统一控制样式的场景，如广告位、js 动态区域、flex/grid 布局父容器及模态框外壳；不应替代 nav、article、aside 等语义标签。
div 不是布局工具，也不是语义标签——它只是个“没名字的盒子”。你看到的所有三栏、居中、响应式效果，全靠 CSS 驱动；而它真正该出场的地方，恰恰是那些没有现成语义标签可套、又需要统一控制样式或行为的场景。
需要包裹无语义但需统一控制的区块
比如广告位、第三方嵌入组件（如客服小窗、统计脚本容器）、JS 动态渲染区域。这些内容本身不构成文档结构，也不属于 header、article 或 aside 的语义范畴，用 div 最自然。
- 别硬套
section包一个纯 JS 控制的轮播图容器——它不是文档章节，只是个操作单元 - 避免给
div加role="banner"来冒充header，读屏软件不会买账 - 如果只是想加个背景色+内边距把几段文字框起来，
div比造个新语义标签更轻量
作为 Flex 或 Grid 布局的容器节点
现代布局几乎都靠 display: flex 或 display: grid 实现，而它们必须作用在某个父容器上。这个容器往往就是 div —— 因为它不带预设语义，也不会干扰 ARIA 解析或搜索引擎理解。
- 父级
div必须显式设置display: flex或display: grid，否则子元素不会按 flex/grid 规则排列 - 子级
div无需额外声明，只要在容器内，默认就是 flex item 或 grid item - 混用
float或position: absolute会让子项脱离布局流，调试时容易漏掉这个冲突点
构建模态框、折叠面板等交互组件外壳
这类组件的核心需求是：动态显示/隐藏、叠加层级（z-index）、遮罩层、焦点管理。它们和文档结构无关，而是 UI 行为层的存在，div 是最干净的载体。
- 模态框外层用
div class="modal-overlay"，内层用div class="modal"，比塞进section更合理 - 折叠面板的触发区和内容区共用一个父
div，方便 JS 统一控制aria-expanded和hidden - 不要用
div套div十层来模拟嵌套菜单——DOM 深度增加会拖慢 JS 查询和重排
真正容易被忽略的不是怎么用 div，而是什么时候不该用：导航就该用 nav，文章主体优先用 article 或直接 h1+p，侧边栏内容多是 aside。用 div 省事一时，但语义缺失会在可访问性测试、SEO 抓取、甚至团队协作维护时集中爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
