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

我想问一些简单的例子，显示<div>和<span>的用法。 我已经看到它们都用来用id或class标记页面的一部分，但是我想知道是否有时候有一个优先于另一个。

---

#1楼

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

---

#2楼

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

如果您想对某些内联文本进行处理，则<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>

---

#3楼

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

这意味着要在语义上使用它们，应将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="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 2个字母包裹了一个span -这使我可以在样式表中更改其颜色。

还要注意，HTML5包括一组广泛的新元素，这些元素定义了常见的页面结构，例如文章，小节，导航等。HTML5 工作草案的 4.4节列出了它们，并给出了其用法的提示。 HTML5仍然是一个有效的规范，所以还没有什么“最终的”，但是，这些元素中的任何一个都在任何地方都令人怀疑。 如果要在IE的某些较旧版本中设置这些元素的样式，则需要使用一个JavaScript技巧-您基本上需要在源中指定任何这些元素之前，使用document.createElement创建每个元素之一。 有很多库将为您解决这个问题-快速的Google搜索打开了html5shiv 。

---

#4楼

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

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

例子：

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

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

我在游戏Web项目中使用inline-block取得了巨大的成功。

---

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

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

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

---

#7楼

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

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

---

#8楼

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

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

---

#9楼

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

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

<div>标记用于标识文档的块级节/分区，该文档在其前后都有换行符。

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

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

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

---

#10楼

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

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

---

#11楼

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

span历史：

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

-来源（W3 Wiki）

从引入span的RFC草案中：

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

-来源（IETF草案）

div历史：

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

...

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

HTML 3.2规范

简而言之，这两个元素都是出于对语义上更通用的容器的需求。 建议使用Span作为<text>元素的通用替代品来设置<text>样式。 提议使用Div作为划分页面的通用方法，它具有替换<center>标记以使内容<center>的附加好处。 由于Div作为页分隔符的历史，它一直是一个块元素。 Span一直是内联元素，因为其最初的目的是文本样式，而今天div和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>

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

希望答案清楚。 谢谢。