我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。


当前回答

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

<div>这是一个div <div>这是一个div <div>这是一个div <span>这是一个span <span>这是一个span <span>这是一个span

<div>是块标记,而<span>是行内标记。

其他回答

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

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

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

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

只是想添加一些历史背景关于span和div是如何产生的

跨度历史:

On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag 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."

-来源(w3 wiki)

在RFC草案中引入了span:

首先,一个普通的骗局 需要tainer来携带LANG和BIDI属性 在没有其他要素的情况下;《SPAN ele》 Ment就是为此目的而引入的。

-来源(IETF草案)

div的历史:

DIV元素可用于将HTML文档构造为划分的层次结构。 ... 的支持之前,Netscape就引入了CENTER HTML 3.0 DIV元素。它被保留在HTML 3.2中,因为它具有 广泛的部署。

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.

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

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

<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不仅不应该内联使用,而且它根本不会产生想要的效果。