div 与 span：两大通用容器

0. 学习目标（可验证）#

• 能说出 div 和 span 的定位：无语义、纯容器
• 能背出实战口诀：布局找 div，修饰局部文字找 span，有特定含义找语义标签
• 能看懂”全 div 的汤”和”语义标签 + div 容器”两份代码的区别
• 能自己写一个用 div 分组的卡片区域，并用 span 改一句文案中的几个字

1. 一句话理解#

语义化标签（article、nav 等）是”有名字的家具”，而 div 和 span 是”万能的收纳盒”：没有合适的语义标签时，用它们装东西完全正确。

很多教程把”少用 div”讲成”别用 div”，导致新手看到 div 就心虚。真相是：实际开发中 div 是使用率最高的标签之一。这节课解决两个问题——什么时候必须用 div/span，以及怎么用才不会变成”全 div 的汤”。

2. div：块级万能盒子#

<div> 是一个块级容器，没有任何语义含义。它存在的意义只有两个：

1. 布局分组：把相关的元素装进一个盒子里，方便整体排版；
2. 样式钩子：给这个盒子一个 class 或 id，让 CSS 和 JavaScript 能找到它。

<div class="card">
  <h2>课程卡片</h2>
  <p>这是一张卡片的内容。</p>
</div>

使用原则：当没有合适的语义标签（如 article、nav、section）时，就用 div，不要硬凑语义标签，更不要为了”显得高级”乱套标签。

3. span：行内小挂件#

<span> 是一个行内容器，同样没有语义。它用于对一段文字中的局部内容做分组，最常见的用途是配合样式修改几个字的颜色、字号：

<p>这是一段文本，其中 <span style="color: red;">红色部分</span> 是使用 span 标签标记的。</p>

span 不能包块级元素（还记得 002 的嵌套铁律吗），它的舞台始终在文字流内部。

4. 实战口诀#

布局分组找 div
修饰局部文字找 span
有特定含义（导航、文章、页脚）才找语义标签

5. 反例与正解：同一页面两种写法#

反例：全 div 的”汤”#

<div>
  <div>我的博客</div>
  <div>
    <div><a href="#">首页</a></div>
    <div><a href="#">关于</a></div>
  </div>
  <div>
    <div>文章标题</div>
    <div>这是文章正文。</div>
  </div>
  <div>版权信息</div>
</div>

这段代码能显示，但全是匿名盒子：屏幕阅读器读不出”这是导航""这是文章”，CSS 选择器也只能靠层级猜。这就是”滥用 div”。

正解：语义标签 + div 容器#

<header>
  <h1>我的博客</h1>
  <nav>
    <a href="#">首页</a>
    <a href="#">关于</a>
  </nav>
</header>
<main>
  <article>
    <h2>文章标题</h2>
    <p>这是文章正文。</p>
  </article>
</main>
<div class="ad-banner">广告位：这里没有合适语义标签，用 div 完全正确</div>
<footer>
  <p>版权信息</p>
</footer>

讲解：

• header/nav/main/article/footer 表达”这块内容是什么”；
• 广告位只是装饰性容器，没有任何语义，用 div 是正确选择；
• 结论：不禁止 div，只是不要滥用——有语义标签就用语义标签，没有就用 div。

6. 语义化标签先认识一下#

后面 170-SemanticTag 会系统讲解，这里先混个脸熟：

第一遍读到这里的顺序建议是：先用 div/span 把页面搭出来，再回来精读 008。

7. 动手试试#

入门版#

1. 用三个 div class="card" 写三张卡片（每张含一个 h2 和一个 p），让它们一个接一个排；
2. 在一句话里用 span 把”免费”两个字标成红色；
3. 给其中一个 div 加 id="first-card"，其余两个不加，感受 id 和 class 的不同。

进阶版#

1. 把 5 节的反例代码复制到本地运行，再用正解代码运行，用 F12 对比两段代码的语义差异（听不到读屏，就看标签名）；
2. 把”全 div 的汤”改写成”语义 + div”结构，要求导航用 nav、正文用 article、广告位用 div。

8. 常见问题与改进建议#

9. 下一步#

容器有了，接下来给它们”贴标签”：090-HTML5CoreGlobalAttributes 讲 id、class、style 三个属性——它们是 HTML 通往 CSS 和 JavaScript 的通道。