我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。


当前回答

我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。

然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如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>

正如在其他回答中提到的,默认情况下div将被呈现为块元素,而span将在其上下文中内联呈现。但两者都没有任何语义价值;它们的存在允许您对任何给定的内容应用样式和标识。使用样式,可以使div像span一样,反之亦然。

div的一个有用的样式是内联块

例子:

http://dustwell.com/div-span-inline-block.html CSS显示:内联vs内联块

我曾在游戏网页项目中使用内联块取得了巨大的成功。

语义

span和div都是没有关联语义的元素。当你需要一个元素(例如样式化或JavaScript目标),但HTML中没有适合内容的语义元素时,可以使用它们。

样式

这两个元素都不是浏览器内置样式表的主要样式。关键的区别在于display属性。Span元素默认显示为inline, div元素默认显示为block。

结构

span和div元素允许在HTML文档的不同位置。

你会在这里看到许多早期的答案,它们被称为“内联元素”和“块元素”。这是HTML 4做出的区分,现在已经过时了(尽管作为一般准则很有用)。(HTML 4定义为内联或块的元素与默认的CSS显示属性值之间有很强的相关性,但不是100%。)

HTML 5采用了一种更微妙的方法来定义哪些元素被允许放在哪里。

span元素可以用于“需要措辞内容的地方”,也可以包含“措辞内容”。

同时,div元素可以“在期望流内容的地方”(在这种情况下,它可以包含“流内容”)和“作为dl元素的子元素”,在这种情况下,它可以包含“一个或多个dt元素后面跟着一个或多个dd元素,可选地与脚本支持元素混合”)。

它比HTML 4的视图要复杂得多,但是规范有很好的超链接,并且有一个验证服务可用。

您可以使用块/内联的区别作为一般准则。如果你需要生成新的行,或者需要换行的内容(如段落、表格、文章和章节),你可能应该使用div。如果你有在一行中一起流动的内容(如单词),那么你可能应该使用span。(当然,前提是没有合适的语义元素)。

我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。

然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如div。

Div是一个块元素,span是一个内联元素,它的宽度取决于它自己的内容,而Div不是