3.3 换行与水平线(br, hr)：精确控制内容分隔
综合教学案例：诗歌排版与内容分隔
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代诗歌欣赏</title>
<style>
body {
font-family: "SimSun", "宋体", serif;
line-height: 1.8;
max-width: 600px;
margin: 0 auto;
padding: 40px;
background-color: #f8f5f0;
color: #333;
}
/* 诗歌容器样式 */
.poem {
background-color: #fff;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
border-radius: 3px;
}
/* 诗歌段落样式 */
.poem p {
margin: 0;
text-align: center;
font-size: 1.1em;
}
/* 自定义水平线样式 */
.divider {
border: 0;
height: 1px;
background-image: linear-gradient(to right,
rgba(0,0,0,0),
rgba(0,0,0,0.3),
rgba(0,0,0,0));
margin: 30px auto;
width: 50%;
}
/* 作者信息分隔 */
.author-separator {
border: 0;
height: 3px;
background: #8e44ad;
margin: 25px auto 15px;
width: 100px;
}
/* 响应式调整 */
@media (max-width: 480px) {
body {
padding: 20px;
}
.poem p {
font-size: 1em;
}
br {
display: none; /* 小屏幕取消换行 */
}
}
</style>
</head>
<body>
<article class="poem">
<h1 style="text-align: center; margin-bottom: 30px;">《断章》</h1>
<p>你站在桥上看风景，</p>
<p>看风景的人在楼上看你。</p>
<br> <!-- 诗节间的换行 -->
<p>明月装饰了你的窗子，</p>
<p>你装饰了别人的梦。</p>
<hr class="divider"> <!-- 诗歌与作者信息的分隔 -->
<p style="font-style: italic; margin-top: 20px;">—— 卞之琳</p>
<hr class="author-separator">
<section style="font-size: 0.9em; color: #666;">
<p>创作于1935年10月</p>
<p>收录于《鱼目集》</p>
<br> <!-- 信息项之间的分隔 -->
<p>本诗是卞之琳的代表作之一，</p>
<p>体现了"相对"的哲学思想。</p>
</section>
</article>
</body>
</html>深度解析与教学要点
一、<br>标签：精确控制换行
核心特性
- 自闭合标签：写成<br>或<br />均可
- 语义含义：表示内容中的强制换行（行间断）
- 使用场景：诗歌、歌词的换行地址信息分行需要保持原有格式的文本
专业技巧
- 替代方案对比html复制下载运行<!-- 方案1：使用多个<p> --> <p>第一行</p> <p>第二行</p> <!-- 方案2：使用<br> --> <p>第一行<br>第二行</p> <!-- 选择依据： - 语义独立用<p> - 格式需要保持用<br> -->
- 响应式处理css复制下载/* 小屏幕取消换行 */ @media (max-width: 480px) { br { display: none; } }
- 无障碍访问屏幕阅读器通常会忽略单个<br>多个连续<br>可能被读作"空白"
二、<hr>标签：主题分隔线
核心特性
- 语义含义：表示故事场景或主题的转换
- 默认样式：灰色实线，有3D凹陷效果
- 现代用法：更多作为装饰性分隔元素
样式自定义
/* 基础重置 */
hr {
border: 0; /* 清除默认边框 */
height: 1px; /* 控制线条粗细 */
background: #ccc; /* 纯色线条 */
}
/* 渐变效果 */
hr.gradient {
background: linear-gradient(to right, #f00, #0f0, #00f);
height: 2px;
}
/* 虚线样式 */
hr.dashed {
background: repeating-linear-gradient(
to right,
#000,
#000 5px,
transparent 5px,
transparent 10px
);
}
/* 图标分隔线 */
hr.icons::after {
content: "❖❖❖";
display: block;
text-align: center;
font-size: 1.2em;
color: #999;
position: relative;
top: -0.7em;
}三、最佳实践指南
- 适度使用原则避免用<br>堆砌空白区域（应该用CSS margin/padding）不要用<hr>替代内容结构分隔（应该用语义化section）
- 语义化替代方案html复制下载运行<!-- 不推荐 --> <p>地址：<br>北京市<br>海淀区<br>中关村</p> <!-- 推荐 --> <address> <p>北京市</p> <p>海淀区</p> <p>中关村</p> </address>
- 现代CSS替代方案css复制下载/* 代替<br> */ .line-break { display: block; content: ""; margin-top: 1em; } /* 代替<hr> */ .custom-divider { display: flex; align-items: center; margin: 20px 0; } .custom-divider::before, .custom-divider::after { content: ""; flex: 1; border-bottom: 1px solid #000; } .custom-divider::before { margin-right: 10px; } .custom-divider::after { margin-left: 10px; }
四、常见问题诊断
- 过度使用<br><!-- 错误示范 --> <p>内容...</p> <br><br><br><br> <p>更多内容...</p> <!-- 解决方案 --> <p>内容...</p> <div style="height: 60px;"></div> <!-- 明确表示需要留白 --> <p>更多内容...</p>
- <hr>样式不生效 /* 错误方法 */ hr { color: red; /* 无效 */ } /* 正确方法 */ hr { background-color: red; /* 或 border-color */ }
- 打印样式问题 @media print { hr { border-color: #000; /* 确保打印可见 */ } br { page-break-after: avoid; } }
综合应用技巧
诗歌排版系统
<div class="poem" aria-label="诗歌">
<p>轻轻的我走了，</p>
<p>正如我轻轻的来；</p>
<br aria-hidden="true">
<p>我轻轻的招手，</p>
<p>作别西天的云彩。</p>
</div>时间线设计
<div class="timeline">
<div class="event">
<h3>2020年</h3>
<p>项目启动</p>
</div>
<hr class="timeline-divider">
<div class="event">
<h3>2021年</h3>
<p>首个版本发布</p>
</div>
</div>表单分组
<form>
<fieldset>
<legend>个人信息</legend>
<!-- 表单控件 -->
</fieldset>
<hr class="form-divider">
<fieldset>
<legend>支付信息</legend>
<!-- 表单控件 -->
</fieldset>
</form>