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

#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="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中，以便我可以更改样式。如您所见，我还在标题中的2个字母周围加上了span-这使我可以在样式表中更改其颜色。

还要注意，HTML5包含一组广泛的新元素，用于定义常见的页面结构，例如文章，栏目，导航等。

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

#2 楼

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


HTML中定义了很多块元素（前后的换行符），还有很多内联标签（没有换行符）。但是在现代HTML中，所有元素都应该具有含义：<p>是一个段落，<li>是一个列表项，依此类推，我们应该在右边使用正确的标签目的-就像过去我们使用<blockquote>缩进内容是否是引号一样。
那么，当您尝试做的事情没有意义时，您会怎么做？ 400px宽的列​​没有意义，对吗？您只希望您的文本列宽为400px，因为它适合您的设计。
由于这个原因，他们在HTML中又添加了两个元素：通用或无意义的元素<div>和<span>，否则，人们会回头滥用确实具有意义的元素。

#3 楼

这里已经有很好的详细答案，但是没有直观的示例，因此这里有一个简单的说明：

 <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>是一个嵌入式标签。

#4 楼

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

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

#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内联，只会产生预期的影响。

#7 楼

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

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

示例：


http://dustwell.com/div-span-inline-block.html
CSS显示：内联vs内联块

我已经使用inline-block在游戏网站项目中取得成功。

#8 楼

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

#9 楼

我想说的是，如果您知道西班牙语，可以在此页面中找到适当的说明。

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

#10 楼

只是想为span和div的出现方式添加一些历史背景

span的历史：


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


-来源（w3 wiki）

从引入span的RFC草案开始：


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


-来源（IETF草案）

div的历史记录：


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

...

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


HTML 3.2规范

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

#11 楼

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

如上所示，在HTML中没有合适的标签可用时，通常使用<div>和<span>标签。

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

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

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

例如span标签可以是用于向元素添加嵌入式象形文字。

#12 楼

请记住，基本上，它们本身也不执行任何功能。
它们不是仅通过其标签来说明功能。

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

根据您的要求，都有时间和场合。

答案很明确。
谢谢。

#13 楼

它简单明了。


使用span不会影响布局，因为它是内联的（in line（不要混淆，因为可以包装东西））
使用div会影响布局，其中的内容显示在新行（block element）中，当要添加的元素没有特殊的语义，而您希望使用<div>在新行中显示它时。