Question

我想问一些简单的例子，展示<div>和<span>的用法。我已经看到它们都用来标记带有id或class的页面的一部分，但我有兴趣知道是否有时候一个优先于另一个。

Answer 1

div是一个块元素，span是内联的。

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

例如：

<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参考here。上述内容仍然是非法的，因为<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="http://www.bowlsk.com/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

好的，发生了什么事？在我的页面顶部，我有一个逻辑部分，“标题”。由于这是一个部分，我使用div（具有适当的id）。在其中，我有几个部分：用户栏和实际页面标题。标题使用适当的标记h1。用户栏是一个部分，包含在div中。在其中，用户名包含在span中，以便我可以更改样式。正如你所看到的，我还在标题中包含了一个span左右两个字母 - 这允许我在样式表中更改它们的颜色。

另请注意，HTML5包含一组广泛的新元素，用于定义常见的页面结构，例如文章，部分，导航等。HTML 5 working draft的第4.4节列出了它们，并提供了有关其用法的提示。 HTML5仍然是一个工作规范，所以没有什么是“最终的”，但是任何这些元素都在任何地方都是非常值得怀疑的。如果你想在一些旧版本的IE中设置这些元素的样式，你需要使用javascript hack - 在你的源代码中指定任何元素之前，你基本上需要使用document.createElement创建每个元素之一。有很多库会为您解决这个问题 - 快速的Google搜索出现了html5shiv。

Answer 2

为了完整起见，我邀请你这样思考：

HTML中定义了许多块元素（前后换行符），以及许多内联标记（没有换行符）。
但在现代HTML中，所有元素都应该具有含义：<p>是一个段落，<li>是一个列表项，等等，我们就是应该使用正确的标记用于正确的目的 - 不像过去我们使用<blockquote>缩进内容是否是引用。
那么，当对您正在尝试的事情没有意义时，您会怎么做？ 400px宽的色谱柱没有含义，有吗？您只希望您的文本列宽400像素，因为这适合您的设计。
出于这个原因，他们又向HTML中添加了两个元素：泛型或无意义的元素<div>和<span>，否则，人们会回过头来滥用具有含义的元素。 / LI>

Answer 3

这里已有很好的详细解答，但没有可视化的例子，所以这里有一个简单的例子：

difference between div and span

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

Answer 4

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

如果您想对某些内嵌文字执行某些操作，<span>是可行的方法，因为它不会引入<div>的换行符。

正如其他人所指出的那样，每一个都隐含着一些语义，最重要的是，<div>意味着文档中的逻辑划分，类似于文档的某个部分或某些内容，a la ：

<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>

Answer 5

Chris的答案中已经提到了真正重要的区别。但是，对每个人来说，影响并不明显。

作为内联元素，<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>

Answer 6

暗示“块元素”的重要性，但从未明确说明。如果我们忽略所有理论（理论是好的），那么以下是一个实用的比较。以下内容：

<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 而不是内联使用，它根本不会产生预期的效果。

Answer 7

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

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

示例：

http://dustwell.com/div-span-inline-block.html
CSS display: inline vs inline-block

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

Answer 8

我想说，如果你知道一点西班牙语来看this page，那么在哪里可以正确解释。

但是，快速定义是div用于划分部分，span用于将某种样式应用于另一个块元素（如div）中的元素。

Answer 9

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

Answer 10

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

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

<div>标记用于标识文档的块级部分/分区，该文档在其之前和之后都有换行符。

可以使用div标签的示例包括页眉，页脚，导航等。但是在HTML 5中已经提供了这些标签。

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

例如，span标记可用于向元素添加内嵌图标。

Answer 11

只想添加一些历史背景来了解span与div的对比

span的历史：

1995年7月3日，Benjamin C. W. Sittler 提出了通用文本容器标记，用于将样式应用于某些文本块。渲染是中性的，除非与a结合使用样式表。关于约会，存在争论可读性，意义。 Bert Bos提到了可扩展性通过class属性的元素（具有诸如的值）城市，人，约会等）。保罗·普雷斯科德担心这两个因素会被滥用。他反对提及那些＆＃34;任何新的文本元素应该是旧元素＆＃34;并添加＆＃34;如果我们创建一个标签没有语义它可以在任何地方使用而不会出错。我们必须强迫作者正确标记其文档的语义。我们必须迫使编辑器供应商明确表达他们的选择接口＆＃34;

- Source (w3 wiki)

来自引入span的RFC草案：

首先，一般需要使用tainer来携带LANG和BIDI属性没有其他要素的情况; SPAN ele- 为此目的引入了。

- Source (IETF Draft)

div的历史：

DIV元素可用于将HTML文档结构化为分割层次结构。

...

CENTER是在Netscape加入支持之前推出的   HTML 3.0 DIV元素。由于它的原因，它保留在HTML 3.2中   广泛部署。

HTML 3.2 Spec

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

Answer 12

请记住，基本上，他们自己也不执行任何功能。他们不是仅根据其功能来具体说明功能。

只能在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>

根据您的要求，两者都有使用的时间和情况。

希望答案很清楚。谢谢。

Answer 13

简单明了。

使用span不会影响版面，因为它是内联的（in line（不应混淆，因为可以包装东西）
使用div会影响布局，当要添加的元素没有特殊的语义并且您希望它出现在新行中时，内部内容会出现在新行（block element）中使用<div>。

Answer 14

<div>是一个块元素。正如div中所有段落或任何内容一样，我们可以将css应用于div中的所有元素。仅仅通过div给出风格。

<span>是一个内联元素。

所有CSS更改的内容仅反映该元素。

<div style="color:green;">

 <h1>Example of div and span</h1>
   <p>
    This is a paragraph within a div
     <span style="color: red;"> Paragraph with in span. </span>
   </p>
 </div>

HTML标记<div>和<span>之间有什么区别？</span> </div>

14 个答案: