HTML div 和 span 元素有什么区别？

Question

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

原文由 JSchaefer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

例如：

 <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 hack - 您需要使用 document.createElement 创建每个元素之一，然后再在您的资源。有很多库会为您处理这个问题——用 Google 快速搜索一下 html5shiv 。

原文由 Chris Marasti-Georg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了完整起见，我邀请你这样想：

• HTML 中定义了很多块元素（前后换行），还有很多内联标签（没有换行）。
• 但在现代 HTML 中，所有元素都应该具有 _含义_：a <p> 是一个段落， <li> 是一个列表项，等等，我们应该使用正确的标签为了正确的目的——不像过去我们缩进使用 <blockquote> 无论内容是否是引用。
• 那么，当您尝试做的事情 毫无 意义时，您会怎么做？ 400 像素宽的列没有 _意义_，是吗？您只希望您的文本栏为 400 像素宽，因为这适合您的设计。
• 出于这个原因，他们在 HTML 中添加了两个元素：通用的或无意义的元素 <div> 和 <span> ，因为否则，人们会回到滥用确实有意义的元素。

原文由 AmbroseChapel 发布，翻译遵循 CC BY-SA 2.5 许可协议