HTML br 标签：换行方法及与 p、wbr、pre 的区别

HTML <br> 在文本的指定位置插入换行。当行分隔本身很重要时使用，例如在诗歌或邮政地址中。使用 p 分隔不同段落，并通过 CSS 控制间距。

br 语法和源代码中的换行

br 是一个空元素，没有内容或结束标签。在 HTML 中编写 <br>，而不使用 </br>。HTML 也接受 <br />，但斜杠并不是造成换行的原因。

在普通默认样式下，源代码中的换行和连续空格会被折叠。br 指定内容中的换行，而独立于源格式。这也不同于屏幕变窄时文本自然换行的情况。

完整示例：比较源代码换行、br 和段落

将以下文档保存为 line-breaks.html 并在浏览器中打开。它以不同结构展示相同的短文本，以便你比较结果。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>比较换行与段落</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>比较换行</h1>
  <h2>仅在源代码中换行</h2>
  <p id="source-only">第一行
    第二行</p>
  <h2>使用 br 换行</h2>
  <p id="with-br">第一行<br>第二行</p>
  <h2>不同的段落</h2>
  <p class="message">这是关于第一个主题的段落。</p>
  <p class="message">这是关于第二个主题的段落。</p>
</body>
</html>

第一部分连续显示为 第一行 第二行；第二部分在 br 后换行。最后两句话为单独段落，CSS 间距为 1rem。一个非常窄的窗口也可能使第一部分换行，但这并不是 br 指定的换行。

在 br、p、wbr 和 pre 之间进行选择

在每个句子后插入 br 以强制形成视觉上令人满意的长度，可能会在小屏幕或大字体时产生尴尬换行。请让普通文本自然换行。如果需要保留已编写的空格和行分隔，请参见 HTML pre 空格与换行指南。

使用 CSS 控制空白和段落间距

重复使用 br 元素来创建空白空间可能会将语义上不同的段落合并为一个，使屏幕阅读器的段落导航变得更加困难。使用 p 创建新段落，使用 margin 创建间距。在段落中控制行高可使用 line-height。

不要将过时的 clear 属性或在 br 本身上使用的边距作为布局工具。应将有意义的行分隔与视觉布局分开管理，以确保文本在不同屏幕宽度和字体大小下仍然可读。MDN 的 br 元素参考 解释了语法和可访问性。