html中hr标签的基础知识

定义和用法

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

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

HTML 与 XHTML 之间的差异

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

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

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

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

可选的属性 注意:以下几种属性均不赞成使用,请使用样式取代它。

1、align 规定 hr 元素的对齐方式。

属性包括:

center 居中

left 居左

right 居右

例如:

<hr style="width: 100px" align="right">

2、noshade 规定 hr 元素的颜色呈现为纯色,而不是阴影的颜色。

noshade 的属性值是 布尔(boolean)

例如:

<hr noshade>

注意:HTML5 不支持 noshade 属性,在 HTML 4.01 中,<hr> 的 noshade 属性已废弃

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

属性值是 size

例如:

<hr size="30">

4、width 规定 hr 元素的宽度(pixels)。

 属性值是 width

例如:

<hr width="30px">

也可以使用 %:

<hr width="30%">

几种样式:

网页设计中 hr 标签有很多样式,合理使用会给页面增色很多,下面就来详细介绍几种常用的样式!

第一种:

<hr style="border:none;border-top:2px dotted #181818;">

样式属性包括:

border 设置边框 

dotted 设置线型 dotted 是由点组成的虚线

#181818 设置线的颜色

效果如下:


第二种:

<hr style="border:none;border-top:1px dashed #0066CC;">

dashed 设置线型 dashed 是由小横线组成的虚线

效果如下:


第三种:

<hr style="border:none;border-top:1px solid #555555;">

solid 设置线型 solid 是实线

效果如下:


其实以上都是设置的 border 的线型,就不一一举例了,border 线型包括以下几种:

solid:单实线。 double:双实线。 dashed:虚线。 dotted:点线。 groove:沟线(groove)。 ridge:脊线(ridge)。 inset:内陷边框。 outset:外凸边框。 none:无边框。

第四种:

<hr style="height:2px;border:none;background: #00a6b6;">

height 设置高度

background 设置背景颜色

效果如下:


第五种:

<hr style="border:none;border-top:10px groove skyblue;">

groove 边框上颜色

skyblue 边框下颜色

效果如下:


(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯技术工程官方号的专栏

令人惊叹的前端路由原理解析和实现方式

? 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现还是...

10930
来自专栏达达前端

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。

8720
来自专栏机器学习AI算法工程

如何筛选特征?用随机森林(RF)

一般情况下,数据集的特征成百上千,因此有必要从中选取对结果影响较大的特征来进行进一步建模,相关的方法有:主成分分析、lasso等,这里我们介绍的是通过随机森林来...

14010
来自专栏GA小站

2.4.1、Google Analytics高级应用——查看页面上下级

在GA中查看上下级页面有默认参数:先前页面路径和后续页面路径,但出来的结果往往是前后相等的,错误的,如图2-48所示:

6420
来自专栏公众号PowerBI大师

如何用PowerBI自定义函数批量爬取财务报表

近期,学习了马老师的商业智能财务分析(PowerBI)课程后,不免手痒,教学中的案例数据不过瘾,于是在PowerBI学友的启发下,自己找现实数据玩了起来。那么今...

20310
来自专栏服务端思维

从模版方法模式到 SPI 演变 :好的思想通用而持久

一般情况下,我们会通过 API 对外提供服务。这里,API 提供服务的接口的逻辑是固定的,换句话说,它具有通用性。但是,但我们遇到具有类似的业务逻辑的场景时,即...

6010
来自专栏GA小站

3.2.2 、Google Tag Manager实战指南——第三方代码部署

第三方代码的部署方式有两种,一种是采用内置模板的方式,一种是采用自定义HTML的形式,下面以部署Adroll再营销代码作为例子,首先登陆Adroll去获取跟踪代...

3710
来自专栏测试技术圈

拉取一个nginx的容器

PS:docker exec -it containerID /bin/bash 进入容器

7110
来自专栏Devops专栏

Flask 静态文件、模板文件设置

在Django项目中,如果需要访问静态文件,默认则是使用 /static 的前缀来进行访问。那么对于Flask来说,也是一样的。

11430
来自专栏Python无止境

Python 3 既是激进的又是克制的,这些提议被否决了

导语:Python 3.8 已经发布了,引进了不少变更点。关于 3.9 预计引入的修改,也披露了一些。我们之前还关注过 GIL的移除计划 和 Guido 正在开...

6420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励