HTML div和span元素之间的区别是什么?

我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或class标记页面的某个部分，但我想知道是否有时其中一个比另一个更受欢迎。

489682 次浏览
小开

<div>是块级元素，<span>是内联元素。

如果你想对一些内联文本做一些事情，<span>是最好的选择，因为它不会像<div>那样引入换行符。

正如其他人所注意到的，这些都隐含着一些语义，最重要的事实是，<div>暗示了文档中的逻辑划分，类似于文档的一部分或其他内容，例如:

<div id="Chapter1">
<p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
<p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p>
</div>
小开
最佳答案

这意味着要在语义上使用它们，div应该用于包装文档的各个部分，而span应该用于包装文本、图像等小部分。

例如:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

注意，在内联元素中放置块级元素是非法的，因此:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

.．.是非法的。

编辑:从HTML5开始，一些块元素可以放在一些内联元素中。请参阅MDN参考在这里以获得相当清晰的清单。上述内容仍然是非法的，因为<span>只接受措辞内容，而<div>是流内容。

你要求一些具体的例子，所以是一个从我的保龄球网站，BowlSK:

<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

在我的页面顶部，我有一个逻辑部分，“header”。因为这是一个节，所以我使用了一个div(带有适当的id)。在其中，我有两个部分:用户栏和实际的页面标题。标题使用适当的标记h1。用户栏作为一个部分，被div包装起来。在其中，用户名被包装在span中，因此我可以更改样式。正如您所看到的，我还在标题中的两个字母周围包装了span -这允许我在样式表中更改它们的颜色。

还要注意的是，HTML5包含了一组广泛的新元素，这些元素定义了常见的页面结构，如article、section、nav等。

HTML 5工作草案的4.4节列出了它们，并给出了关于它们使用的提示。HTML5仍然是一个工作规范，所以还没有什么是“最终的”，但这些元素是否会有任何进展是非常值得怀疑的。如果你想在一些旧版本的IE中设置这些元素的样式，你需要使用一个javascript hack -你需要在源代码中指定任何这些元素之前使用document.createElement创建每个元素中的一个。有很多库可以帮你解决这个问题——快速搜索谷歌会找到html5shiv。

小开

正如在其他回答中提到的，默认情况下div将被呈现为块元素，而span将在其上下文中内联呈现。但两者都没有任何语义价值;它们的存在允许您对任何给定的内容应用样式和标识。使用样式，您可以使div的行为像span，反之亦然。

div的一个有用的样式是inline-block

例子:

  1. http://dustwell.com/div-span-inline-block.html

  2. CSS显示:inline vs inline-block

我曾在游戏网页项目中使用inline-block取得了巨大成功。

小开

真正重要的区别已经在克里斯的回答中提到了。然而，这并不是对每个人都有明显的影响。

作为一个内联元素，<span>可能只包含其他内联元素。因此下面的代码是错误的:

<span><p>This is a paragraph</p></span>

上面的代码无效。要包装块级元素，必须使用另一个块级元素(例如<div>)。另一方面，<div>只能在块级元素合法的地方使用。

此外，这些规则在(X)HTML中是固定的，它们被CSS规则的存在不改变!所以下面的代码也是错误的!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
小开

我想说的是，如果你懂一点西班牙语，看看这个页面，那里有适当的解释。

然而，一个快速的定义是，div用于划分部分，span用于将某种样式应用到另一个块元素(如div)中的元素上。

小开

为了完整起见，我建议你这样思考:

  • HTML中定义了很多块元素(前后换行)，还有很多内联标记(没有换行)。
  • 但在现代HTML中，所有元素都应该有的含义: <p>是一个段落，<li>是一个列表项，等等，我们应该为正确的目的使用正确的标记——不像在过去，无论内容是否是引用，我们都使用<blockquote>缩进。
  • 那么，当你试图做的事情毫无意义时，你会怎么做?没有意义到400px宽的列，是吗?你只是想让你的文本列是400px宽，因为这适合你的设计。
  • 出于这个原因，他们又在HTML中添加了两个元素:通用的或没有意义的元素<div>和<span>，因为否则，人们会回去滥用那些有意义的元素。
小开

Div是一个块元素，span是一个内联元素，它的宽度取决于它自己的内容，而Div不是

小开

这里已经有了很好的、详细的答案，但没有可视化的例子，所以这里有一个简单的例子:

div和span之间的差异

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>是块标记，而<span>是内联标记。

小开

在HTML中，有一些标记为内容添加结构或语义。例如，<p>标记用于标识一个段落。另一个例子是有序列表的<ol>标记。

如上面所示，当HTML中没有合适的标记可用时，通常会使用<div>和<span>标记。

<div>标记用于标识文档的块级节/分，该节/分前后都有换行符。

可以使用div标签的例子有页眉、页脚、导航等。然而在HTML 5中，这些标记已经提供了。

<span>标记用于标识文档的内联节/分。

例如，span标记可用于向元素添加内联象形文字。

小开

“块元素”的意义是隐含的，但从未明确说明。如果我们忽略所有的理论(理论是好的)，那么下面是一个语用比较。以下几点:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

生产:

This paragraph has a span.


This paragraph


has
a div.

这表明不仅应该和div 不可以内联使用，它根本不会产生想要的效果。

小开

只是想为span vs div添加一些历史背景

span的历史:

1995年7月3日，Benjamin C. W. Sittler提出了一个通用文本 Container 标签，用于将样式应用到某些文本块。 渲染是中性的，除非与 样式表。有一场关于about和around的争论 可读性,意义。Bert Bos提到了可扩展性 元素的类属性(值为 城市，人，日期等)。Paul Prescod担心这两个因素 会被滥用。他反对文中提到“任何新的” 元素应该在一个旧的"和添加"如果我们创建一个标签与 没有语义，它可以在任何地方使用而不会出错。< / >强 必须强制作者正确标记其文档的语义。我们 必须强迫编辑器供应商在他们的 接口!”< / p >

-源(w3 wiki) .

RFC草案引入了span:

首先，一个一般的骗局 需要tainer来携带LANG和BIDI属性 在没有其他要素的情况下; SPAN e-

. sh

. sh

- Source (IETF Draft)

div的历史:

DIV元素可用于将HTML文档构造为划分的层次结构。

.．.

CENTER是Netscape在添加对 HTML 3.0 DIV元素。它被保留在HTML 3.2中，因为它具有 广泛部署。< / p >

HTML 3.2 Spec

简而言之，这两个元素都源于对语义通用容器的需求。Span被建议作为<text>元素的更通用的替代来设置文本样式。Div是作为一种划分页面的通用方法提出的，它还有一个额外的好处，就是取代了<center>标记，使内容居中对齐。Div一直都是块元素，因为它有作为页面分隔符的历史。Span一直是一个内联元素，因为它最初的用途是文本样式，今天div和Span都已经分别成为具有默认块和内联显示属性的通用元素。

小开
记住，基本上，它们的self也不执行任何功能。 它们是不特定于功能只看标签.

它们只能在CSS的帮助下进行定制。

现在回到你的问题:

SPAN标签加上一些样式将有助于在一行内，例如在一个段落中，在html中保持。 这是HTML中的行级或语句级

例子:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

DIV标签的功能就像上面说的那样，只能在样式的支持下可见，可以容纳大量的HTML代码。

DIV是块级

例子:

    <div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>

根据您的需求，这两种方法都有使用的时间和情况。

希望我的答案清楚。 谢谢你。< / p >

小开

这很简单。

  • 使用span不会影响布局，因为它是内联的(in line(不应该混淆，因为东西可以被包装))
  • 使用div会影响布局，里面的内容出现在新行(block element)中，当你想添加的元素没有特殊的语义意义，你想要它出现在新行中，使用<div>。

提交答案