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

• 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="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

好的，这是怎么回事？

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

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