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

“块元素”的意义是隐含的，但从未明确说明。如果我们忽略所有的理论(理论是好的)，那么下面是一个语用比较。以下几点:

<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不仅不应该内联使用，而且它根本不会产生想要的效果。

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

如果你想对一些内联文本做一些事情，<span>是正确的选择，因为它不会像<div>那样引入换行符。

正如其他人所注意到的，这些都隐含着一些语义，最重要的事实是，<div>暗示了文档中的逻辑划分，类似于文档的一个部分或其他内容，例如:

<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>

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

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

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

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

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

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

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 = "头" > < div id = " userbar " > 嗨，大家好，<span class="username">Chris Marasti-Georg</span> | <a href="/edit-profile.html">Profile</a> | .html < a href = " https://www.bowlsk.com/_ah/logout?..。“>签署< / > < / div > < h1 > < a href = " / " >碗<跨类= >“sk sk < / span > < / > < / h1 > < / div >

Ok, what's going on? At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet.

还要注意的是，HTML5包含了一组广泛的新元素，这些元素定义了常见的页面结构，如article、section、nav等。

Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.

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

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

例子:

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

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