HTML 教程 / 什么时候使用 div 和 span？

div 和 span 用于对内容进行分组，但不赋予其特殊意义。当 CSS 或 JavaScript 需要一个目标且没有更具体的 HTML 元素描述内容时使用它们。div 通常用于分组较大的部分；span 分组句子中的一部分。

div 和 span 有何不同？

一个 div 可以包含流内容，如段落、列表或整个卡片。一个 span 适用于文本和其他所谓的短语内容，位于文本段落内。两者本身都不表示标题、按钮或重要性等特定语义。默认情况下，div 是块级元素，span 是内联元素，但 CSS 可以改变它们的显示。应根据内容的结构选择，而不仅仅是外观。如果内容承担页面区域的特定职责，请先按使用语义元素组织页面中的标准选择元素。

不要在span中放置段落或div。如果您的唯一目的只是换行，请首先决定您是否需要一个新段落或更改CSS布局，而不是使用其他容器。

只将需要样式的内容分组

将此HTML放入文档的body中，并将CSS放入其head中的style中。

<div class="product-card">
  <h2>旅行杯</h2>
  <p>价格： <span class="price">15 $</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}

.price {
  color: #075cb4;
  font-weight: 700;
}

整个卡片会获得一个边框，而只有价格会改变颜色和字体粗细。属性 class 为 CSS 提供了一个可选择的名称。即使没有 CSS，产品名称仍然是标题，价格仍然在段落中显示。如果价格没有变蓝，请检查 HTML 中的 class="price" 是否与 CSS 中的 .price 匹配。点表示类选择器；它不是 HTML 类名的一部分。

优先选择具有合适语义的元素

对于主导航，请选择 nav 而不是通用的 div。对于独立文章，请考虑 article。对于用户可以执行的操作，请使用 button，而不是创建可点击的 span。正确的原生元素已经传达了含义，并且通常提供键盘行为。不同按钮类型的行为可参阅使用 textarea、select、option 和 button中的说明。

在此示例中，价格不需要特殊的数据处理，因此 span 就足够了。您可以保留一个 CSS 类，同时稍后用一个更有意义的元素替换它。选择合适的元素时，请查看 MDN 的 HTML 元素列表。

将允许的内容与 CSS 显示分开

流内容是一个类别，用于页面的内容流，包括段落、列表和部分。短语内容在文本段落中使用，例如文本、强调、链接和图像。div 对流内容进行分组；span 对短语内容进行分组。这些类别与 CSS 的行内容规则不同。

<!-- 不合规：一个段落在span中 -->
<span class="card"><p>产品描述</p></span>

<!-- 一个可以包含段落的容器 -->
<div class="card"><p>产品描述</p></div>

即使设置 span { display: block; }，也不能使 span 内嵌套段落成为有效的 HTML。请分别比较这些片段，然后在修正后的容器上保持相同的 CSS 类。请从内容模型中选择一个元素，而不是简单地更改标签以隐藏视觉问题。

在 MDN 上的 span 参考 · 在 MDN 上的 div 参考

常见错误

不要仅用 div 构建所有页面区域以方便添加样式，也不要给容器赋予与内容不符的语义元素。一个样式化的 span 并不会因为看起来像而自动成为标题或按钮。从内容和交互开始，只在必要的地方添加通用容器。