HTML 零基础教程

HTML 段落 <p> 标签

在 HTML 中，我们使用 <p> 标签来定义段落。

理解如何正确使用 <p> 标签以及如何控制换行，有助于在网页上有效展示文本。

本章将深入探讨 <p> 标签和 <br> 标签，包括它们的用法、属性以及最佳实践。

1. <p> 标签：定义段落（Paragraph）

HTML 中的 <p> 标签定义一个段落。

  • 块级元素：它是一个块级元素，这意味着它总是从新的一行开始，并且占据可用的全部宽度。
  • 自动间距：浏览器会自动在每个 <p> 元素的前后添加一些空白（外边距 margin），以便在段落之间通过视觉进行分隔。

1.1 基本用法

最简单的方法是将你的文本包裹在 <p> 开始标签和 </p> 结束标签之间。

<p>这是第一段文字。它的上方和下方会有边距，将其与页面上的其他元素隔开。</p>

<p>这是第二段。请注意浏览器是如何自动在段落之间添加间距的。</p>

1.2 段落属性（现代 HTML5）

虽然 <p> 标签本身没有什么特殊的独有属性，但它支持所有 HTML 元素通用的全局属性。

  • class：用于给段落应用 CSS 样式。
  • id：提供唯一的标识符，用于 CSS 样式或 JavaScript 操作。
  • style：允许直接写内联 CSS 样式（通常不推荐，建议用外部样式表）。
  • title：当用户把鼠标悬停在段落上时显示提示工具（Tooltip）。
<p id="intro-paragraph" class="highlighted-text">
    这是一个带有唯一 ID 和 CSS 类的介绍性段落。
</p>

<p title="这是关于公司使命的段落。">
    我们的使命是为客户提供高质量的产品和服务。
</p>

1.3 禁止嵌套

重要提示：你不能在 <p> 标签内部嵌套另一个 <p> 标签。

HTML 规范不允许这样做。如果你尝试这样做，浏览器通常会试图“修正”代码，这往往会导致不可预测的显示结果。

错误示例

<p>这个段落包含另一个 <p>段落。</p></p>

正确做法：如果你需要在一个段落内区分样式，请使用 <span> 标签或其他语义化元素（我们在后续章节会讲到）。

<p>这个段落包含另一个 <span>段落。</span></p>

2. 换行：<br> 标签

<br> 标签用于在文本中插入一个简单的换行符。

  • 空元素：它没有结束标签（不需要写 </br>）。
  • 原则：请仅在语义上确实需要换行时使用它，而不要仅仅为了视觉间距而使用。

2.1 何时使用 <br>？

适合使用 <br> 的场景通常是那些换行本身就是内容一部分的情况：

  1. 地址：分隔街道、城市、邮编。
  2. 诗歌：保留诗人原有的断句。
  3. 歌词：保持主歌和副歌的结构。

示例：地址

<p>Adventure Awaits<br>
主街 123 号<br>
某某市, 北京 91234</p>

示例：诗歌

<p>
未选择的路 (作者: Robert Frost)<br>
黄色的树林里分出两条路，<br>
可惜我不能同时去涉足，<br>
我在那路口久久伫立，<br>
我向着一条路极目望去，<br>
直到它消失在丛林深处。
</p>

2.2 何时不要使用 <br>？

切勿为了纯粹的视觉格式化（例如在段落之间制造更大的空白）而使用 <br> 标签。这是 CSS（外边距 margin 和内边距 padding）的工作。

滥用 <br> 会让你的 HTML 语义不明确，且难以维护。

错误的用法（用于间距）：

<p>这是第一段。</p>
<br><br>  <p>这是第二段。</p>

正确的用法（使用 CSS 控制间距）：

<head>
<style>
  p {
    margin-bottom: 20px; /* 在每个段落下方增加 20 像素的间距 */
  }
</style>
</head>
<body>
  <p>这是第一段。</p>
  <p>这是第二段。</p>
</body>

2.3 <br> 与无障碍性

滥用 <br> 标签会严重影响无障碍体验。

屏幕阅读器可能会将连续的多个 <br> 标签解释为显著的停顿，从而打断残障用户的阅读流畅度。请始终优先使用语义化的 HTML 和 CSS 来进行视觉排版。