---
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`元素。

![示例hr](https://i.imgur.com/RMTqXPw.png)

## 资源：

*   [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
*   [W3C](http://w3c.github.io/html-reference/hr.html)