31 lines
1.0 KiB
Markdown
31 lines
1.0 KiB
Markdown
|
---
|
|||
|
|
title: Create a Horizontal Line Using the hr Element
|
|||
|
|
localeTitle: 使用hr元素创建水平线
|
|||
|
|
---
|
|||
|
|
## 使用hr元素创建水平线
|
|||
|
|
|
|||
|
|
`hr`标记是最简单的HTML元素之一。它在其父元素上创建一条细水平线。
|
|||
|
|
|
|||
|
|
本课程使用`hr`标记分隔“卡片”的标题和内容。那么如何创建`hr`元素呢？
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<!-- It's this easy -->
|
|||
|
|
<hr>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
此元素是自动关闭的，但为了对解析器和样式检查器友好，您应该添加一个明确的结束标记。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<hr />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
无论您选择哪种格式，都会在[freeCodeCamp的](https://www.freecodecamp.org/) [本课程中](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/)创建一条水平线。以下是该课程的屏幕截图，显示了div中包含的`hr`元素。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 资源：
|
|||
|
|
|
|||
|
|
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
|
|||
|
|
* [W3C](http://w3c.github.io/html-reference/hr.html)
|