在网页排版中，控制文本的间隔和换行是最基础也是最重要的技能之一。虽然CSS提供了强大的间距控制能力，但在某些特定场景下，HTML原生的换行符——<br/>标签，依然有着不可替代的作用。本文将详细讲解HTML换行符的用法，并分享3种最常用的<br/>标签应用场景，帮助你更精准地控制文本间隔。
一、 什么是HTML换行符？
<br/>（Break的缩写）是HTML中的一个空元素，意味着它没有闭合标签。在HTML5标准中，只需写作<br>即可；而在早期的XHTML规范中，要求写成<br />。它的核心作用是在文本中插入一个简单的换行符，使其后的内容从下一行开始显示，且行距等于正常的文本行高，不会产生段落之间的额外空白。
二、 控制文本间隔的3种br标签场景
场景1：诗歌与地址排版
在排版诗歌、歌词或通讯地址时，我们需要保持内容的连贯性，同时又在特定位置强制换行。如果使用</p><p>（段落）标签，段落之间会产生较大的垂直间距，破坏了整体的紧凑感。此时，<br/>标签是最佳选择。
<address> 某某科技公司<br> 某某省某某市某某区<br> 高新技术产业园123号 </address>
在这个场景中，<br/>让地址的每一部分独占一行，但整体依然属于同一个<address>块，视觉上紧凑且语义准确。
场景2：表单标签与输入框对齐
在构建传统的垂直排列表单时，我们经常需要让标签文本和输入框在同一列显示。虽然现代布局多采用CSS的Flexbox或Grid，但在一些快速原型开发或简单表单中，使用<br/>标签让输入框换行显示依然非常高效。
<form action="www.ipipp.com/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <input type="submit" value="登录"> </form>
通过在<input/>标签后添加<br/>，下一个标签和输入框会自动换到下一行显示，实现了简单的垂直流式布局。
场景3：段落内强制换行
有时候，我们需要在一个段落内部强制换行，但又不希望开启一个新的段落。例如，在对话场景中，或者为了适应特定的UI设计宽度，需要在长文本的特定位置断句。
<p> “今天天气真好，”他说，“我们去公园散步吧。”<br> “好啊，”她回答，“顺便去喝杯咖啡。” </p>
在这个例子中，两个人的对话同属一个段落，但通过<br/>实现了发言的换行，既保持了语意的完整性，又提升了阅读体验。
三、 避坑指南：不要用br标签增加段落间距
很多初学者在需要增加段落之间的垂直间距时，会习惯性地连续使用多个<br/>标签，这是一种非常不好的习惯。<br/>标签的语义是“换行”，而不是“增加空间”。滥用<br/>会导致页面结构混乱，且在不同设备上的响应式表现极差。
控制元素之间的垂直间距，应该交由CSS的margin或padding属性来完成。
<!-- 错误示范：使用br增加间距 --> <p>第一段内容</p> <br><br><br> <p>第二段内容</p> <!-- 正确示范：使用CSS增加间距 --> <p style="margin-bottom: 30px;">第一段内容</p> <p>第二段内容</p>
总结
HTML换行符<br/>是一个简单但功能明确的标签。在诗歌地址排版、表单流式布局以及段落内强制换行这3种场景下，它能精准控制文本间隔，发挥出不可替代的作用。但在使用时，务必牢记它的语义是“换行”，段落间的空白间距应始终交给CSS来处理，这样才能写出结构清晰、易于维护的优质代码。