正在加载...

HTML 块级与行内

学完表格后，看页面流：每个元素都有默认 display。初学者面对两个家族：block 与 inline。

这里的“流”指什么

尚未写布局 CSS 时的默认排布。段落是 block；链接在句中保持 inline。

直接答案

Block：p、div、标题、列表、table。Inline：a、strong、em、span、code。先记住默认。

📊 Common defaults

Category Examples Flow habit
Block p, div, h1–h6, ul, ol, section, table New line, full available width (typical)
Inline a, strong, em, span, code Continues inside the text line

块盒里的行内片段

p 是块容器；a/strong 留在行内。后面的 div 打开新块。

Block paragraph with inline pieces

html
HTML Code 
<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

阅读段落示例

  • p 拥有段落盒
  • a 与 strong 在行内
  • 下方 div 是另一个 block

div 与 span

div 默认 block；span 默认 inline。句中短短语用 span。

div versus span contrast

html
HTML Code 
<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

阅读 div/span 示例

  • span 留在行内
  • div 独占一行 block

CSS 之后可改 display

先学默认，才能识别覆盖。

练习

  1. 两个 p 堆叠
  2. 一段中两个 a
  3. 比较 span 与 div
  4. strong 不强制换行
  5. 每类写三个标签

易错点

  • 每个小短语都用 div
  • 以为 strong 一定换行
  • 忘记 CSS 可覆盖

小结

  • Block ≈ 新行
  • Inline ≈ 行内
  • 短钩子用 span
  • CSS 在后

🧠 测试您的知识

准备开始

测试您的知识

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

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

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