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

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

例子:

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

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

为了完整起见，我建议你这样思考:

There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks). But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> 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 <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

在HTML中，有一些标记为内容添加结构或语义。例如，<p>标记用于标识一个段落。另一个例子是有序列表的<ol>标记。

如上面所示，当HTML中没有合适的标记时，通常会使用<div>和<span>标记。

<div>标记用于标识文档的块级节/除法，该节/除法前后都有换行符。

可以使用div标签的例子有页眉、页脚、导航等。然而在HTML 5中，这些标记已经提供了。

<span>标记用于标识文档的内联节/分。

例如，span标记可用于向元素添加内联象形文字。

这很简单。

span的使用不会影响布局，因为它是内联的(在行中(不应该混淆，因为东西可以被换行)) 使用div会影响布局，里面的内容会出现在新行(block element)中，当你想添加的元素没有特殊的语义，而你想让它出现在新行中时，使用<div>。

正如在其他回答中提到的，默认情况下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。(当然，前提是没有合适的语义元素)。