HTML <hr> 水平线标签

小灰灰 2020-05-16 19:21 989阅读 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 条评论，989人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 hr 标签的使用

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

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

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

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

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

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

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

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

相关 HTML标签

标签语义化标签语义化就是表示标签的含义 1. 方便阅读,维护 2. 浏览器,爬虫能够更好的解析 3. 搜索引擎的优化 > 原则先确定语义的HTML,再选择

客官°小女子只卖身不卖艺/ 2021年11月09日 12:28/ 0 赞/ 452 阅读

相关 html标签

![这里写图片描述][SouthEast] 网易前端微专业课上标签展示。 [SouthEast]: /images/20210920/7f8e0738d15e482eac

ゝ一纸荒年。/ 2021年09月22日 09:06/ 0 赞/ 443 阅读

相关 HTML <hr> 水平线标签

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

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

相关 <hr>标签详解

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

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