通用容器
在实际开发中，我们经常会遇到这样一种情况：页面结构复杂多变，现有的语义化标签（比如 <header>、<nav>、<section>、<article> 等）都无法准确表达某一块内容的具体含义。
这个时候，<div> 和 <span> 就像是我们网页布局的“万能胶水”——它们没有固定的语义，可以灵活地承载任何内容，帮助我们实现各种布局和样式需求。
块级容器 <div>
<div> (division) 是一个“块级（block-level）”的通用容器。想象它就是一个没有任何特殊标识的、方方正正的纸箱。它的主要作用就是将一大块相关的内容“装箱”，以便我们作为一个整体来移动、装饰或管理它。
什么时候使用 <div>？当你想将一块内容组合在一起，但 <header>, <section>, <article> 等语义化标签在意义上都不适用时。最常见的场景就是纯粹为了页面布局和CSS样式。
比如，你想创建一个“卡片式”的布局来展示产品：
html
<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>最大的不同是，它不会打断文本的流动。
假设你想让一句话中的某个词变成红色来突出显示：
html
<p>我们的产品具有 <span>划时代</span> 的意义。</p>如果你在这里误用了<div>：
html
<!-- 错误用法 -->
<p>我们的产品具有 <div>划时代</div> 的意义。</p>“划时代”这三个字就会被强制换行，因为它是一个块级元素。而<span>则会乖乖地待在原地，不破坏句子的结构，只为我们提供一个可以施加样式的“钩子”。
核心概念：块级元素 vs. 行内元素
<div> 和 <span> 的区别，引出了HTML中一个极其重要的概念：块级元素 (Block-level Elements) 和 行内元素 (Inline-level Elements)。
理解了块级和行内这两个概念，你对HTML页面排版和布局的理解会上升一个全新的台阶。你会明白为什么有些元素会换行而有些不会，为什么给某个元素设置宽度却不起作用。
- 当需要一个块级容器，但没有语义上合适的标签时，请使用
<div>。 - 当需要一个行内容器，用于包裹局部文本时，请使用
<span>。
至此，你已经掌握了HTML中用于构建结构和语义的所有关键“积木”。接下来，我们将学习一些零散但同样有用的知识点，来完善你的技HTML能库。