我想问一些简单的例子，展示和的用法。 我已经看到它们都用来标记一个带有id或class的页面的一部分，但是我有兴趣知道是否有时候一个优先于另一个。

div是块元素，span是内联的。

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

例如：

请注意，将块级元素放在内联元素中是违法的，因此：

......是非法的。

编辑：从HTML5开始，一些块元素可以放在一些内联元素中。有关非常清晰的列表，请参阅此处的MDN参考。以上仍然是非法的，因为只接受短语内容，是流内容。

你问了一些具体的例子，所以从我的保龄球网站BowlSK中取出一个：

好的，发生了什么？在我的页面顶部，我有一个逻辑部分，"标题"。由于这是一个部分，我使用div(具有适当的id)。在其中，我有几个部分：用户栏和实际页面标题。标题使用适当的标记h1。用户栏是一个部分，包含在div中。在其中，用户名包含在span中，以便我可以更改样式。正如你所看到的，我还在标题中包含了一个span大约2个字母 - 这允许我在样式表中更改它们的颜色。

另请注意，HTML5包含一组广泛的新元素，用于定义常见的页面结构，例如文章，部分，导航等.HTML 5工作草案的第4.4节列出了它们，并提供了有关其用法的提示。 HTML5仍然是一个工作规范，所以没有什么是"最终的"，但是任何这些元素都在任何地方都是非常值得怀疑的。如果你想在一些旧版本的IE中设置这些元素的样式，你需要使用javascript hack - 在你的源代码中指定任何元素之前，你基本上需要使用document.createElement创建每个元素之一。有很多库会为你解决这个问题 - 快速谷歌搜索出现了html5shiv。

仅仅为了完整起见，我邀请你这样思考：

• HTML中定义了许多块元素(前后换行符)，以及许多内联标记(没有换行符)。
• 但是在现代HTML中，所有元素都应该具有含义：

  是段落，

• 是列表项等等，我们应该使用正确的标记用于正确的目的 - 而不是像在我们使用

  whether the content was a quote or not.

• So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
• For this reason, they added two more elements to HTML: the generic, or meaningless elements and , because otherwise, people would go back to abusing the elements which do have meanings.

wmh

There are already good, detailed answers here, but no visual examples, so here's a quick illustration:

is a block tag, while is an inline tag.

wmh

是块级元素，是内联元素。

如果你想对某些内联文本做一些事情，那么就是要走的路，因为它不会引入会出现的换行符。

正如其他人所指出的那样，每一个都隐含着一些语义，最重要的是a 意味着文档中的逻辑划分，类似于文档的某个部分或某些东西，la：

克里斯的回答中已经提到了真正重要的区别。但是，对每个人来说，影响并不明显。

作为内联元素，可能只包含其他内联元素。因此，以下代码是错误的：

以上代码无效。要包装块级元素，必须使用另一个块级元素(例如)。另一方面，只能用于块级元素合法的地方。

此外，这些规则在(X)HTML中修复，并且CSS规则的存在不会改变它们！所以下面的代码也错了！

The significance of"block element" is implied but never stated explicitly. If we ignore all the theory (theory is good) then the following is a pragmatic comparison. The following:

produces:

That shows that not only should a div not be used inline, it simply won't produce the desired affect.

wmh

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

div的一个有用样式是inline-block

例子：

我在游戏网络项目中使用inline-block取得了巨大的成功。

Just wanted to add some historical context to how there came to be span vs div

History of span:

On July 3, 1995, Benjamin C. W. Sittler proposes a generic text
container tag for applying styles to certain blocks of text.
The rendering is neutral except if used in conjunction of a
stylesheet. There is a debate around versus about
readability, meaning. Bert Bos is mentioning the extensibility nature
of the element through the class attribute (with values such as
city, person, date, etc.). Paul Prescod is worried that both elements
will be abused. He is opposed to text mentionning that"any new
element should be on an old one" and adding"If we create a tag with
no semantics it can be used anywehere without ever being wrong. We
must force authors to properly tag the semantics of their document. We
must force editor vendors to make that choice explicit in their
interfaces."

- Source (w3 wiki)

From the RFC draft that introduces span缩进的过去：

First, a generic con-
tainer is needed to carry the LANG and BIDI attributes in
cases where no other element is appropriate; the SPAN ele-
ment is introduced for that purpose.

- 来源(IETF草案)

div的历史：

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

...

CENTER was introduced by Netscape before they added support for the
HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its
widespread deployment.

HTML 3.2规范

简而言之，这两个元素都源于对更具语义通用的容器的需求。 Span被提议作为样式文本的元素的更通用替代。 Div被提议作为划分页面的通用方法，并且具有替换