<hr> 标签
<hr> 标签在 HTML 页面中定义水平分隔线。它是一个自闭合标签，用于在文档中创建主题间的分隔。
概述
<hr> 标签在 HTML 文档中创建一条水平线，用于分隔不同主题或章节的内容。在 HTML5 中，它表示段落级别的主题分隔。
语法
html
<hr>在 XHTML 中，也可以写成：
html
<hr />基本用法
简单分隔线
html
<p>第一段内容...</p>
<hr>
<p>第二段内容...</p>在文章中分隔章节
html
<article>
<h2>第一章</h2>
<p>这是第一章的内容...</p>
<hr>
<h2>第二章</h2>
<p>这是第二章的内容...</p>
</article>样式化水平线
使用 CSS 样式
html
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
hr {
border: none;
height: 1px;
background-color: #ccc;
margin: 20px 0;
}
/* 点线样式 */
.dotted {
border: none;
border-top: 2px dotted #999;
margin: 20px 0;
}
/* 虚线样式 */
.dashed {
border: none;
border-top: 2px dashed #999;
margin: 20px 0;
}
/* 彩色样式 */
.colored {
border: none;
height: 3px;
background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
margin: 20px 0;
}
/* 宽度限制 */
.limited-width {
width: 50%;
margin: 20px auto;
border: none;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<p>第一部分内容...</p>
<hr>
<p>第二部分内容...</p>
<hr class="dotted">
<p>第三部分内容...</p>
<hr class="dashed">
<p>第四部分内容...</p>
<hr class="colored">
<p>第五部分内容...</p>
<hr class="limited-width">
<p>第六部分内容...</p>
</body>
</html>实际应用示例
在文章中使用
html
<article>
<h1>如何学习网页开发</h1>
<p>学习网页开发是一个循序渐进的过程...</p>
<hr>
<h2>HTML 基础</h2>
<p>HTML 是网页开发的基础...</p>
<hr>
<h2>CSS 样式</h2>
<p>CSS 用于控制网页的外观...</p>
<hr>
<h2>JavaScript 交互</h2>
<p>JavaScript 为网页添加交互功能...</p>
</article>在表单中使用
html
<form>
<fieldset>
<legend>个人信息</legend>
<label>姓名: <input type="text" name="name"></label><br><br>
<label>邮箱: <input type="email" name="email"></label><br><br>
</fieldset>
<hr>
<fieldset>
<legend>地址信息</legend>
<label>街道: <input type="text" name="street"></label><br><br>
<label>城市: <input type="text" name="city"></label><br><br>
</fieldset>
<hr>
<input type="submit" value="提交">
</form>在导航中使用
html
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
</ul>
<hr>
<ul>
<li><a href="#blog">博客</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>语义化使用
主题分隔
html
<section>
<h2>产品介绍</h2>
<p>我们的产品具有以下特点...</p>
<hr>
<h3>产品优势</h3>
<p>相比其他产品，我们的优势在于...</p>
</section>时间线分隔
html
<div class="timeline">
<div class="event">
<h3>2020年</h3>
<p>公司成立</p>
</div>
<hr>
<div class="event">
<h3>2021年</h3>
<p>发布第一款产品</p>
</div>
<hr>
<div class="event">
<h3>2022年</h3>
<p>获得A轮融资</p>
</div>
</div>响应式设计
html
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
height: 1px;
background-color: #ddd;
margin: 30px 0;
}
@media (max-width: 768px) {
hr {
margin: 20px 0;
background-color: #bbb;
}
hr:before {
content: "***";
display: block;
text-align: center;
color: #999;
font-size: 18px;
letter-spacing: 10px;
}
}
</style>
</head>
<body>
<p>桌面端内容...</p>
<hr>
<p>更多内容...</p>
</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>hr 标签示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
article {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
}
/* 默认水平线样式 */
hr {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #ccc, transparent);
margin: 30px 0;
}
/* 装饰性水平线 */
.decorative {
border: none;
text-align: center;
margin: 30px 0;
}
.decorative:before {
content: "❦ ❧ ❦";
color: #999;
font-size: 18px;
letter-spacing: 15px;
}
/* 点线样式 */
.dotted {
border: none;
border-top: 2px dotted #999;
margin: 30px 0;
}
/* 彩色渐变 */
.gradient {
border: none;
height: 4px;
background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
margin: 30px 0;
border-radius: 2px;
}
/* 短水平线 */
.short {
width: 50%;
margin: 20px auto;
border: none;
border-top: 1px solid #ddd;
}
/* 响应式设计 */
@media (max-width: 600px) {
article {
padding: 20px;
}
hr {
margin: 20px 0;
}
}
</style>
</head>
<body>
<article>
<h1>网页开发学习指南</h1>
<p>欢迎来到网页开发学习指南。本指南将帮助您从零开始学习网页开发技术。</p>
<hr>
<h2>前端基础技术</h2>
<p>前端开发主要包括以下三种核心技术：</p>
<h3>HTML</h3>
<p>HTML（超文本标记语言）是网页的骨架，用于定义网页的结构和内容。</p>
<hr class="dotted">
<h3>CSS</h3>
<p>CSS（层叠样式表）用于控制网页的外观和布局，让网页更加美观。</p>
<hr class="dotted">
<h3>JavaScript</h3>
<p>JavaScript 是一种脚本语言，用于为网页添加交互功能。</p>
<hr class="gradient">
<h2>学习路径建议</h2>
<p>按照以下路径学习可以更高效地掌握网页开发技能：</p>
<ol>
<li>学习 HTML 基础语法</li>
<li>掌握 CSS 样式和布局</li>
<li>理解 JavaScript 编程基础</li>
<li>学习现代前端框架</li>
</ol>
<hr class="decorative">
<h2>实践项目</h2>
<p>通过实际项目练习可以更好地巩固所学知识：</p>
<ul>
<li>个人简历网站</li>
<li>企业官网</li>
<li>博客系统</li>
<li>电商网站</li>
</ul>
<hr class="short">
<p><strong>开始学习吧，祝您成功！</strong></p>
</article>
</body>
</html>与其他元素的组合
与标题组合
html
<h2>章节标题</h2>
<hr>
<p>章节内容...</p>与图标组合
html
<!DOCTYPE html>
<html>
<head>
<style>
.icon-divider {
display: flex;
align-items: center;
margin: 30px 0;
}
.icon-divider:before,
.icon-divider:after {
content: "";
flex: 1;
border-bottom: 1px solid #ddd;
}
.icon-divider:before {
margin-right: 10px;
}
.icon-divider:after {
margin-left: 10px;
}
</style>
</head>
<body>
<p>第一部分内容...</p>
<div class="icon-divider">★</div>
<p>第二部分内容...</p>
</body>
</html>最佳实践
- 语义化使用：只在真正需要主题分隔时使用
<hr>标签 - 避免装饰性使用：不要仅为了装饰而使用
<hr>，应使用 CSS 实现 - 样式化：使用 CSS 而不是 HTML 属性来控制
<hr>的外观 - 可访问性：屏幕阅读器会识别
<hr>作为内容分隔符 - 响应式考虑：在移动设备上可能需要不同的样式
浏览器兼容性
<hr> 标签在所有浏览器中都得到完美支持：
- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer
注意事项
<hr>是自闭合标签，不需要结束标签- 在 HTML5 中，
<hr>表示段落级别的主题分隔 - 不要使用
<hr>来创建视觉效果，应使用 CSS - 避免过度使用，以免影响内容的可读性
- 可以通过 CSS 完全自定义
<hr>的外观