div 与 span

div 和 span 是 HTML 里最常用的两个"容器"标签，用来给内容分组、配合 CSS 做布局。

div：块级容器

div 是块级元素，默认独占一行，用来包裹整块内容：

<div>
  <h2>文章标题</h2>
  <p>这是文章的一段内容。</p>
</div>

两个 div 会上下排列：

<div>第一个盒子</div>
<div>第二个盒子</div>

显示效果：

第一个盒子 第二个盒子

span：行内容器

span 是行内元素，不换行，用来包裹一行里的一小段，便于单独设样式：

<p>今天天气<span>很好</span>，适合出门。</p>

可以给某个词加颜色：

<p>我最喜欢 <span style="color:red">红色</span>。</p>

div vs span 对比

标签	类型	是否换行	用途
div	块级	独占一行	大块内容分区、布局
span	行内	不换行	一行内局部标记

为什么需要它们

HTML 只负责"内容结构"，真正把盒子排成好看的页面靠 CSS。div 和 span 就是给 CSS 提供"抓手"——通过 id 或 class 定位某块内容。

<div class="card">
  <h3 class="card-title">卡片标题</h3>
  <p class="card-body">卡片正文内容。</p>
</div>

注意

不要为了排版乱套 div，能用语义化标签（如 section、article）就用语义化标签，div 是"最后的手段"。