正在加载...

HTML 中的 div

学完 block/inline 后，用 div 盒子来分组。

为什么“无含义”的盒子仍有用

卡片常以带 class 的 div 起步。

直接答案

把相关标记包进 div，加 class；角色清楚时优先语义标签。

一张卡片组

用 div 包住标题与段落。

Grouping with a card div

html

HTML Code

<div class="card">
<h2>Today</h2>
<p>Practice HTML containers with a simple card.</p>
</div>

阅读卡片示例

div 只负责分组
h2/p 仍有含义
class 是钩子

包住两张卡片

外层包装 + 内层卡片。

Wrapper with two cards

html

HTML Code

<div class="card-row">
<div class="card">
<h3>Lesson</h3>
<p>Read the notes once.</p>
</div>
<div class="card">
<h3>Practice</h3>
<p>Rebuild the markup from memory.</p>
</div>
</div>

阅读包装示例

两层足够
子元素保持语义

有含义时优先语义

div 是后备，不是每处首选。

练习

一张卡片
包装里两张
删除空 div
列出三个不该被 div 取代的标签

易错点

div 汤
用 div 代替 p/ul/nav
空包装

小结

通用容器
class 作钩子
清楚时用语义
避免汤

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言