当前阅读教程: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在浏览器中的效果,示例 代码如下: <!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。 hr样式应用hr的本质其实是border,所以,如果你要设置颜色的话,设置border-color就可以了。或者给hr加上高度,再加上背景色,比如:hr{height:1px; background-color:red}。 下面我们来改变hr的样式,示例 如下: <!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。 |
|
上一篇: 2.1 HTML 标题 <h1>-<h6> 标签 | 下一篇: 2.3 HTML 注释 <!--...--> 标签和查看源代码 |