HTML 换行

HTML 中的换行符标签用于换行并将文本放在新行上。

在 HTML 中,我们使用 <br> 标签来创建换行。例如,

<p>
  Use the <br> br tag <br> to create line breaks in text.
</p>

浏览器输出

HTML Line Breaks inside a paragraph

在上面的代码中,如果您仔细观察,会发现 <br> 没有闭合标签。这是因为 <br> 标签是一个空标签,这意味着它不需要闭合标签。

正如您所见,<br> 标签在不需要创建新段落的情况下添加了一个新行。

换行符对于编写结构化文本(如地址和诗歌)很有用,而无需创建多个段落。

An example showing use of like breaks in a poem and address

换行符与多个段落

我们知道,HTML 段落总是从新行开始,因此除了换行符,我们还可以使用多个段落。例如,

<p>Use the</p>
<p> br tag</p>
<p> to create line breaks in text.</p>

浏览器输出

Using HTML paragraphs instead of line breaks

我们可以看到,我们已成功使用多个段落应用了换行。但是,这种方法有几个缺点

  • 屏幕阅读器将每个段落视为独立的句子。也就是说,使用br 标签创建文本中的换行。将被读作不同的句子,这会给用户带来混淆。
  • 每个段落都有自己的默认样式,因此使用多个段落会在行之间产生不必要的边距和填充,使其看起来不那么连续。您也可以在上面的输出中看到这一点。

示例:使用 HTML <br> 和 <p> 进行换行

  <p>Roses are red</p>
  <p>Violets are blue</p>
  <p>HTML is Fun</p>
  <p>and so are You!</p>
  
    
  <p>
    Roses are red <br>
    Violets are blue <br>
    HTML is fun <br>
    and so are You!
  </p>

浏览器输出

Multiple HTML paragraphs vs linebreaks inside single paragraph

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战