<hr>:主题分割(水平分割线)元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTML <hr> 元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。
尝试一下
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p> <hr /> <p>§2: The second rule of Fight Club is: Always bring cupcakes.</p> hr { border: none; border-top: 3px double #333; color: #333; overflow: visible; text-align: center; height: 5px; } hr::after { background: #fff; content: "§"; padding: 0 4px; position: relative; top: -13px; } 在 HTML 的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但它目前被定义为是语义上而非表现层面上的术语。所以如果想画一条水平线,请使用适当的 CSS 样式来实现。
属性
该元素包含全局属性。
align已弃用 非标准-
设置页面上分割线的对齐方式。如果没有指定任何值,默认值为
left。 color非标准 非标准-
使用颜色名或十六进制设置分割线的颜色。
noshade已弃用 非标准-
令分割线不包含阴影。
size已弃用 非标准-
设置分割线高度的像素值。
width已弃用 非标准-
使用像素或者百分比设置分割线的宽度。
示例
>HTML
html
<p>这是文本的第一段。这是文本的第一段。这是文本的第一段。这是文本的第一段。</p> <hr /> <p>这是文本的第二段。这是文本的第二段。这是文本的第二段。这是文本的第二段。</p> 结果
技术概要
| 内容分类 | 流式内容。 |
|---|---|
| 允许的内容 | 无,是一个空元素。 |
| 标签省略 | 必须有开始标签,不能有结束标签。 |
| 允许的父元素 | 所有接受流式内容的元素。 |
| 隐式 ARIA 角色 | separator |
| 允许的 ARIA 角色 | presentation 或 none |
| DOM 接口 | HTMLHRElement |
规范
| Specification |
|---|
| HTML> # the-hr-element> |