位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 2.2 HTML 水平线 <hr> 标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.1 HTML 标题 <h1>-<h6> 标签 下一篇: 2.3 HTML 注释 <!--...--> 标签和查看源代码

基础用法

概要

n  <hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

n  <hr> 元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。

HTML 4.01 HTML5之间的差异

HTML5 中,<hr> 定义内容中的主题变化,并显示为一条水平线。

HTML 4.01 中,<hr> 标签仅仅显示为一条水平线。

HTML 4.01 中,所有的布局属性都 已废弃。在 HTML5 中不再支持这些属性。请使用 CSS 来为 <hr> 元素定义样式。

HTML XHTML 之间的差异

n  HTML 中,<hr> 标签没有结束标签。

n  XHTML 中,<hr> 标签必须被正确地关闭,比如 <hr />

全局属性

<hr> 标签支持 HTML 的全局属性。

事件属性

<hr> 标签支持 HTML 的事件属性。

基础应用

下面我们来看下hr在浏览器中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 水平线 hr 标签:黄菊华老师</title>
</head>
<body>
     <h1>HTML</h1>
     <p>HTML 是用于描述 web 页面的一种语言。</p>
     <hr>
     <h1>CSS</h1>
     <p>CSS 定义如何显示 HTML 元素。</p>
</body>
</html>

效果如图2-4

image.png

hr样式应用

hr的本质其实是border,所以,如果你要设置颜色的话,设置border-color就可以了。或者给hr加上高度,再加上背景色,比如:hr{height:1px; background-color:red}

下面我们来改变hr的样式,示例

小白教程网www.2d5.net

如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 水平线 hr 标签:黄菊华老师</title>
<style>
.hr1 {
           width: 80%; /*定义宽度*/
          background-color: blue; /*设置背景颜色,蓝色blue*/
          height: 1px; /*如果设置为0px,则上面的背景颜色不会显示*/
}
.hr2 {
         border-color: red; /*定义红色red*/
}
</style>
</head>
<body>
     <h1>HTML</h1>
     <p>HTML 是用于描述 web 页面的一种语言。</p>
     <hr>
    
     <h1>CSS</h1>
     <p>CSS 定义如何显示 HTML 元素。</p>
     <hr>
</body>
</html>

效果如图2-5

image.png






上一篇: 2.1 HTML 标题 <h1>-<h6> 标签 下一篇: 2.3 HTML 注释 <!--...--> 标签和查看源代码
毕业设计网             广告联系QQ:45157718(微信同号)