hr标签的作用？水平分隔线怎么添加？-html教程-PHP中文网

hr标签的作用？水平分隔线怎么添加？

畫卷琴夢

发布： 2025-08-02 15:47:01

原创

546人浏览过

hr标签的作用是创建水平分隔线以增强页面可读性和视觉结构，1. 可直接在html中使用hr标签实现分隔，它是一个无需闭合的空标签；2. 可通过css自定义hr标签的样式，如设置border、width、margin等属性来改变颜色、粗细、宽度和居中效果；3. 在html5中hr具有语义化意义，表示主题或内容段落间的分隔，若分隔线反映内容主题变化则应使用hr标签；4. 若仅用于视觉分隔而非语义分隔，则推荐使用css为元素添加边框等方式实现，以保持语义清晰并提升样式灵活性；因此应根据是否涉及主题变化来决定使用hr标签还是css方案。

hr标签的作用？水平分隔线怎么添加？

hr

登录后复制

标签的作用是在 HTML 页面中创建一条水平分隔线，用于分隔内容区域，增强页面的可读性和视觉结构。添加水平分隔线非常简单，只需要在需要分隔的位置插入

<hr />

登录后复制

标签即可。

解决方案：

直接在 HTML 代码中使用

<hr />

登录后复制

标签。它是一个空标签，不需要闭合标签（尽管在 XHTML 中建议使用

<hr />

登录后复制

）。

<!DOCTYPE html>
<html>
<head>
<title>水平分隔线示例</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一段文字。</p>

<hr />

<p>这是另一段文字，与上面的文字用水平线分隔开。</p>

</body>
</html>

登录后复制

浏览器会默认显示一条简单的水平线。当然，你可以使用 CSS 来定制这条线的样式。

如何使用 CSS 自定义 hr 标签的样式？

默认的

<hr />

登录后复制

样式通常比较朴素，但你可以通过 CSS 来改变它的外观，比如颜色、高度、宽度、边框样式等。

<!DOCTYPE html>
<html>
<head>
<title>自定义水平分隔线样式</title>
<style>
hr {
  border: 1px solid #ccc; /* 设置边框颜色和粗细 */
  width: 80%; /* 设置宽度 */
  margin: 20px auto; /* 设置上下边距和居中 */
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一段文字。</p>

<hr />

<p>这是另一段文字，与上面的文字用水平线分隔开。</p>

</body>
</html>

登录后复制

这段代码将