 |
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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 注释 <!--...--> 标签和查看源代码 |
