前端入门基础——HTML 水平线标签
作者：互联网
可以绘制一条水平线。
它是一个自闭和标签，在HTML5规范中，可以省略斜杠
。
hr的英文全称是horizon（水平线）。
代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>兴趣部落</title>
<style>
p {
width:380px;
}
</style>
</head>
<body>
<h3>兴趣部落一</h3>
<p>只有努力奋斗才会有美好的未来</p>
<p>本站的url地址是www.softdewhy.com</p>
<hr />
<h3>兴趣部落二</h3>
<p>本站位于青鸟市南区</p>
<p>欢迎大家提供有益的建议与意见</p>
</body>
</html>
以上代码简单演示了
元素的效果。
默认情况下，
貌似带有阴影效果，所以出现这种现象是因为默认条件下，
的高度是两个像素，这两个像素是由上边框和下边框组合而成的，之所以会出现阴影效果，是因为上边框和下边框的颜色是不同的，上边框是黑色，下边框为灰色，所以只要随便将一个边框设置为none，那么就不会出现阴影效果。
代码修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
<style>
p {
width:380px;
}
hr{border-bottom:none;}
</style>
</head>
<body>
<h3>兴趣部落一</h3>
<p>只有努力奋斗才会有美好的未来</p>
<p>本站的url地址是www.softdewhy.com</p>
<hr />
<h3>兴趣部落二</h3>
<p>本站位于青鸟市南区</p>
<p>欢迎大家提供有益的建议与意见</p>
</body>
</html>
对比一下第一个例子的hr显示效果，应该会明显发现两者区别。
如果你依然在编程的世界里迷茫，不知道自己的未来规划，可以加入前端学习进阶内推交流群685910553（前端资料分享）。里面可以与大神一起交流并走出迷茫。
新手可免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法（详细的前端项目实战教学视频），
有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入
标签：部落,hr,标签,前端,边框,水平线,HTML,兴趣,本站 来源： https://blog.csdn.net/heima6666/article/details/90647907