<hr>: 水平分隔线标签
最后更新:2026-10-13
<hr>水平分隔线标签
<hr>(水平分隔线)元素表示主题之间的分隔,默认渲染为一条水平线。HTML5 中它表示"主题转折",常用于段落之间的视觉分割。它是一个空元素。
| 分类 | 文本内容 |
|---|---|
| 内容模型 | 无(空元素) |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 自闭合 — 无需闭合标签 |
| 状态 | 标准 |
📝 语法
段落一<hr>段落二
▶ 示例
编辑下方代码,在 playground 中查看实时效果:
🌐 浏览器支持
| 浏览器 | |||||
|---|---|---|---|---|---|
| <hr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
❓ 常见问题
Qhr 只是画一条线吗?
A不只。
<hr> 的语义是「主题转换」(topic break)——故事场景切换、话题段落分界。视觉上默认渲染为水平分隔线,但没有语义诉求的纯装饰分隔线应该用 CSS border 实现。Qhr 是空元素吗?可以设置样式吗?
A是空元素,无结束标签、不包内容。样式完全可定制:
hr { border: none; border-top: 1px solid #ddd; } 是常见的重置方式,还可控制宽度、渐变等。Qhr 和 section 之间需要同时使用吗?
A不需要重复表达。用了
<section>(有标题的主题分组)就不必再加 <hr>——结构本身就是分界。hr 适合没有标题的松散话题切换,两者是不同粒度的工具。