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

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.

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

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

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.

语义

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。(当然，前提是没有合适的语义元素)。

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

<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是一个内联元素。

这意味着要在语义上使用它们，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.