DIV是块级元素，用于布局和结构划分，独占一行可设宽高；SPAN是行内元素，用于修饰文本内容，不换行且不可直接设宽高；通过CSS的display属性可改变其显示行为，选择时应基于语义和布局需求。
DIV 和 SPAN 是 HTML 中最常用的两个容器标签，它们本身不带有语义，主要用于对内容进行分组或样式控制。它们的核心区别在于默认的显示类型：DIV 是块级元素，SPAN 是行内元素。这个差异直接影响了它们在页面布局中的行为。
块级元素（DIV）的特点与使用场景
块级元素在页面中独占一行，会自动从新的一行开始，并尽可能撑满父容器的宽度。DIV 就是典型的块级元素。
- 总是在新行上开始渲染
- 可以设置宽度、高度、内外边距等尺寸属性
- 可以作为其他 HTML 元素的容器，构建页面结构（如头部、侧栏、内容区）
- 常用于布局划分，配合 CSS 实现栅格系统或响应式设计
这是一个 DIV 区块
它上下都会换行，并占据整行宽度。
行内元素（SPAN）的特点与使用场景
行内元素不会打断文本流，和其他行内元素在同一行显示，只占用其内容所需的空间。SPAN 是典型的行内元素。
- 与其他行内元素共享同一行
- 不能直接设置宽度和高度（除非改变 display 类型）
- 常用于对文本中的某一部分应用样式或脚本操作
- 适合包裹小段文字、关键词、链接部分等
这是一段文字，其中这部分用 SPAN 标红，其余保持原样。
CSS 可以改变显示行为
虽然 DIV 默认是块级、SPAN 默认是行内，但通过 CSS 的 display 属性可以改变它们的显示方式。
- 将 DIV 设置为
display: inline后，它将与其他行内元素并排显示 - 将 SPAN 设置为
display: block后，它将独占一行，可设宽高 - 更灵活的现代布局中，也常用
display: flex或grid来控制布局
这意味着选择 DIV 还是 SPAN，更多应基于语义和初始布局需求，而非功能限制。
如何选择使用哪个标签？
基本原则是：需要结构性容器时用 DIV，需要修饰局部内容时用 SPAN。
- 如果目标是组织区块、划分区域、做布局容器 —— 选 DIV
- 如果只是想给一段文字中的几个字加样式或绑定事件 —— 选 SPAN
- 优先考虑语义清晰和代码可读性，而不是单纯依赖标签功能
基本上就这些。理解块级与行内元素的本质区别，才能更合理地使用 DIV 和 SPAN，写出结构清晰、易于维护的 HTML 代码。
