在这篇文章中,我将解释什么是换行符,并告诉你如何在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
,是内联元素,所以第二个链接不是显示在下一行,而是像这样显示在同一行。
你可以在链接之间使用br
标签来断开第一个链接行:
<div>
<a href="https://google.com">Google</a>
<br />
<a href="https://twitter.com">Twitter</a>
</div>
结论
HTML中的br
标签在新的一行开始下一个元素,类似于字符串中的回车键\n
。
与其使用块元素将元素放在新的一行,不如使用断行标签:br
。
在像句子这样的情况下,使用br
标签作为视觉上的换行,并不影响无障碍性。屏幕阅读器会按原样阅读该句子,没有停顿。