div是无语义的通用容器，仅用于样式、脚本或布局；当内容无独立主题、无标题、不可单独引用时才应选用，否则优先使用section、article等语义标签。
div 不是语义标签，它本身不表达“头部”“导航”或“文章”这类含义，只表示一个通用块级容器。用它划分区域完全可行，但关键在于：**是否真需要它？有没有更合适的替代方案？**
什么时候该用 div 而不是 section、article 或 nav
当你只是为样式或脚本操作服务，且内容没有独立主题、不可被单独引用、也不具备明确结构意义时，div 才是合理选择。
- 比如一个用于包裹浮动子元素的“clearfix 容器”，内部只有几个
float: left的卡片 —— 没有标题、不构成完整语义单元，用div就对了 - 又比如一个通过 JavaScript 动态插入内容的挂载点：
<div id="app"></div>，这里纯属技术占位，section反而会误导辅助技术 - 再比如你正在写一个 CSS Grid 布局容器：
<div class="grid-layout">...</div>，它只是网格父容器，不承载语义，也不需要被搜索引擎或屏幕阅读器识别为“一节内容”
div 必须配 class 或 id 才有意义
单独写 <div>内容</div> 几乎没用 —— 它不会带来任何样式、交互或可访问性提升。浏览器只把它当一个默认块级换行符处理。
-
class用于复用样式或 JS 选择，例如<div class="card">、<div class="sidebar"> -
id用于唯一锚点或 JS 获取，例如<div id="modal-root">，但一个页面中不能重复出现相同id - 避免用
div+id="header"代替<header>—— 后者自带语义和默认 ARIA role，前者得手动补role="banner"才算达标
嵌套 div 容易导致“divitis”（过度嵌套）
常见错误是层层套 div 来实现 margin/padding/背景等效果，结果 HTML 结构臃肿、可维护性差、无障碍支持弱。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<div class="wrapper"><div class="inner"><div class="content">文本</div></div></div>—— 大概率可以简化为单个<div class="content">配合 CSS padding/margin - 检查每个
div：它是否承担了明确职责？能否被伪元素::before/::after、CSS 容器查询或现代布局属性（如gap、inset）替代？ - 用浏览器开发者工具选中元素时，如果看到连续 3 层以上无 class/id 的
div，基本就是冗余结构
响应式与布局中 div 的实际定位方式
纯靠 div 无法完成现代布局，必须配合 CSS。常见组合有：
- Flex 容器：
<div class="nav-menu" style="display: flex; gap: 1rem;"></div>—— 子项自动水平排列，div只是载体 - Grid 容器：
<div class="dashboard" style="display: grid; grid-template-columns: 200px 1fr;"></div>—— 划分左右两栏，div提供上下文 - 清除浮动（已过时但仍有遗留）：
<div style="clear: both;"></div>应替换为overflow: hidden或display: flow-root等更现代方案
真正容易被忽略的是：**div 自身没有布局能力，它的行为完全由 CSS 决定；写一堆 div 却不写对应样式，等于只画了格子没填内容。**
