html <hr />水平线标签元素

2019年11月30日作者：佚名

html <hr>是一条水准分割线，这条线将模式接洽为高下。hr标签感导将在 HTML 页面中建树一条水平线。

一、html hr标签语法

1、hr语法结构先容
<hr />是一个自力标签，没有匹面与结束的非一对标签。hr是自闭合标签——<hr />，与换行标签<br />一样是自力一个自闭合标签。

2、hr小示范
hr应用实例代码：

<p>形式<hr />模式</p> 
<p>测试内容</p> 
<hr /> 
<p>测试模式</p>

成就截图：

html hr运用实例截图

3、hr运用阐明
<hr>或是直接在文本模式中运用，也可能在标签与标签之间使用。应用后将自动出现一条100%宽的水平线，组成朋分上面与下面内容一条线。

二、hr设置装备摆设CSS格局

<hr>标签是概略直接配置CSS花色或使用class或id设置CSS格局的。实现紧要漂明的支解水平线。
梗概通过css字体色彩（color）配置hr颜色名堂。
1、hr色采改动实例代码
1）、CSS代码：

.expa{color:#F00} 
.expb{color:#00F}

3）、HTML内容：

<p>形式<hr class="expa" />模式</p> 
<p>测试模式</p> 
<hr class="expb" /> 
<p>测试内容</p>

3）、完整CSS+HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>hr 实例 CSS5</title> 
<style> 
.expa{color:#F00} 
.expb{color:#00F} 
</style> 
</head> 

<body> 
<p>模式<hr class="expa" />形式</p> 
<p>测试模式</p> 
<hr class="expb" /> 
<p>测试形式</p> 
</body> 
</html>

以上实例代码可直接复制测试实际驾驭<hr>标签。

2、html hr实例效果截图

旋转hr程度线颜色格式实例成效截图

三、html hr标签总结

hr感召是内容中创立一条水平线，将内容水平高下接洽开。在css html构造中根据需求抉择运用此程度线hr标签。