div 与 span - HTML 教程

讲解

<div> 和 <span> 是 HTML 里仅有的两个「没有任何语义」的元素，存在的意义就是当容器：<div> 是块级容器，用来把一组元素框成一个整体，方便统一布局和样式；<span> 是行内容器，用来圈住一句话里的几个字，单独加样式或挂钩子。它们不改变内容含义，浏览器对它们的默认样式几乎为零——你看到的一切效果都来自 CSS。

使用它们的时机遵循一条原则：先找语义元素，实在没有合适的再用 div/span。页面主体该用 main 就别用 div id="main"；强调文字该用 strong 就别用 span class="bold"。但现实中大量场景确实没有语义对应——比如为了布局需要把两张卡片包进一个横向容器、给一句话里的价格换个颜色、给图标字体套一层方便定位的壳——这些就是 div/span 的本职。

真正需要警惕的是「div 汤」（div soup）：打开一些网站的源码，几十层 div 套 div，没有一个语义标签，class 名也随意（div1、box2、left3）。这种页面机器读不懂、人维护不动。健康的做法是：语义元素搭骨架，div/span 只做纯样式容器，class 命名表达用途（如 class="card-list"、class="price"），让结构在不看 CSS 的情况下也能读懂。

示例

<!-- div：纯布局容器，class 说明用途 -->
<div class="card-list">
  <div class="card">
    <h3>便携音箱</h3>
    <p>
      限时价
      <!-- span：圈住行内片段单独加样式 -->
      <span class="price">¥199</span>
      <del>¥299</del>
    </p>
  </div>
</div>

配套的 CSS 让它们真正发挥作用：

.card-list {
  display: flex;
  gap: 16px;
}
.price {
  color: #e64545;
  font-weight: 700;
  font-size: 1.25em;
}

注意 div/span 只是「挂样式的钩子」，语义信息（标题用 h3、删除价用 del）仍然由语义元素承担。

常见坑

通篇 div/span 替代语义标签：div 汤让 SEO、无障碍、可维护性三输。每次想写 div，先问一遍「有没有语义元素能表达它」。
给 span 设置宽高不生效：span 是行内元素，宽高、上下 margin 默认不生效；需要盒模型控制时用 div，或给 span 设 display: inline-block。
class 命名无意义：a1、box、left 这类名字换个版式就名不副实。按用途命名（price、card-list），不按外观命名（red、big）。
滥用空 div 做分隔：需要间距用 CSS margin，需要分隔线先看 hr 是否合适，空的 div 是结构噪音。

小结

div 是块级通用容器，span 是行内通用容器，都只用于没有语义对应的场景；class 按用途命名，语义永远优先于容器。下一章学习所有元素都能使用的全局属性。