Span和Div HTML标签的区别

如果你用浏览器的开发工具检查一个网页，你可能会看到一堆嵌套的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属性，这样你就不会感到困惑了。

HTMLspan 标签

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 标签
内联级元素	块级元素
用于对小块文本进行分组	用于将大块的文字组合在一起
不得嵌套以避免混淆	通常是嵌套的

什么时候应该使用span 或div ？

当你想对内容的某一部分进行不同的样式设计或用JavaScript进行操作时，你应该使用span 。你也可以用它作为内联元素的容器。

另一方面，如果你想把大块的内容组合在一起，或者想在网页上布局元素，你应该使用div 标签。

总结

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

这些标签在造型和布局方面发挥着重要作用。请记住，HTML5引入了语义元素，如section 、header 、nav 、footer ，以及其他元素。因此，一般来说，只有当语义元素与你想做的事情不相符时，你才应该使用span 或div 。

谢谢您的阅读，并继续编码。