Web学习网站

Appearance

<br> 标签 ​

<br> 标签在 HTML 文档中插入一个换行符。它是一个自闭合标签，不需要结束标签。

概述 ​

<br> 标签用于在文本中强制换行。它在需要控制文本换行但不想使用段落标签的情况下非常有用。

语法 ​

html
<br>

在 XHTML 中，也可以写成：

html
<br />

基本用法 ​

诗歌或地址 ​

html
<p>
  静夜思<br>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>

地址信息 ​

html
<address>
  张三<br>
  北京市朝阳区<br>
  邮编: 100000<br>
  电话: 138-0000-0000
</address>

实际应用示例 ​

对话内容 ​

html
<div>
  <p><strong>小明:</strong> 你好，今天天气怎么样？<br>
  <strong>小红:</strong> 很好啊，阳光明媚的。<br>
  <strong>小明:</strong> 那我们出去走走吧！</p>
</div>

表单中的标签 ​

html
<form>
  <label>
    姓名:<br>
    <input type="text" name="name">
  </label><br><br>
  
  <label>
    邮箱:<br>
    <input type="email" name="email">
  </label><br><br>
  
  <label>
    留言:<br>
    <textarea name="message" rows="5" cols="30"></textarea>
  </label><br><br>
  
  <input type="submit" value="提交">
</form>

联系信息 ​

html
<div>
  <h3>联系我们</h3>
  <p>
    公司名称: ABC 有限公司<br>
    地址: 上海市浦东新区世纪大道1001号<br>
    邮编: 200120<br>
    电话: 021-12345678<br>
    邮箱: info@abc.com
  </p>
</div>

与 CSS 的结合使用 ​

控制换行样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .poem {
      font-family: '楷体', serif;
      line-height: 1.8;
      white-space: pre-line; /* 保留换行符 */
    }
    
    .address {
      font-style: italic;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="poem">
    春晓<br>
    春眠不觉晓，<br>
    处处闻啼鸟。<br>
    夜来风雨声，<br>
    花落知多少。
  </div>
  
  <address class="address">
    联系人: 李四<br>
    公司: XYZ 科技有限公司<br>
    地址: 深圳市南山区科技园<br>
    电话: 0755-87654321
  </address>
</body>
</html>

可访问性考虑 ​

屏幕阅读器兼容性 ​

html
<!-- 为屏幕阅读器提供上下文 -->
<p>
  操作步骤:<br>
  1. 打开应用程序<br>
  2. 点击"新建"按钮<br>
  3. 输入所需信息<br>
  4. 点击"保存"按钮
</p>

避免过度使用 ​

html
<!-- 不推荐：过度使用 <br> 创建间距 -->
<p>段落1</p>
<br>
<br>
<br>
<p>段落2</p>

<!-- 推荐：使用 CSS 控制间距 -->
<p>段落1</p>
<p>段落2</p>

<style>
p {
  margin-bottom: 2em;
}
</style>

与其他标签的组合 ​

在列表中使用 ​

html
<ul>
  <li>项目1<br>
      项目1的详细描述</li>
  <li>项目2<br>
      项目2的详细描述</li>
</ul>

在表格中使用 ​

html
<table>
  <tr>
    <td>
      姓名: 张三<br>
      年龄: 25岁<br>
      职业: 工程师
    </td>
    <td>
      姓名: 李四<br>
      年龄: 30岁<br>
      职业: 设计师
    </td>
  </tr>
</table>

响应式设计中的使用 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .contact-info {
      line-height: 1.6;
    }
    
    @media (max-width: 768px) {
      .contact-info br {
        display: none; /* 在小屏幕上移除换行 */
      }
    }
  </style>
</head>
<body>
  <div class="contact-info">
    联系人: 王五<br>
    部门: 技术部<br>
    电话: 138-0000-0000<br>
    邮箱: wangwu@company.com
  </div>
</body>
</html>

完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>br 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .poem {
      background-color: #f9f9f9;
      padding: 20px;
      border-left: 4px solid #007acc;
      font-family: '楷体', serif;
      white-space: pre-line;
    }
    
    .address {
      background-color: #e8f4fd;
      padding: 15px;
      border: 1px solid #b3d9ff;
      font-style: italic;
    }
    
    .dialogue {
      background-color: #fff8e1;
      padding: 15px;
      border: 1px solid #ffecb3;
    }
    
    .form-example {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 5px;
    }
    
    input, textarea {
      margin: 5px 0 15px 0;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h1>br 标签使用示例</h1>
  
  <h2>1. 诗歌示例</h2>
  <div class="poem">
    登鹳雀楼
    白日依山尽，
    黄河入海流。
    欲穷千里目，
    更上一层楼。
  </div>
  
  <h2>2. 地址信息</h2>
  <address class="address">
    ABC 科技有限公司<br>
    北京市海淀区中关村大街1号<br>
    邮编: 100080<br>
    电话: 010-12345678<br>
    邮箱: contact@abc.com
  </address>
  
  <h2>3. 对话示例</h2>
  <div class="dialogue">
    <p>
      <strong>客服:</strong> 您好，请问有什么可以帮助您的？<br>
      <strong>客户:</strong> 我想咨询一下产品的价格。<br>
      <strong>客服:</strong> 请问您想了解哪款产品呢？<br>
      <strong>客户:</strong> 最新的智能手机型号。<br>
      <strong>客服:</strong> 好的，我为您介绍一下...
    </p>
  </div>
  
  <h2>4. 表单示例</h2>
  <div class="form-example">
    <form>
      <label>
        姓名:<br>
        <input type="text" name="name" required>
      </label><br>
      
      <label>
        邮箱:<br>
        <input type="email" name="email" required>
      </label><br>
      
      <label>
        电话:<br>
        <input type="tel" name="phone">
      </label><br>
      
      <label>
        留言:<br>
        <textarea name="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
      </label><br>
      
      <input type="submit" value="提交">
    </form>
  </div>
</body>
</html>

最佳实践 ​

  1. 适度使用：只在真正需要强制换行时使用 <br> 标签
  2. 避免排版：不要使用 <br> 来创建间距，应使用 CSS 的 margin 或 padding
  3. 语义化考虑：在诗歌、地址等有语义意义的换行中使用
  4. 可访问性：确保使用 <br> 不会影响屏幕阅读器的阅读体验
  5. 响应式设计：在需要时使用 CSS 媒体查询控制 <br> 的显示

浏览器兼容性 ​

<br> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <br> 是自闭合标签，不需要结束标签
  2. 不要使用多个 <br> 标签来创建间距，应使用 CSS
  3. 在诗歌和地址等语义化内容中使用是合适的
  4. 避免在段落之间使用 <br> 来分隔内容
  5. <br> 标签在 pre 元素中会被渲染为换行

相关标签 ​

  • <p> - 段落标签
  • <div> - 分区标签
  • <pre> - 预格式化文本标签