小码哥的IT人生

HTML <hr> 标签 详解

HTML基础 2022-06-02 09:40:48小码哥的IT人生shichen

HTML <hr> 标签

实例

被水平线分隔的标题和段落:

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

 

完整实例【亲自试一试】:

<html>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

浏览器支持

元素 Chrome IE Firefox Safari Opera
<hr> Yes Yes Yes Yes Yes

所有主流浏览器都支持 <hr> 标签。

定义和用法

<hr> 标签在 HTML 页面中创建一条水平线。

水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

HTML 与 XHTML 之间的差异

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

在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />。

在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。

可选的属性

属性 描述
align
  1. center
  2. left
  3. right

不赞成使用。请使用样式取代它。

规定 hr 元素的对齐方式。

noshade noshade

不赞成使用。请使用样式取代它。

规定 hr 元素的颜色呈现为纯色。

size pixels

不赞成使用。请使用样式取代它。

规定 hr 元素的高度(厚度)。

width
  1. pixels
  2. %

不赞成使用。请使用样式取代它。

规定 hr 元素的宽度。

全局属性

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

事件属性

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

TIY 实例

完整实例【水平线】:

<html>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

如何插入水平线。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024