那<一>,．

这些标签可以在网上找到。但是，去任何一个大型网站，打开源代码，您可能会看到一些不熟悉的东西:一堆嵌套< div >和< span >标签。如果你不确定这些元素是干什么用的，就很难理解网页是如何编码的。它没有帮助div和span做类似的事情。
仍然，div和span元素非常普遍，可能在您访问的大多数页面上使用。因此，作为兴高兴网站专家，如果要掌握页面结构和内容，您应该知道它们之间的区别。在本指南中，我们将向您展示每个人以及如何正确将它们应用于您的页面。

HTML中的跨度与div

Span和div都是通用的HTML元素，它们将网页的相关部分组合在一起。然而，它们有不同的功能。div元素用于页面元素的块级组织和样式化，而span元素用于内联组织和样式化。

让我们更详细地讨论每个元素，以更好地了解它们的不同。

div

这div元素(部门)是一个通用的块级元素，最常用于将页面内容划分为块。块元素是一种页面元素，它以一行开始，宽度等于整个页面或父容器。

你会经常看到div用于对相关段落、图像、标题和链接进行分组。例如，一篇三段式的文章可能会被包含在一个div中，而包含链接的导航菜单可能会被包含在另一个div中，这样使用div可以更容易地识别页面的不同部分并对它们应用样式CSS．

HTML中的div元素的基本示例如下所示：



这是我的第一段。
这是我的第二段。
这是我的最后一段。

跨度

跨度元素是通用内联元素，通常用于将样式应用于内联内容的一部分。内联元素没有启动新行，并且只占用页面上的空间作为其内容。SPAN标签用于文本，链接，图像和其他HTML元素的小部分，这些HTML元素与周围内容一起出现。

HTML中的跨度元素的基本示例如下所示：

这是一个段落，其中 extraith的东西内部额外的东西。

为了总结，div标记在围绕内联元素周围创建块级元素，而标记缠绕。尽管有不同的差异，但两者都用于为结构和/或造型的元素组成。

span vs. div示例

现在让我们看看跨度和DIV的几个例子，证明了他们的差异和应用。

这是两个的一个例子< div >标签，然后是两个< span >标签。我已经为每个元素应用了一个独特的背景颜色来显示它们的大小;注意div是如何占用页面的整个宽度，而span标签只占用其内容的空间。另外，每个div在其内容之后添加一个换行符，但是span元素不这样做。

看笔Span vs div 1由克里斯蒂娜富人（@hubspot.）在Codepen.．

接下来是更多代表您如何在网页上看到div和跨度在网页上使用的示例。在这里，divs分开了较大的内容块，并跨越这些div内的包裹片。

看笔Span vs div 2由克里斯蒂娜富人（@hubspot.）在Codepen.．

何时使用span vs. div

如上例所示，DIV和SPAN可用于样式和结构化网页。很容易为这些元素分配ID或Class属性，并使用CSS规则定位它们。您通常会看到跨度标签用于在一行文本中的单词时样式的内联内容。另一方面，DIV标签应该换更大的内容或充当儿童元素的容器。更复杂的网页通常会大量使用div，彼此嵌套它们以表示不同的页面区域和子区域。

考虑到span和div的便利性，每当您想要添加新页面元素时—例如，使用< div >标签而不是

标签。但是，它实际上被认为是Web开发中的最佳实践，以尽可能地限制他们的使用。

为什么会这样呢?Span和div是“通用”元素，这意味着这两个元素都不能表达它所包含的内容或其用途的含义。你可以在a里放很多东西< div >或者一个< span >标签，但标签本身并不清楚元素的目的或其中的内容是什么。

与泛型元素相反的是语义元素，它的标签传达了元素的含义。大多数HTML元素都是语义的

那那