通用容器

在实际开发中，我们经常会遇到这样一种情况：页面结构复杂多变，现有的语义化标签（比如 <header>、<nav>、<section>、<article> 等）都无法准确表达某一块内容的具体含义。 这个时候，<div> 和 <span> 就像是我们网页布局的“万能胶水”——它们没有固定的语义，可以灵活地承载任何内容，帮助我们实现各种布局和样式需求。

块级容器 <div>

<div> (division) 是一个“块级（block-level）”的通用容器。想象它就是一个没有任何特殊标识的、方方正正的纸箱。它的主要作用就是将一大块相关的内容“装箱”，以便我们作为一个整体来移动、装饰或管理它。 什么时候使用 <div>？当你想将一块内容组合在一起，但 <header>, <section>, <article> 等语义化标签在意义上都不适用时。最常见的场景就是纯粹为了页面布局和CSS样式。

比如，你想创建一个“卡片式”的布局来展示产品：

|
<div class="product-card">
  <img src="laptop.jpg" alt="一台笔记本电脑">
  <h2>高性能笔记本电脑</h2>
  <p>搭载最新处理器，16GB内存...</p>
  <div class="price-tag">$999</div>
</div>

在这个例子中，最外层的容器<div>，我们称之为 product-card，它整体代表一个产品卡片。用 <article> 似乎也可以，但如果我们觉得这个“卡片”的独立性还没那么强，或者它纯粹是一个视觉设计的概念，那么用 <div> 就非常合适。 卡片内部的价格标签 price-tag，它在语义上不是页脚也不是任何其他东西，用 <div> 来包裹它以便单独设置样式，也是完美的用法。

行内容器 <span>

<span> 是一个“行内（inline-level）”的通用容器。如果说 <div> 是一个大纸箱，那么 <span> 就是一个小小的塑料袋。它用来包裹一小段文字或行内元素，通常是为了给这部分内容添加独特的样式，或者用JavaScript选中它。 它与<div>最大的不同是，它不会打断文本的流动。

假设你想让一句话中的某个词变成红色来突出显示：

|
<p>我们的产品具有 <span>划时代</span> 的意义。</p>

如果你在这里误用了<div>：

|
<!-- 错误用法 -->
<p>我们的产品具有 <div>划时代</div> 的意义。</p>

“划时代”这三个字就会被强制换行，因为它是一个块级元素。而<span>则会乖乖地待在原地，不破坏句子的结构，只为我们提供一个可以施加样式的“钩子”。

核心概念：块级元素 vs. 行内元素

<div> 和 <span> 的区别，引出了HTML中一个极其重要的概念：块级元素 (Block-level Elements) 和 行内元素 (Inline-level Elements)。

至此，你已经掌握了HTML中用于构建结构和语义的所有关键“积木”。接下来，我们将学习一些零散但同样有用的知识点，来完善你的技HTML能库。