HTML 中的 span 和 div 标签有什么区别

如果你使用浏览器的开发者工具检查网页，你可能会看到一堆嵌套的 div 标签，并且可能会看到一些包含在 span 标签中的内容。

相似的内容被包含在这两个容器元素——span 和 div 中。你可以将它们都用作容器，但它们的工作方式并不完全相同。

在本教程中，我将向你展示 span 和 div 之间的区别，以便你在必须同时使用两者时不会混淆。

span 和 div 标签之间的主要区别

如果你想让网页的特定部分与众不同，并对其进行不同的样式设置，则可以同时使用 span 和 div 标签作为容器。但同样，它们的用途并不完全相同。

HTML div 标签

div 标签是一个通用的块级元素，用于将更大的网页块关联和组合在一起——通常是一个部分，如页眉、页脚、页面主体等。

在下面的示例中，我将网页的标题与 div 标签组合在一起，并使用 CSS 对其进行了样式设置。

<div class="header">
      <h2 class="logo">freeCodeCamp</h2>

      <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Serices</a></li>
        <li><a href="">Contact</a></li>
      </ul>
</div>

在下面的 CSS 中，我使用 CSS Flexbox 在其中布置了标题和导航栏。我还删除了浏览器分配给元素的默认边距和填充。

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.header {
      padding: 0 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
      color: crimson;
    }

.nav {
      display: flex;
      align-content: center;
      justify-content: center;
      gap: 60px;
      list-style-type: none;
    }

.nav li a {
      text-decoration: none;
      font-size: 1.2rem;
      color: crimson;
    }

此外，你可以使用 div 标签将相似的内容组合在一起。这可能是类似的文本、图像、视频等。你可以将一个 div 嵌套在另一个 div 中，并为它们附加唯一的类或 id 属性，这样你就不会感到困惑。

The HTML span 标签

span 标签是一个内联元素，你可以使用它来使一小部分内容在 CSS 或 JavaScript 中突出显示。除非你完全了解自己在做什么，否则不应嵌套 span ——但你可以在块级元素中放置多个 span 标签。

在下面的示例中，我通过将 span 标签包裹在它们周围并以不同的方式设置它们的样式，使一些特定的单词突出显示。

<p>
      This is a <span class="crimson">crimson text</span> within black texts.
      This is an <span class="indigo">indigo text</span> within others, and this
      is an <span class="orange">orange text</span> within other texts.
</p>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    height: 100vh;
  }

p {
    font-size: 2.5rem;
  }

.font-style {
    font-style: italic;
  }

.crimson {
    color: crimson;
  }

.indigo {
    color: indigo;
  }

.orange {
    color: orange;
  }

你可以在下表中看到 span 和 div 标签之间最重要的区别：

什么时候使用 span 或 div

当你想要以不同的方式设置内容的特定部分的样式或使用 JavaScript 对其进行操作时，你应该使用 span。你还可以将其用作内联元素的容器。

另一方面，如果要将大块内容组合在一起，以及要在网页上布局元素，则应使用 div 标签。

总结

在本教程中，你了解了 span 和 div 标签之间的区别。

这些标签有助于样式和布局。请记住，HTML5 引入了语义元素，例如 section header、nav、footer 等。所以，一般来说，只有当语义元素不适合你想要做的事情时，你才应该使用 span 或 div。

感谢你阅读本文，祝你编码愉快！

原文：Span VS Div HTML Tags – What is the Difference，作者：Kolade Chris