HTML div 与 span — 网页布局基石
HTML div 与 span · 难度：入门 · +10XP
HTML div 与 span
<div>和<span>是HTML中最常用的两个通用容器，本身没有语义，主要用于分组元素和应用CSS样式。
div vs span
| 特性 | <div> | <span> |
|---|---|---|
| 类型 | 块级(Block) | 行内(Inline) |
| 换行 | 独占一行 | 不换行 |
| 宽高 | 可设置 | 由内容决定 |
| 典型用途 | 页面布局容器 | 文字内标记 |
代码示例
<div class="card">
<h3>产品名称</h3>
<p>价格：<span class="price">¥99</span></p>
</div>用div做卡片容器，用span标记价格数字。
何时用div，何时用语义标签？
现代HTML推荐优先使用语义标签（<header>、<nav>、<article>、<section>），它们本身就是div但带有明确的含义。只有在没有合适语义标签时才用<div>。
???? 练习
- 用div创建两张产品卡片
- 用span高亮卡片中的关键词