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


543

我想问一些简单的例子,说明<div>and 的用法<span>。我看过他们都用来标记网页的有一个部分idclass,但我想知道是否有当一个优于其他倍。

Answers:


582

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

例如:

<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="https://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标题中还包裹了大约2个字母-这使我可以在样式表中更改其颜色。

另请注意,HTML5包含一组广泛的新元素,这些元素定义了常见的页面结构,例如文章,栏目,导航等。

HTML 5工作草案的 4.4节列出了它们并给出了用法的提示。HTML5仍然是一个有效的规范,因此还没有“最终的”,但是,这些元素中的任何一个都在任何地方都令人怀疑。如果要在IE的某些较旧版本中设置这些元素的样式,则需要使用一个JavaScript hack-您需要使用以下命令创建每个元素之一document.createElement然后在源中指定任何这些元素。有很多库将为您解决这个问题-快速的Google搜索打开了html5shiv


5
克里斯(Chris),您的文本中有一个错误:即使将span的样式设置为“ block”,将其环绕在块级元素上仍然是非法的!
Konrad Rudolph

7
您不能使用divspan语义,因为它们没有任何意义。div是无意义的通用块级元素,span而是无意义的通用内联元素。
2011年

9
@apnerve它们仍然具有语义,在块与内联元素之间,无论是从解析角度还是从“阅读此源以找出正在发生的事情”的角度,都意味着文档流的不同之处。
克里斯·马拉斯蒂·乔治

20
“语义学(源自希腊语sēmantiká,是sēmantikós的中性复数形式)[1] [2]是对意义的研究。它着眼于符号之间的关系,例如单词,短语,符号和符号以及它们所代表的含义,符号”。指示符“ div”和“ span”无疑代表某些东西。HTML规范很好地细分了block和inline元素的含义。 w3.org/TR/html401/struct/global.html#h-7.5.3。HTML5草案甚至将它们分为不同的组-对内容和文本级语义进行分组。 dev.w3.org/html5/spec/Overview.html
Chris Marasti-Georg

16
您在“ div是一个块元素,跨度是内联。” :)
Matical

390

为了完整起见,我邀请您这样考虑:

  • HTML中定义了很多块元素(前后都有换行符),还有很多内联标签(没有换行符)。
  • 但是在现代HTML中,所有元素都应该具有含义:a <p>是一个段落,an <li>是一个列表项,等等,我们应该将正确的标签用于正确的目的-与过去的时代不同使用<blockquote>内容是否为引号来缩进。
  • 所以,你会怎么做时,有没有意义的,你正在试图做的事情?没有意义400px宽的列,是吗?您只希望文本列宽为400px,因为这适合您的设计。
  • 因此,他们在HTML中又添加了两个元素:通用或无意义的元素<div><span>,因为否则,人们会回到滥用确实具有意义的元素。

20
这是一个正确的解释。我想知道为什么这个不被接受。
apnerve 2011年

16
因为页面太远了
Jason Sebring

12
仅仅因为没有接受一个好的答案,并不意味着您不能投票赞成。+1是有用的说明。
Cyber​​Fonic 2012年

8
很高兴知道,但是它没有回答原始问题,因为它没有解释div和span元素之间的区别。
tehvan '17

216

这里已经有很好的详细答案,但是没有直观的示例,因此这里有一个简单的例子:

div和span之间的差异

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

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


16
即使没有CSS,它们对布局也有不同的影响!这是我第一次看到此影片!
GreenAsJade 2014年

2
谢谢,我赞成这个回答,因为它很快回答div有下一行
Script Kitty

4
感谢您在视觉上解释像我这样的新手:-)
Aritra Chatterjee

73

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

如果您想对某些内联文本执行某些操作,<span>则应该这样做,因为它不会引入a <div>会导致的换行符。


正如其他人所指出的,每种语义中都隐含着一些语义,最重要的事实是,a <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>

1
可以使div内联(display:inline;),反之亦然,例如span,但这是最好的解释。它们是包装器标签,span通常用于句子或突出显示文本,div用于部分。
罗斯

3
我知道您可以使用CSS修改此事实,但这引入了另一项技术。HTML可以独立存在,并且当它存在时,div不是内联的,也不打算以其纯粹的形式存在。
詹森·邦廷

是否有一本很好的书来解释如何在不同情况下正确使用html元素。
mko 2015年

@mko-老实说,我不知道。经验是最好的老师。最终,就其本身而言,没有“正确”的答案,只是有什么适合您的情况和您的目的。;)
Jason Bunting 2015年

30

克里斯的答案中已经提到了真正重要的区别。但是,对于所有人来说,影响并不明显。

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

7
@Faizan有什么关系?这也是错误的:并非每个浏览器都会为此标记产生一致的结果。根据您使用的文档类型(以及浏览器)的不同,它甚至可能根本无法运行,而是导致验证错误。
康拉德·鲁道夫2013年

我知道,某些浏览器的效率足以运行无效的代码。那就是为什么它跑了。您能推荐我一个不错的HTML验证器吗?
赞2014年

6
“对您的工作
持保守态度

5
欢迎来到汤食堂。使用无效HTML的浏览器是高度优化但挑剔的HTML解析器不是常态的原因。每个值得赞美的浏览器(即与那里的“ HTML”兼容)都使用某种“汤”型(内部)库使其变得可口。
2013年

8

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

<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 被使用内联,它根本不会产生预期的影响。


6

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

有用的样式之一divinline-block

例子:

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

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

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


3
如果它们没有语义价值,那么将只有其中之一。一个是块级划分;另一个是串联跨度
Chris Marasti-Georg

3

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



3

只是想为spanvs的出现添加一些历史背景div

历史span

1995年7月3日,Benjamin CW Sittler 提出了一个通用的文本容器。标签,用于将样式应用于某些文本块。除非与样式表一起使用,否则呈现为中性。关于可读性,即意义,存在着争论。Bert Bos通过class属性提到了元素的可扩展性(带有诸如city,person,date等的值)。保罗·普雷斯科德(Paul Prescod)担心这两个因素都会被滥用。他反对在文本中提到“任何新元素都应该在旧元素上”,并添加“如果我们创建一个没有语义的标签,则可以在任何地方使用它而不会出错。我们必须强迫作者正确标记其文档的语义。我们必须强迫编辑器供应商在其界面中明确表明这一选择。”

-来源(W3 Wiki)

从RFC草案中引入span

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

-来源(IETF草案)

历史div

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

...

Netscape引入了CENTER,之后他们才添加了对HTML 3.0 DIV元素的支持。由于其广泛部署,因此保留在HTML 3.2中。

HTML 3.2规范

简而言之,这两个元素都是出于对语义上更通用的容器的需求。提议将Span用作<text>样式元素的通用替代。提出Div是一种用于划分页面的通用方法,它具有替换<center>标签以使内容居中对齐的其他好处。由于Div作为页分隔符的历史,它一直是一个块元素。Span一直是内联元素,因为其最初的目的是文本样式,而今天div和span都已成为具有默认block和inline display属性的通用元素。


2

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

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

<div>标签被用来标识之前和之后它有一个换行文档的方块层级部/分。

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

所述<span>标签用于标识文档的一个内联区段/分。

例如,可以使用span标签将嵌入式象形文字添加到元素中。


2

记住,基本上他们自己也不执行任何功能。他们没有具体说明的功能只是通过他们的标签

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

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

希望答案清楚。谢谢。


我一直在寻找的理想答案。
PHPFan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.