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

What is the difference between HTML tags <div> and <span>?

提问by JSchaefer

I would like to ask for some simple examples showing the uses of <div>and <span>. I've seen them both used to mark a section of a page with an idor class, but I'm interested in knowing if there are times when one is preferred over the other.

我想问用于显示的使用一些简单的例子<div>和<span>。我看过他们都用来标记网页的有一个部分id或class，但我想知道是否有当一个优于其他倍。

回答by Chris Marasti-Georg

• divis a block element
• spanis an inline element.

• div是块元素
• span是一个内联元素。

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

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

For example:

例如：

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

Note that it is illegal to place a block level element within an inline element, so:

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

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

...is illegal.

……是非法的。

---

---

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference herefor a pretty clear listing. The above is still illegal, as <span>only accepts phrasing content, and <div>is flow content.

编辑：从 HTML5 开始，一些块元素可以放置在一些内联元素内。请参阅此处的 MDN 参考以获得非常清晰的列表。以上仍然是非法的，因为<span>只接受短语内容，并且<div>是流内容。

---

---

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

你要求提供一些具体的例子，所以是从我的保龄球网站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>

Ok, what's going on? At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a spanaround 2 letters in the title - this allows me to change their color in my stylesheet.

好的，怎么回事？在我的页面顶部，我有一个逻辑部分，即“标题”。由于这是一个部分，我使用了一个 div（带有适当的 id）。其中，我有几个部分：用户栏和实际页面标题。标题使用适当的标签，h1。作为一个部分的用户栏被包裹在一个div. 其中，用户名被包裹在一个 中span，以便我可以更改样式。如您所见，我还在span标题中包裹了大约 2 个字母 - 这允许我在样式表中更改它们的颜色。

Also note that HTML5 includes a broad new set of elements that define common page structures, such as article, section, nav, etc. Section 4.4 of the HTML 5 working draftlists them, and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - you basically need to create one of each element using document.createElementbefore any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.

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

回答by AmbroseChapel

Just for the sake of completeness, I invite you to think about it like this:

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

• There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
• But in modern HTML all elements are supposed to have meanings: a <p>is a paragraph, an <li>is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote>whether the content was a quote or not.
• So, what do you do when there isno meaning to the thing you're trying to do? There's no meaningto a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
• For this reason, they added two more elements to HTML: the generic, or meaningless elements <div>and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

• HTML 中定义了许多块元素（前后换行），以及许多内联标记（无换行符）。
• 但是在现代 HTML 中，所有元素都应该具有含义：a<p>是一个段落，an<li>是一个列表项等等，我们应该为正确的目的使用正确的标签——不像过去那样使用<blockquote>内容是否为引用进行缩进。
• 所以，你会怎么做时，有是没有意义的，你正在试图做的事情？400px 宽的列没有任何意义，是吗？您只希望您的文本栏宽度为 400 像素，因为这适合您的设计。
• 出于这个原因，他们增加了两个元素为HTML：通用或无意义的元素<div>和<span>，否则，人们会回到滥用其确实具有意义的元素。

回答by Brian

There are already good, detailed answers here, but no visual examples, so here's a quick illustration:

这里已经有很好的详细答案，但没有直观的例子，所以这里有一个快速说明：

<div>is a block tag, while <span>is an inline tag.

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

回答by Jason Bunting

<div>is a block-level element and <span>is an inline element.

<div>是一个块级元素并且<span>是一个内联元素。

If you wanted to do something with some inline text, <span>is the way to go since it will not introduce line breaks that a <div>would.

如果你想用一些内联文本做一些事情，这<span>是要走的路，因为它不会像 a<div>那样引入换行符。

---

---

As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div>implies a logical division in the document, akin to maybe a section of a document or something, a la:

正如其他人所指出的那样，其中的每一个都隐含了一些语义，最重要的是 a<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>

回答by Konrad Rudolph

The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.

克里斯的回答中已经提到了真正重要的区别。然而，其影响不会对每个人都显而易见。

As an inline element, <span>may only contain other inline elements. The following code is therefore wrong:

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

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

The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div>may only be used in places where block-level elements are legal.

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

Furthermore, these rules are fixed in (X)HTML and they are notaltered by the presence of CSS rules! So the following codes are alsowrong!

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

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

回答by user34660

The significance of "block element" is implied but never stated explicitly. If we ignore all the theory (theory is good) then the following is a pragmatic comparison. The following:

“块元素”的含义是隐含的，但从未明确说明。如果我们忽略所有理论（理论是好的）那么以下是一个务实的比较。下列：

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

produces:

产生：

This paragraph has a span.

This paragraph

has
a div.

That shows that not only shoulda div notbe used inline, it simply won't produce the desired affect.

这表明，不仅要一个div不被使用内联，它根本不会产生预期的影响。

回答by Eric R. Rath

As mentioned in other answers, by default divwill be rendered as a block element, while spanwill be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a divact like a spanand vice-versa.

如其他答案中所述，默认情况下div将呈现为块元素，而span将在其上下文中内联呈现。但两者都没有任何语义价值；它们的存在允许您将样式和身份应用于任何给定的内容。使用样式，您可以做出div类似 a的行为span，反之亦然。

One of the useful styles for divis inline-block

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

Examples:

例子：

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

2. CSS display: inline vs inline-block

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

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

I have used inline-blockto a great success, in game web projects.

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

回答by Pablo Herrero

I would say that if you know a bit of spanish to look at this page, where is properly explained.

我想说的是，如果你懂一点西班牙语来看看这个页面，哪里有正确的解释。

However, a fast definition would be that divis for dividing sections and spanis for applying some kind of style to an element within another block element like div.

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

回答by Jagannath Samanta

Div is a block element and span is an inline element and its width depends upon the content of it self where div does not

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

回答by Alex W

Just wanted to add some historical context to how there came to be spanvs div

只是想添加一些历史背景来说明spanvsdiv

History of span:

历史span：

On July 3, 1995, Benjamin C. W. Sittler proposes a generic text containertag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong.We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."

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

- Source (w3 wiki)

- 来源（w3 wiki）

From the RFC draft that introduces span:

从引入的 RFC 草案中span：

First, a generic con- tainer is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN ele- ment is introduced for that purpose.

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

- Source (IETF Draft)

- 来源（IETF 草案）

History of div:

历史div：

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

...

CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.

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

...

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

HTML 3.2 Spec

HTML 3.2 规范

In a nutshell, both elements arose out of a need for a more semantically-generic container. Span was proposed as a more generic replacement for a <text>element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center>tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.

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