HTML 标签 <div> 和 <span> 有什么区别？
https://stackoverflow.com/questions/183532
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想询问一些简单的例子来展示其用途 <div> 和 <span>. 。我见过它们都用来标记页面的一部分 id 或者 class, ，但我有兴趣知道是否有时会优先选择其中一个。
解决方案
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参考此处。上述内容仍然是非法的，因为＆lt; span＆gt; 只接受短语内容，＆lt; div＆gt; 是流内容。
你问过一些具体的例子，一个是从我的保龄球网站上获取的， 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 中，以便我可以更改样式。正如你所看到的，我还在标题中包含了2个字母的 span - 这允许我在样式表中更改它们的颜色。
另请注意，HTML5包含一组广泛的新元素，用于定义常见的页面结构，例如文章，部分，导航等。 HTML 5工作草案列出了它们，并提供了有关其用法的提示。 HTML5仍然是一个工作规范，所以没有什么是“最终的”然而，任何这些元素都会随处可见，这是非常值得怀疑的。如果你想在一些旧版本的IE中设置这些元素的样式，你需要使用javascript hack - 你基本上需要在任何这些元素之前使用 document.createElement 创建每个元素之一在您的来源中指定。有很多库会为您解决这个问题 - 快速Google搜索出现了 html5shiv
其他提示
为了完整起见，我邀请您这样思考：
- HTML 中定义了许多块元素（前后换行），以及许多内联标签（无换行）。
- 但在现代 HTML 中，所有元素都应该具有 含义: ：A
<p>是一个段落，一个<li>是一个列表项等，我们应该为正确的目的使用正确的标签——不像过去我们缩进使用<blockquote>内容是否是引用。 - 那么，当你在那里时你会做什么 是 你想做的事情没有意义吗？没有 意义 到 400px 宽的列，有吗？您只希望文本列的宽度为 400 像素，因为这适合您的设计。
- 为此，他们在 HTML 中添加了两个元素：通用的或无意义的元素
<div>和<span>, ，因为否则，人们会重新滥用那些确实有意义的元素。
这里已有很好的详细解答，但没有可视化的例子，所以这里有一个简单的例子：
＆lt; div＆gt; 是一个块标记，而＆lt; span＆gt; 是一个内联标记。
＆lt; div＆gt; 是块级元素，＆lt; span＆gt; 是内联元素。
如果您想对某些内嵌文字执行某些操作，＆lt; span＆gt; 是可行的方法，因为它不会引入＆lt; div＆gt; 的换行符会。
正如其他人所指出的那样，每一个都隐含着一些语义，最重要的是＆lt; div＆gt; 意味着文档中的逻辑划分，类似于一个部分。文件或其他东西，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的答案中已经提到了真正重要的区别。但是，对每个人来说，影响并不明显。
作为内联元素，＆lt; span＆gt; 可能只包含其他内联元素。因此，以下代码是错误的：
<span><p>This is a paragraph</p></span>
以上代码无效。要包装块级元素，必须使用另一个块级元素（例如＆lt; div＆gt; ）。另一方面，＆lt; div＆gt; 只能用于块级元素合法的地方。
此外，这些规则在（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 而不是内联使用，它根本不会产生预期的效果。
正如其他答案中所提到的，默认情况下 div 将呈现为块元素，而 span 将在其上下文中呈现为内联。但两者都没有任何语义价值;它们的存在允许您将样式和标识应用于任何给定的内容。使用样式，您可以使 div 像 span 一样，反之亦然。
div 的一个有用样式是 inline-block
示例：
我在游戏网络项目中使用 inline-block 取得了巨大的成功。
Div是一个块元素，span是一个内联元素，它的宽度取决于div的内容，而div不是
我想说，如果你知道一点西班牙语，请看这个第页，正确解释的地方。
然而，快速定义是 div 用于划分部分， span 用于将某种样式应用于另一个块元素中的元素，如格
只想添加一些历史背景来了解 span vs div
span 的历史：
1995年7月3日，Benjamin C. W. Sittler 提出了通用文本 容器标记，用于将样式应用于某些文本块。 渲染是中性的，除非与a结合使用 样式表。关于约会，存在争论 可读性，意义。 Bert Bos提到了可扩展性 通过class属性的元素（具有诸如的值） 城市，人，约会等）。 保罗·普雷斯科德担心这两个因素 会被滥用。他反对提及“任何新的”的文字 元素应该是旧元素“并添加“如果我们创建一个标签 没有语义它可以在任何地方使用而不会出错。我们 必须强迫作者正确标记其文档的语义。我们 必须迫使编辑器供应商明确表达他们的选择 。接口＆QUOT;
介绍 span 的RFC草案：
首先，一般 需要使用tainer来携带LANG和BIDI属性 没有其他要素的情况; SPAN ele- 为此目的引入了。
div 的历史：
DIV元素可用于将HTML文档结构化为分割层次结构。
...
CENTER是在Netscape加入支持之前推出的 HTML 3.0 DIV元素。由于它的原因，它保留在HTML 3.2中 广泛部署。
简而言之，这两个元素都源于对更具语义通用的容器的需求。 Span被提议作为＆lt; text＆gt; 元素的更通用的替代品来设置文本样式。 Div被提议作为划分页面的通用方式，并且具有替换＆lt; center＆gt; 标签以进行居中对齐内容的额外好处。 Div一直是一个块元素，因为它作为页面分隔符的历史。 Span一直是内联元素，因为它的最初目的是文本样式，而今天div和span分别是默认块和内联显示属性的通用元素。
在HTML中，有一些标签可以为内容添加结构或语义。例如，＆lt; p＆gt; 标记用于标识段落。另一个例子是有序列表的＆lt; ol＆gt; 标记。
如上所示，如果HTML中没有合适的标记，则通常会使用＆lt; div＆gt; 和＆lt; span＆gt; 标记。
＆lt; div＆gt; 标记用于标识文档的块级别/分区，该文档在其前后都有换行符。
可以使用div标签的示例包括页眉，页脚，导航等。但是在HTML 5中已经提供了这些标签。
＆lt; span＆gt; 标记用于标识文档的内联部分/分区。
例如，span标记可用于向元素添加内嵌图标。
记住，基本上，他们自己也不执行任何功能。 他们不仅针对的功能。
它们只能在CSS的帮助下进行自定义。
现在回答你的问题：
SPAN标记和一些样式对于在html中的段落中保留一行很有用。 这是HTML中的行级或语句级别。
示例：
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
所说的DIV标签功能只能通过样式支持，可以容纳大量的HTML代码。
DIV是Block level
示例：
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
根据您的要求，两者都有时间和时间使用。
希望答案清楚。 谢谢。
＆lt; div＆gt; 是一个块元素。
正如div中所有段落或任何内容一样，我们可以将css应用于div中的所有元素。仅仅通过div给出风格。
＆lt; span＆gt; 是一个内联元素。
所有CSS更改的内容仅反映该元素。
<div style="color:green;">
<h1>Example of div and span</h1>
<p>
This is a paragraph within a div
<span style="color: red;"> Paragraph with in span. </span>
</p>
</div>
