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

Question

我想问一些简单的例子来说明 <div> 的用法和 <span> .我见过他们都用 id 标记页面的一部分。或 class ，但我很想知道是否有时一个人比另一个人更受欢迎。

Answer 1

• div是 block element
• span是 inline element .

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

例如:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

注意，将 block 级元素放在行内元素中是非法的，所以:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...是非法的。

---

编辑:从 HTML5 开始，一些 block 元素可以放置在一些内联元素中。请参阅 MDN 引用 here一个非常清晰的列表。以上仍然是非法的，如<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 working draft 第 4.4 节列出它们并提示它们的用法。 HTML5 仍然是一个有效的规范，所以还没有什么是“最终的”，但是这些元素中的任何一个是否会出现在任何地方都是非常值得怀疑的。如果您想在某些旧版本的 IE 中设置这些元素的样式，则需要使用 javascript hack - 您需要使用 document.createElement 创建每个元素之一在您的源代码中指定任何这些元素之前。有很多库可以为您解决这个问题 - 一个快速的 Google 搜索出现了 html5shiv .