HTML <hr> 水平线标签

小灰灰 2020-05-16 19:21 1099阅读 0赞

`<hr>`可以绘制一条水平线，hr 是 horizon（水平线）的缩写。

自闭和标签，HTML5 规范中，无需采用斜杠闭合，直接写成 `<hr>` 即可。

**代码实例：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
p {
  width:380px;
}
</style>
</head>
<body>
  <h3>蒲公英云一</h3>
  <p>只有努力奋斗才会有美好的未来</p>
  <p>本站的url地址是www.dandelioncloud.cn</p>
  <hr/>
  <h3>蒲公英云二</h3>
  <p>本站位于青岛市南区</p>
  <p>欢迎大家提供有益的建议与意见</p>
</body>
</html>
```

代码演示了 `<hr>` 的功能，自闭和标签，HTML5 中可以省略斜杠。

默认，`<hr>` 具有一定阴影效果，因为 `<hr>` 高度是2px，这两个像素是由上边框和下边框组合而成，且上边框和下边框的颜色不同，上边框是黑色，下边框为灰色，所以只要随便将一个边框设置为 none，即可消除阴影。

代码修改如下：

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
p {
  width:380px;
}
hr{border-bottom:none;}
</style>
</head>
<body>
  <h3>蒲公英云一</h3>
  <p>只有努力奋斗才会有美好的未来</p>
  <p>本站的url地址是www.dandelioncloud.cn</p>
  <hr />
  <h3>蒲公英云二</h3>
  <p>本站位于青岛市南区</p>
  <p>欢迎大家提供有益的建议与意见</p>
</body>
</html>
```

对比一下第一个例子的 `<hr>` 视觉效果，应该会明显发现两者区别。

发表评论取消回复

表情：

评论列表（有 0 条评论，1099人围观）

还没有评论，来说两句吧...

相关阅读

相关 hr标签妙用

hr标签可以在页面中产生一条水平线，将文本区域内容分开，以增加网页的层次感。 hr标签可以通过size , color , width , noshade , align 等

红太狼/ 2024年02月18日 18:45/ 0 赞/ 63 阅读

相关 html-标题标签、水平线标签和特殊字符

　　标题标签　　　　 <h1></h1> <h2></h2> ...... <h6></h6> 　　　　从h1到h6，大小是依次变小，同时会自动换行　　水平线标签

超、凢脫俗/ 2023年06月03日 05:52/ 0 赞/ 13 阅读

相关 JavaWeb学习之路(14)--HTML之水平线hr

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 水平线的概念 2. 水平线的用法 3. 小结 1. 水平线的概念

我不是女神ヾ/ 2022年09月12日 07:47/ 0 赞/ 242 阅读

相关 HTML基础标签body、br、dir属性、h1~h6、hr

boby 定义 <body> 标签定义文档的主体。 body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。 <!DOCTY

逃离我推掉我的手/ 2022年09月11日 05:18/ 0 赞/ 177 阅读

相关 css很短的水平线,包裹的CSS水平线

我有一个来自数据库的项目列表： Jon Skeet Darin Dimitrov Marc Gravell BalusC Hans Passan

淩亂°似流年/ 2022年09月03日 01:29/ 0 赞/ 191 阅读

相关 hr 标签的使用

-------------------- 标签可以产生一条分割线，并且可以设置颜色，位置，粗细今天在使用hr标签的时候出现了问题，在网页中每个横线的显示是一样的，转成p

亦凉/ 2022年07月27日 14:45/ 0 赞/ 229 阅读

相关 HTML中用CSS样式实现文字两边添加水平线

（1）html中的代码： <div class="content"> <p class="title">新特卖每日早10晚8上新</p> </

清疚/ 2022年06月05日 12:36/ 0 赞/ 262 阅读

相关 HTML示例06---水平线

1.说明水平线用于段落与段落之间的间隔，使文档结构清晰明白，也使文字的编排更整齐。水平线自身具有很多的属性，如宽度、高度、颜色、排列对齐等。在HTML5中经常会用到水平线，

曾经终败给现在/ 2022年03月19日 14:42/ 0 赞/ 317 阅读

相关 HTML <hr> 水平线标签

`<hr>`可以绘制一条水平线，hr 是 horizon（水平线）的缩写。自闭和标签，HTML5 规范中，无需采用斜杠闭合，直接写成 `<hr>` 即可。

小灰灰/ 2020年05月16日 19:21/ 0 赞/ 1100 阅读

相关 <hr>标签详解

在html4.01版本中，< hr>标签用来定义一条水平线。在html5版本中升级了该标签，使其具有语义，用来定义主题的变化，比如话题的转移，并显示一条水平线；

小灰灰/ 2020年04月23日 08:27/ 0 赞/ 1134 阅读