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

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>这是一个div <div>这是一个div <div>这是一个div <span>这是一个span <span>这是一个span <span>这是一个span

<div>是块标记，而<span>是行内标记。

Div是一个块元素，span是一个内联元素，它的宽度取决于它自己的内容，而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.

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

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

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

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

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

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