HTML学习——如何使用标签在网页上绘制分隔线

时间:2022-11-04 03:19:17

有的时候根据页面的需要,我们需要一些分隔线将文档分隔成各个部分。有多种方法可以达到这个目的,这里简要记述使用<hr>标签可以实现段落画线的功能。

定义和用法

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

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

1 <p>这是段落的分隔线</p>
2 <hr />
3 <p>这是段落的分隔线</p>

效果如下:

这是段落的分隔线


这是段落的分隔线

可选的属性

属性 描述
align

center

left

right

规定 hr 元素的对齐方式
width

pixels%

规定 hr 元素的宽度
size pixels% 规定 hr 元素的高度(厚度)
noshade noshade 规定 hr 元素的颜色呈现为纯色

示例:

HTML学习——如何使用标签在网页上绘制分隔线HTML学习——如何使用标签在网页上绘制分隔线
1 <p>设置align=left,size=1,width=300px,设置noshade属性:</p>
2 <hr align="left" noshade="noshade" size="1" width="300px" />
3 <p>设置align=center,size=10,width=300px,设置noshade属性:</p>
4 <hr align="center" noshade="noshade" size="10" width="300px" />
5 <p>设置align=right,size=10,width=300px,不设置noshade属性:</p>
6 <hr align="right" size="10" width="300px" />
7 <p>结束</p>
hr属性示例

 效果如下:

设置align=left,size=1,width=300px,设置noshade属性:


设置align=center,size=10,width=300px,设置noshade属性:


设置align=right,size=10,width=300px,不设置noshade属性:


结束

关于<hr>标签的样式

由于<hr>标签支持HTML全局属性,因此在编写过程中可以利用style属性进行样式的设计,最好不要使用可选属性进行样式设计。