HTML <br> 标签用于在文本中换行。当需要分割一条线时。作为一个空标签,它不依赖于结束标签。<br> 标签的行为就像在 HTML 代码中使用 Word 工作站中的回车键一样。
在 HTML 中,段落通常以新行开头,但如果您希望段落中的内容以新行开头,该怎么办?在这种情况下,我们将使用 HTML 换行符<br> 标签。
语法
<br>
属性
HTML <br> 标签支持 HTML 的 全局属性 和 事件属性。下面还列出了一个特定的属性。
<br> 标签支持以下属性:
属性 | 值 | 描述 |
---|---|---|
clear | 无值 | 这样可以确保换行符“清除”浮动或对齐的元素在其上方。 |
<br> 标签示例
在下面的例子中,我们将见证 <br> 标签在 HTML 文档中的用法,以及我们可以在网页上以多种方式使用 <br> 标签。
中断段落元素
在下面的示例中,让我们看看 HTML 文档中<br> 标签的用法。
<!DOCTYPE html>
<html>
<body>
<p>
匆匆一年而过又到了一个全家团圆、举国欢庆的日子,
在这里感谢所有同事的默默付出,<br>感谢所有客户的信任和支持,祝大家新的一年万事如意。
</p>
</body>
</html>
对输入字段使用 <br> 标签
以下示例,我们将使用 <br> 标签在新行中显示每个输入字段。
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text" placeholder="输入名字" />
<br>
<input type="phone" placeholder="输入手机号码" />
<br>
<input type="email" placeholder="输入电子邮箱" />
</form>
</body>
</html>
在段落上应用“清除”属性
让我们看一下另一个场景,我们将在 <br> 标签上使用 clear 属性。没有浮动元素,因此输出看起来很正常。
<!DOCTYPE html>
<html>
<body>
<p>
匆匆一年而过又到了一个全家团圆、举国欢庆的日子,<br>
在这里感谢所有同事的默默付出,<br>感谢所有客户的
信任和支持,<br clear>祝大家新的一年万事如意。
</p>
</body>
</html>
注意:不要使用 <br> 标签在段落或任何文本元素上设置边距或填充。
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<br> | Yes | Yes | Yes | Yes | Yes |