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

我想问一些简单的例子,显示<div><span>的用法。 我见过他们都用idclass来标记页面的一部分,但是我有兴趣知道是否有次优先于另一个。

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

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

例如:

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

请注意,在embedded元素中放置块级元素是非法的,因此:

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

…是非法的。


编辑:截至HTML5,一些块元素可以放在一些内联元素 – 特别是,上述现在是合法的。


你问了一些具体的例子,从我的保龄球网站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包含了一组定义常见页面结构的广泛的新元素,例如文章,部分,导航等.HTML5 工作草案的第4.4节列出了它们,并给出了它们的用法提示。 HTML5仍然是一个工作规范,所以没有什么是“最终的”,但它是任何地方的任何地方是非常值得怀疑的。 有一个JavaScript hack,如果你想在IE的一些老版本中设置这些元素,你将需要使用 – 你基本上需要在源document.createElement中指定任何元素之前使用document.createElement创build一个元素。 有一堆图书馆会为你处理这个问题 – 一个快速的Googlesearch出现了html5shiv 。

为了完整起见,我邀请你这样想:

  • 在HTML中定义了大量的块元素(之前和之后的换行符),以及大量的行内标签(没有换行符)。
  • 但是在现代HTML中,所有元素都应该具有含义 :一个<p>是一个段落,一个<li>是一个列表项目等,我们应该使用正确的标签来达到正确的目的 – 不像在过去我们使用<blockquote>缩进是否内容是一个报价或不。
  • 那么,当你想要做的事情没有意义时,你会做什么? 对于一个400像素宽的专栏没有意义 ,是吗? 你只是希望你的文字列宽度为400px,因为它适合你的devise。
  • 出于这个原因,他们在HTML中增加了两个元素:通用的或无意义的元素<div><span> ,否则,人们会回头滥用那些有意义的元素。

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

div和span之间的区别

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

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

如果你想用一些内联文本来做一些事情,那么<span>就是要走的路,因为它不会引入一个<div>换行符。


正如其他人所指出的那样,每一种语义都暗含着一些语义,最重要的是,一个<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> 

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> 

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

 <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将在其上下文内embedded。 但是既没有语义价值, 它们的存在允许您将样式和标识应用于任何给定的内容位。 使用样式,你可以使一个div像一个span ,反之亦然。

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

例子:

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

  2. CSS显示:内嵌与内嵌块

我已经在游戏网站项目中使用了inline-block来获得巨大成功。

DIV标签:

以下是特点:

  1. 正如名称所示,div标签在网页中定义了一个“部门”。
  2. div是一个块元素; 其默认显示值是“block”。
  3. div标签通常用于在html中创build基于CSS的布局。
  4. 默认情况下,在此元素之前和之后放置一个换行符。

跨度标签:

以下是特点:

  1. span标签在页面中没有视觉差异,除非使用style属性进行定制。
  2. 跨度是一个内联元素。
  3. 跨度通常用于风格化文本。 在线function可以轻松使用自定义样式,而无需更改布局。
  4. 默认没有换行符,但是如果通过在style属性中指定'display:block'来改变它的内联属性,就可以实现这个function。

Div是一个块元素,span是一个内联元素,其宽度取决于div所在的内容

我会说,如果你知道一点西class牙语来看看这个网页 ,在哪里正确解释。

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

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

如上所示,当HTML中没有合适的标签时,通常使用<div><span>标签。

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

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

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

例如,可以使用span标签将内联象形图添加到元素。