div 是块级容器，独占一行，天然适合做布局骨架：头部、侧边、卡片、弹窗都由 div 承载。span 是行内容器，不会换行，适合给一段文字中的某几个字单独加样式，比如高亮关键词、标红报错信息。它们本身没有任何默认样式，存在的唯一意义就是作为 CSS 与 JavaScript 的挂钩，负责分组而不是表达含义。
正因为没有语义，div 和 span 被称为语义中性标签，也最容易滥用。页面里如果全是 div，搜索引擎和读屏软件都无法理解结构——这种毛病叫 divitis（div 滥发症）。正确做法是优先用语义标签（header、nav、main、article、em、strong 等），只有当没有任何语义标签贴合时，才退而使用 div 或 span。
<style> .box { border: 1px solid #4a9eff; border-radius: 8px; padding: 10px; } .box h4 { margin: 0 0 6px; } .hl { background: #ffe9a8; padding: 0 3px; border-radius: 3px; } .warn { color: #e74c3c; font-weight: bold; } </style> <div class="box"> <h4>div 是块级容器，用来搭建卡片骨架</h4> <p>这句话里有 <span class="hl">高亮关键词</span>， 还有 <span class="warn">红色报错</span>。</p> </div>