HTML中HR属性

本文详细介绍了HTML中的HR属性,包括基本属性如size、width、align、noshade等,以及如何设置水平线的样式,如颜色、粗细、长度、位置等。此外,还展示了多种水平线修饰特效,如点线、虚线、实线、双线、槽线、脊线、内凹、外凸等,并提供了实例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML中HR属性

 
标签: 

html

 

hr

 

color

 

属性

 

hr属性

 

讲解

 

it

分类: 程序相关文章

  HR标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分

  <HR>基本的属性:

  size 水平线的宽度
 width 水平线的长,用占屏幕宽度的百分比或象素值来表示
 align 水平线的对齐方式,有LEFT RIGHT CENTER三种
 noshade 线段无阴影属性,为实心线段

1、size线段粗细的设定:

 

<HR>
这是第一条线段,无size设定,取内定值SIZE=1来显示
<HR SIZE=5>
这是第二条线段,SIZE=5
<HR SIZE=10>
这是第三条线段,SIZE=10

 

 

 

 


这是第一条线段,无size设定,取内定值SIZE=1来显示
这是第二条线段,SIZE=5
这是第三条线段,SIZE=10

 

 

2、width线段长度的设定:

 

<HR SIZE=3>
 这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示
<HR width=50 SIZE=5>
这是第二条线段,WIDTH=50(点数方式)
<HR width="50%" SIZE=7>
这是第三条线段,WIDTH=50%(百分比方式)

 

 

 


这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示
这是第二条线段,WIDTH=50(点数方式)
这是第三条线段,WIDTH=50%(百分比方式)

 

 

3、align线段排列的设定:

 

<HR width="50%" SIZE=5>
 这是第一条线段,无ALIGN设定,(取内定值RIGHT显示)
<HR align=center width="60%" SIZE=7>
这是第二条线段,居中对齐
<HR align=right width="70%" SIZE=2>
这是第三条线段,向右对齐

 

 

 


这是第一条线段,无ALIGN设定,(取内定值RIGHT显示)
这是第二条线段,居中对齐
这是第三条线段,向右对齐

 

 

4、noshade无阴影的设定,为实心线段:

 

<HR WIDTH=80% SIZE=5>
这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
这是第二条线段,有NOSHADE设定

 

 


这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示
这是第二条线段,有NOSHADE设定

 

HR标签水平分隔线修饰特效:

 

none:无样式;dotted:点线;dashed:虚线;solid:实线;

double:双线;groove:槽线;ridge:脊线;inset:内凹;outset:外凸。

1、dotted:点线
<HR style="border:3 dotted #ff0033" width="100%" SIZE=3>


2、dashed:虚线
<HR style="border:3 dashed #ff0033" width="100%" SIZE=3>


3、solid:实线
<HR style="border:3 solid #ff0033" width="100%" SIZE=3>


4、double:双线
<HR style="border:3 double #ff0033" width="100%" SIZE=3>


5、groove:槽线
<HR style="border:6 groove #ff0033" width="100%" SIZE=6>


6、ridge:脊线
<HR style="border:6 ridge #ff0033" width="100%" SIZE=6>


7、inset:内凹
<HR style="border:6 inset #ff0033" width="100%" SIZE=6>


8、outset:外凸
<HR style="border:6 outset #ff0033" width="100%" SIZE=6>


通过实践5—8并不理想,最好不要用。

 

 

两头渐变透明 纺锤形 右边渐变透明 左边渐变透明 立体效果 钢针效果

备注:这几种效果不适合表内嵌套存在,例句写在表外:

1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>

 


 

2、纺锤形:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>

 


 

3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>

 


 

4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>

 


 

5、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>

 


 

6、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>

 


### HTML `hr` 标签居中方法 在HTML中,可以通过多种方式实现 `<hr>` 标签的居中效果。以下是几种常见的方式及其原理: #### 1. 使用 `align` 属性 通过直接设置 `<hr>` 的 `align` 属性为 `"center"` 来实现水平线的居中显示[^1]。 ```html <hr align="center" width="50%"> ``` 这种方式简单直观,但在现代开发中不推荐使用,因为HTML属性控制样式的方法已经被CSS取代,且某些浏览器可能不再支持这些旧式的HTML属性。 --- #### 2. 移除全局样式的干扰 有时页面中可能存在全局样式声明(如 `* { margin: 0; padding: 0 }`),这会影响 `<hr>` 默认的自动居中行为。当移除该全局样式后,`<hr>` 将恢复其默认的居中状态[^2]。 ```css /* 如果存在此样式 */ * { margin: 0; padding: 0; } /* 注释或移除上述代码即可让 <hr> 自动居中 */ ``` 如果不希望完全移除全局样式,则可以在特定情况下单独调整 `<hr>` 的样式。 --- #### 3. 使用 CSS 控制居中 利用CSS可以更灵活地管理 `<hr>` 的布局和外观。以下是一些常用的CSS技巧: ##### a. 设置 `margin-left` 和 `margin-right` 为 `auto` 这是最标准的做法之一,适用于大多数场景。 ```css hr { margin-left: auto; margin-right: auto; width: 50%; /* 定义宽度 */ } ``` 对应的HTML结构如下: ```html <hr> ``` 这种方法不会受到全局样式的直接影响,并能很好地与其他CSS规则配合工作。 --- ##### b. 结合父容器的Flexbox布局 如果需要更加复杂的布局需求,可以借助Flexbox技术来完成水平线的精确位置控制[^4]。 ```css .container { display: flex; justify-content: center; /* 实现子元素居中 */ } hr { width: 50%; } ``` 对应HTML结构: ```html <div class="container"> <hr> </div> ``` 这种方案适合于复杂页面设计,尤其是需要动态响应屏幕尺寸变化的情况。 --- #### 4. 调整 `width` 属性并保持默认对齐方式 如果没有特别指定其他对齐选项,默认情况下 `<hr>` 是居中的。此时只需设定合适的宽度即可满足基本需求[^3]。 ```html <hr color="blue" width="40%"> ``` 注意:虽然可以直接写入固定像素值作为宽度单位,但百分比形式通常更具适应性和可维护性。 --- ### 总结 以上介绍了四种主要的技术手段用于解决HTML `<hr>` 标签居中的问题。其中基于CSS的方法更为现代化也具备更强的功能扩展能力,而传统属性配置则相对简便易懂。开发者应根据实际项目环境以及目标受众设备特性做出合理选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值