br 换行
<br> 标签用于在文本中插入一个换行符（line break），产生强制换行效果。<br> 是一个空元素（void element），不需要结束标签。
前置知识
阅读本节前，建议先了解：span 通用行内容器
基础概念
<br> 是 HTML 中的换行标签。在正常情况下，HTML 会忽略源代码中的换行符，<br> 则是显式告诉浏览器"在此处换行"。它是一个空元素，写作 <br> 或 <br/>。
慎用 br
<br> 应只在有语义需要时使用（如诗歌、地址），不应用于创建段落间距或布局间距。
语法
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>br 换行示例</title>
</head>
<body>
<p>第一行文字。<br>第二行文字。<br>第三行文字。</p>
</body>
</html>详细说明
br 的适用场景
诗歌排版：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>诗歌排版</title>
</head>
<body>
<h1>静夜思</h1>
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>
</body>
</html>地址格式：
html
<address>
北京市<br>
海淀区中关村大街1号<br>
某某科技有限公司<br>
邮编：100080
</address>签名格式：
html
<p>
此致敬礼<br>
<br>
张三<br>
2025年1月15日
</p>不推荐的使用场景
html
<!-- 不推荐：用 br 创建段落间距 -->
<p>段落一。</p>
<br><br>
<p>段落二。</p>
<!-- 正确：用 CSS margin 控制间距 -->
<p>段落一。</p>
<p style="margin-top: 1.5rem;">段落二。</p>br 与段落间距的区别
| 需求 | 推荐方案 | 不推荐 |
|---|---|---|
| 诗歌换行 | <br> | - |
| 地址换行 | <br> | - |
| 段落间距 | CSS margin | 多个 <br> |
| 段落分隔 | <p> 标签 | <br> |
实战示例
诗歌展示页面
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>诗歌展示</title>
<style>
body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: "KaiTi", "STKaiti", serif; }
h1 { text-align: center; }
.poem { text-align: center; line-height: 2.5; font-size: 1.25rem; }
.poem-author { text-align: right; color: #888; }
</style>
</head>
<body>
<h1>登鹳雀楼</h1>
<p class="poem">
白日依山尽，<br>
黄河入海流。<br>
欲穷千里目，<br>
更上一层楼。
</p>
<p class="poem-author">—— 王之涣</p>
</body>
</html>注意事项
- 不要用多个
<br>创建间距 - 不要用
<br>替代段落标签<p> - 诗歌等需要保持换行格式的场景更适合使用
<pre>
最佳实践
- 用于语义换行：诗歌、地址、签名等
- 不要创建间距：段落间距用 CSS
margin - 不要替代段落：不同段落用
<p>标签 - 考虑 pre 标签：如果需要保留大量换行格式
下一节
继续学习：wbr 换行时机