HTML换行 - 如何用BR标签添加换行符(附实例)

728 阅读2分钟

在这篇文章中,我将解释什么是换行符,并告诉你如何在HTML中创建换行符。

什么是断行?

断行,顾名思义,是指行的断裂😅。在HTML中,断行是指一个行的水平结束点,而下一行则在新的行上开始。

在HTML中,当你写一个像这样的字符串时:

<p>
    Hello, I am
    trying to create a
    new line
</p>

空格("Hello "前的制表符空格,"am "和 "try "之间的空格,"a "和 "new")将被忽略。屏幕上的结果会是这样的:

Hello, I am trying to create a new line

解决这个问题的一个方法(尽管不是很有效)是像这样创建三个<p> 标签:

<p>Hello, I am</p>
<p>trying to create a</p>
<p>new line</p>

这将导致以下结果:

Hello, I am
trying to create a
new line

因为p 标签创建了block 元素,它们占据了整个水平空间,而下一个元素则进入了下一行--从上面的结果可以看出。

这个解决方案是无效的,因为你已经创建了三个段落。在屏幕阅读器要解释的情况下,它将会把它读成三个段落,而不是一个句子。这可能会影响网络可访问性。

那么,你如何为内联元素添加换行符?

如何在HTML中添加换行符

HTML有许多用途的标签,包括创建换行符。你可以使用HTML中的br 标签来添加换行符。它可以放在内联元素之间,将元素分成多个部分。

下面是一个使用br 标签的段落的例子:

<p>
    Hello, I am
    <br />
    trying to create a
    <br />
    new line
</p>

br 标签是一个没有关闭标签的无效元素。相反,它是一个自我关闭的标签。

上述代码的结果是这样的:

Hello, I am
trying to create a
new line

你可以将这个标签用于其他形式的内联元素,如链接。例如,请看这段代码:

<div>
    <a href="https://google.com">Google</a>
    <a href="https://twitter.com">Twitter</a>
</div>

锚点标签,a ,是内联元素,所以第二个链接不是显示在下一行,而是像这样显示在同一行。

image-50

你可以在链接之间使用br 标签来断开第一个链接行:

<div>
    <a href="https://google.com">Google</a>
    <br />
    <a href="https://twitter.com">Twitter</a>
</div>

image-51

结论

HTML中的br 标签在新的一行开始下一个元素,类似于字符串中的回车键\n

与其使用块元素将元素放在新的一行,不如使用断行标签:br

在像句子这样的情况下,使用br 标签作为视觉上的换行,并不影响无障碍性。屏幕阅读器会按原样阅读该句子,没有停顿。