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

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参考.以上仍然是非法的,因为<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.在其中,用户名包含在a中span,以便我可以更改样式.正如你所看到的,我还在span标题中包含了大约2个字母 - 这允许我在样式表中更改它们的颜色.

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

Answer 2

仅仅为了完整起见,我邀请你这样思考:

• HTML中定义了许多块元素(前后换行符),以及许多内联标记(没有换行符).
• 但是在现代HTML中,所有元素都应该具有含义:a <p>是段落,a <li>是列表项等等,我们应该使用正确的标记用于正确的目的 - 而不是像我们过去那样使用<blockquote>内容是否为引用缩进.
• 所以,当你会怎么做是没有意义的,以你想要做的事？400px宽的色谱柱没有意义,是吗？您只希望您的文本列宽400像素,因为这适合您的设计.
• 出于这个原因,他们增加了两个元素为HTML:通用或无意义的元素<div>和<span>,否则,人们会回到滥用其确实具有意义的元素.

Answer 3

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

<div>是一个块标记,<span>而是一个内联标记.

Answer 4

<div>是一个块级元素,<span>是一个内联元素.

如果你想用一些内联文本做一些事情,那<span>就是要走的路,因为它不会引入断言<div>.

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

克里斯的回答中已经提到了真正重要的区别.但是,对每个人来说,影响并不明显.

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

只是想添加一些历史背景来说明它是如何产生span的div

的历史span：

1995 年 7 月 3 日，Benjamin CW Sittler提出了一个通用文本容器标签，用于将样式应用于某些文本块。除非与样式表结合使用，否则呈现是中性的。关于可读性和意义存在着争论。Bert Bos 通过类属性（具有城市、人员、日期等值）提到了元素的可扩展性。保罗·普雷斯科德担心这两个要素都会被滥用。他反对文本中提到“任何新元素都应该在旧元素上”，并添加“如果我们创建一个没有语义的标签，它可以在任何地方使用而不会出错。我们必须迫使作者正确标记其元素的语义”。文档。我们必须迫使编辑器供应商在他们的界面中明确做出这样的选择。”

- 来源（w3 维基）

从 RFC 草案中介绍span：

首先，在没有其他元素合适的情况下，需要一个通用容器来承载 LANG 和 BIDI 属性；为此目的引入了 SPAN 元素。

- 来源（IETF 草案）

的历史div：

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

...

CENTER 是由 Netscape 在添加对 HTML 3.0 DIV 元素的支持之前引入的。由于其广泛部署，它被保留在 HTML 3.2 中。

HTML 3.2 规范

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

Answer 8

如其他答案中所述,默认情况下div将呈现为块元素,同时span将在其上下文中内联呈现.但两者都没有任何语义价值; 它们的存在允许您将样式和标识应用于任何给定的内容.使用样式,你可以做一个div像一个行为span,反之亦然.

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

例子:

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

2. CSS显示:内联vs内联块

inline-block在游戏网络项目中,我已经习以为常.

Answer 9

我想说，如果您懂一点西班牙语，请查看此页面，其中有正确的解释。

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

Answer 10

div 是块元素，span 是内联元素，其宽度取决于其自身的内容，而 div 则不然