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 参考 here。以上仍然是非法的，因为<span>只接受短语内容，而<div>是流式内容。
您要求提供一些具体示例，因此是从我的保龄球网站 BowlSK 中摘录的：
好吧，怎么回事？
h1
div
跨度
跨度
另请注意，HTML5 包含一组广泛的新元素，这些元素定义了常见的页面结构，例如文章、部分、导航等。
HTML 5 working draft 的第 4.4 节列出了它们并给出了关于它们的用法的提示。 HTML5 仍然是一个有效的规范，所以还没有什么是“最终的”，但是这些元素中的任何一个是否会出现在任何地方都是非常值得怀疑的。如果您想在某些旧版本的 IE 中设置这些元素的样式，则需要使用 javascript hack - 您需要在源中指定任何这些元素之前使用 document.createElement 创建每个元素之一。有很多库可以为您解决这个问题 - 出现了一个快速的 Google 搜索 html5shiv。
为了完整起见，我邀请您这样思考：
HTML 中定义了很多块元素（之前和之后的换行符），还有很多内联标签（没有换行符）。
但是在现代 HTML 中，所有元素都应该具有含义：
是一个段落，
缩进内容是否是引用。那么，当你想做的事情没有意义时，你会怎么做？ 400px 宽的列没有意义，是吗？您只希望您的文本列宽 400 像素，因为这适合您的设计。
出于这个原因，他们在 HTML 中添加了另外两个元素：通用或无意义的元素
和 ，否则，人们会重新滥用那些确实有意义的元素。
很高兴知道，但它没有回答原始问题，因为它没有解释 div 和 span 元素之间的区别。
这里已经有很好的详细答案，但没有视觉示例，所以这里有一个简单的说明：
https://i.stack.imgur.com/wA8PD.png
<div> 是块标记，而 <span> 是内联标记。
<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>
克里斯的回答中已经提到了真正重要的区别。然而，对每个人的影响并不明显。
作为内联元素，<span> 只能包含其他内联元素。因此下面的代码是错误的：
<span><p>This is a paragraph</p></span>
上述代码无效。要包装块级元素，必须使用另一个块级元素（例如 <div>）。另一方面，<div> 只能用于块级元素合法的地方。
此外，这些规则在 (X)HTML 中是固定的，并且不会因 CSS 规则的存在而改变！所以下面的代码也是错误的！
<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></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 的有用样式之一是 inline-block
例子：
http://dustwell.com/div-span-inline-block.html CSS 显示：内联与内联块
我在游戏网络项目中使用 inline-block 取得了巨大成功。
div 是块元素，span 是内联元素，它的宽度取决于它自身的内容，而 div 没有
我想说的是，如果您知道一点西班牙语来查看 this page，那么在哪里可以得到正确解释。
但是，一个快速的定义是 div 用于划分部分，而 span 用于将某种样式应用于另一个块元素（如 div）中的元素。
只是想为 span 与 div 的产生方式添加一些历史背景
span 的历史：
1995 年 7 月 3 日，Benjamin CW Sittler 提出了一个通用文本容器标签，用于将样式应用于某些文本块。除非与样式表一起使用，否则呈现是中性的。关于可读性和含义存在争议。 Bert Bos 通过类属性（具有城市、人员、日期等值）提到了元素的可扩展性。 Paul Prescod 担心这两个元素都会被滥用。他反对文字提到“任何新元素都应该在旧元素上”并添加“如果我们创建一个没有语义的标签，它可以在任何地方使用而不会出错。我们必须强制作者正确标记他们的语义文档。我们必须强制编辑器供应商在他们的界面中做出明确的选择。”
从引入 span 的 RFC 草案中：
首先，在没有其他元素适合的情况下，需要一个通用容器来携带 LANG 和 BIDI 属性；为此目的引入了 SPAN 元素。
div 的历史：
DIV 元素可用于将 HTML 文档构造为分部的层次结构。 ... CENTER 是由 Netscape 在添加对 HTML 3.0 DIV 元素的支持之前引入的。由于其广泛部署，它保留在 HTML 3.2 中。
简而言之，这两个元素都是出于对语义更通用的容器的需求。 Span 被提议作为一个更通用的替代 <text> 元素来样式文本。 Div 被提议作为一种划分页面的通用方法，并具有替换 <center> 标记以使内容居中对齐的额外好处。 Div 一直是块元素，因为它作为分页器的历史。 Span 一直是一个内联元素，因为它最初的用途是文本样式，而今天 div 和 span 都已成为分别具有默认块和内联显示属性的通用元素。
在 HTML 中，有一些标签可以为内容添加结构或语义。例如，<p> 标记用于标识段落。另一个示例是有序列表的 <ol> 标记。
如上所示，当 HTML 中没有合适的标签时，通常会使用 <div> 和 <span> 标签。
<div> 标记用于标识文档的块级部分/分区，该文档前后都有换行符。
可以使用 div 标签的示例是页眉、页脚、导航等。但是在 HTML 5 中已经提供了这些标签。
<span> 标记用于标识文档的内联部分/分区。
例如，span 标签可用于向元素添加内联象形文字。
请记住，基本上他们自己也不执行任何功能。它们不仅仅通过标签来具体说明功能。
它们只能在 CSS 的帮助下进行定制。
现在来到你的问题：
SPAN 标记与一些样式一起在 html 中的一行内保持有用，比如在一个段落中。这是 HTML 中的一种行级别或语句级别。
例子：
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
如上所述的 DIV 标记功能只能在样式的支持下可见，可以容纳大量 HTML 代码。
DIV 是块级别
例子：
<div class="large-time">
<p>Am writing <span class="time"> this answer</span> in my free time of my day.
</p>
</div>
根据您的要求，两者都有自己的时间和情况。
希望答案很清楚。谢谢你。
这很简单。
使用 span 不会影响布局，因为它是内联的（内联（不应该混淆，因为可以包装东西））
使用 div 会影响布局，里面的内容出现在新行（块元素）中，当你要添加的元素没有特殊的语义含义并且你希望它出现在新行中时使用
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
div和span，因为它们没有任何附加意义。div是无意义的通用块级元素，而span是无意义的通用内联元素。