有的时候根据页面的需要,我们需要一些分隔线将文档分隔成各个部分。有多种方法可以达到这个目的,这里简要记述使用<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 元素的颜色呈现为纯色 |
示例:
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>
效果如下:
设置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属性进行样式的设计,最好不要使用可选属性进行样式设计。