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

4 阅读 0 评论 0 点赞

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

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，以便我可以更改样式。如您所见，我还在span标题中包裹了大约 2 个字母 - 这允许我在样式表中更改它们的颜色。

另请注意，HTML5 包括一组广泛的新元素，这些元素定义了常见的页面结构，例如文章、部分、导航等。

HTML 5 工作草案的第 4.4 节列出了它们并给出了有关它们用法的提示。HTML5 仍然是一个有效的规范，所以还没有什么是“最终的”，但是这些元素中的任何一个是否会走向任何地方都是非常值得怀疑的。document.createElement如果您想在某些旧版本的 IE 中设置这些元素的样式，则需要使用 javascript hack -在源中指定任何这些元素之前，您需要创建每个元素之一。有很多库会为您处理这个问题——用 Google 快速搜索一下html5shiv。

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

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

这里已经有很好的、详细的答案，但没有直观的例子，所以这里有一个简单的例子：

div 和 span 之间的区别

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

展开片段

<div>是块标记，而<span>是行内标记。

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

如果您想对一些内联文本做一些事情，<span>这是可行的方法，因为它不会引入换行符<div>。

正如其他人所指出的，这些中的每一个都隐含了一些语义，最重要的是 a<div>暗示文档中的逻辑划分，类似于文档的一部分或其他东西，a 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>

克里斯的回答中已经提到了真正重要的区别。然而，其影响对每个人来说都不是显而易见的。

作为内联元素，<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>

“块元素”的意义是隐含的，但从未明确说明。如果我们忽略所有的理论（理论是好的）那么下面是一个务实的比较。下列：

<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 ，而且它根本不会产生预期的效果。