HTML <br> 标签详解：创建换行的标准方法
HTML（HyperText Markup Language，超文本标记语言）是构建互联网内容的基础语言。它通过一系列标签定义网页的结构和内容，其中 <br> 标签作为实现文本换行的重要工具，在内容排版中具有不可替代的作用。本文将详细讲解 <br> 标签的功能、语法及应用场景。
什么是 <br> 标签？
在常规文本编辑软件（如 Microsoft Word）中，用户可通过按下 Enter 键实现换行。而在 HTML 中，要实现类似效果则需要使用 <br> 标签（break 的缩写）。该标签属于空元素（void element），意味着它不需要闭合标签，其作用是在当前位置插入一个换行符。
基本语法和用法
<br> 标签的语法非常简单，直接在需要换行的位置插入即可：
<p>
这是第一行<br>
这是第二行<br>
这是第三行
</p>
实际应用示例
示例 1：诗歌排版应用
观察以下未使用 <br> 标签的诗歌显示效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号编程学习示例</title>
</head>
<body>
<h2>欢迎来到代码号学习平台</h2>
<div>
假如生活欺骗了你
不要悲伤，不要心急
忧郁的日子里需要镇静
相信吧，快乐的日子将会来临
</div>
</body>
</html>
输出效果分析：所有文本内容将会连续显示在一行中，失去了诗歌的分行格式。
示例 2：使用 <br> 标签优化排版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号编程学习示例</title>
</head>
<body>
<h2>欢迎来到代码号学习平台</h2>
<div>
假如生活欺骗了你<br>
不要悲伤，不要心急<br>
忧郁的日子里需要镇静<br>
相信吧，快乐的日子将会来临
</div>
</body>
</html>
输出效果分析：每行诗句都正确换行显示，保持了诗歌的原始格式。
<br> 标签的属性说明
虽然 <br> 标签是空元素，但它仍然支持以下两类属性：
1. 全局属性
-
accesskey：指定激活元素的快捷键 -
autocapitalize：控制自动大写行为 -
class：为元素指定类名 -
contenteditable：设置元素内容是否可编辑
2. 事件处理属性
-
onabort：中断加载时触发 -
onautocomplete：自动完成时触发 -
onautocompleteerror：自动完成错误时触发 -
onblur：失去焦点时触发
样式化 <br> 标签
虽然 <br> 标签本身主要用于结构目的，但可以通过 CSS 控制其相邻内容的样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号编程学习示例</title>
<style>
.address-box {
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.address-line {
line-height: 1.8;
}
</style>
</head>
<body>
<h2>代码号联系信息</h2>
<div class="address-box">
<div class="address-line">
代码号教育科技有限公司<br>
北京市海淀区中关村大街<br>
科技园区3号楼<br>
邮编：100080
</div>
</div>
</body>
</html>
<br> 与 <br/> 的区别
在 HTML5 标准中，<br> 和 <br/> 都是有效的写法，但有以下细微区别：
-
HTML5：推荐使用
<br>语法 -
XHTML：要求使用自闭合标签
<br/>
对于现代网页开发，建议使用 <br> 格式，因为它更简洁且符合HTML5标准。
本节课程知识要点
-
<br>标签用于在HTML中创建换行，是空元素不需要闭合 -
该标签在诗歌、地址显示和对话格式等场景中特别有用
-
虽然支持一些全局属性和事件属性，但通常不需要使用
-
在HTML5中推荐使用
<br>而不是<br/> -
过度使用
<br>标签进行布局控制不是实践，应使用CSS进行页面布局
实际应用案例
案例 1：联系信息格式化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号联系我们</title>
</head>
<body>
<div class="contact-info">
<h3>联系我们</h3>
<p>
代码号教育科技有限公司<br>
地址：北京市海淀区中关村大街科技园区<br>
电话：400-123-4567<br>
邮箱：alan@ebingou.cn<br>
网站：https://www.ebingou.cn/
</p>
</div>
</body>
</html>
案例 2：歌词显示格式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号音乐歌词展示</title>
</head>
<body>
<div class="lyrics">
<h4>春天的故事</h4>
<p>
春天在哪里呀<br>
春天在哪里<br>
春天在那青翠的山林里<br>
<br>
这里有红花呀<br>
这里有绿草<br>
还有那会唱歌的小黄鹂
</p>
</div>
</body>
</html>
<br> 标签是HTML中实现简单换行的有效工具，特别适用于需要保留特定文本格式的场景。虽然它在现代网页设计中的使用有所减少（被CSS布局技术替代），但在处理内联文本换行方面仍然具有实用价值。
