正在加载...

HTML 段落

你已经会用标题标记标题和章节。页面上大部分可读的正文属于段落。本课聚焦 p 元素——如何编写、浏览器如何显示，以及它与编辑器中空行有何不同。

什么是 HTML 段落？

HTML 段落是用 p 元素标记的文本块。用 <p> 打开，写入文字，再用 </p> 关闭。段落用于普通句子和较短的正文内容块，不是页面标题（标题用 heading）。

直接回答

把每一段正文分别包在自己的 p 标签里。浏览器把每个 p 当作一个段落，通常会在前后加间距。在 HTML 文件里多次按 Enter 不会产生同样的间距——除非使用正确的元素，否则浏览器会折叠源码中多余的空白。

两个段落

html
HTML Code 
<p>HTML 段落容纳普通正文。</p>
<p>每个段落都是各自的内容块。</p>

阅读示例

  • 第一个 <p>…</p> 是一个段落
  • 第二个 <p>…</p> 是另一个段落
  • 浏览器把它们显示为分开的块，通常中间有间距
  • 标签之间的文字就是读者看到的内容

源码里的空白不是版式

在编辑器里可以按 Enter，让 HTML 文件更易读。这并不表示浏览器会把那些空行显示成大片空白。真正的段落分隔要用独立的 p 元素。同一思路内的换行——比如短地址或诗行——可以用 <br>（在元素课里简要见过）。

带换行的段落

html
HTML Code 
<p>
学习中心<br>
河滨路 12 号<br>
示例城市
</p>

宁可写段落，也不要用空间距技巧

不要为了把内容往下推而堆叠空的 <p></p>。如果其实是多个想法，不要把整篇文章塞进一个巨大的段落。把想法拆成清晰的 p 块。之后 CSS 会控制间距和字体；HTML 应标记真实的文本结构。

亲自试一试

  1. 打开基础 HTML 骨架
  2. 添加一个 h1，下面再加两个短段落
  3. 添加第三个段落，用 <br> 写一段短的多行地址
  4. 保存并在浏览器中打开页面
  5. 把看到的效果与源文件中的空行对比

常见错误

  • 依赖源码空行而不是分开的 p 标签
  • 只需要普通正文句子时却使用标题
  • 仅为增加垂直空白而创建空段落
  • 长段落忘记写结束的 </p>
  • 把整页互不相关的想法放进一个 p

小结

  • 正文通常属于 p 元素
  • 每个段落应是自己的 <p>…</p> 块
  • 浏览器通常会在段落之间加间距
  • 源码里多按 Enter 不等于真正的版式间距
  • 需要时在段落内用 <br> 换行
  • 结构放在 HTML；间距稍后用 CSS 调整

🧠 测试您的知识

准备开始

测试您的知识

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

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

📝 说明

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