hr标签是单独使用的标签,是水平线标签,用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐
通过设置<hr>标签的属性值,可以控制水平分隔线的样式。

<hr>属性:
size: 设置水平分隔线的高度,单位:像素默认值是2
width: 设置水平分隔线的宽度, 单位:像素 %默认值是100%
align: 设置水平分隔线的对齐方式。 默认值是center还有left right
color: 设置水平分隔线的颜色。 默认值是black
noshade: 取消水平线的3d阴影

例:<hr size=1 color=redwidth=300>
显示效果如下:


如果想要垂直的线,可以这样来进行设置:
例:
<hr size=50color=red width=3align=center>
效果如下:


我们经常也用<hr>来进行设置虚线
可由以下几种方法:

最简单一种: <hrwidth=150 style="border:1px dashed red;height:1px">
效果如下:



dashed为虚线的意思 red就是直接定义的颜色
还有一种:
<hr style="BORDER-BOTTOM-STYLE: dotted;BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted;BORDER-TOP-STYLE: dotted" color=blue size=1width=80>

效果如下:



再一种就是利用css来进行控制:
例:
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted;BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>

而在使用时,:<hr class=dotline color=greensize=3 width=200>

HTML 关于hr标签,虚线相关推荐

  1. hr/标签的属性及样式

    用简单的"hr"语句就能实现多样化的分割效果: 最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade> ...

  2. css中如何设置hr的样式?css hr标签多种样式(图文)

    在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...

  3. html中hr标签有哪些属性,htmlhr标签的属性有哪些?HTMLhr标签的样式详解

    html hr标签的属性有哪些?HTML hr标签的样式详解,本篇文章介绍了html中的hr标签的定义及其属性描述,还有关于html hr标签的样式使用的几种方法 html中hr标签定义和用法: 标签 ...

  4. HTML的br/标签和hr/标签

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. HTML5前端开发入门之H系列标签,P标签和Hr标签

    ##H系列标签(Header1~Header2) -作用:用于给文本添加标题语义 -格式: -<h1>xxxxxx</h2> -注意点: -H标签是用来给文本添加标题语义的,而 ...

  6. 「HTML和CSS入门指南」hr 标签详解

    HTML5 中的 hr 标签 HTML5 中的 <hr> 标签是用于插入水平分割线的标签,通常用于在页面中添加分隔线或者段落之间的分割线.<hr> 标签可以单独使用,也可以与其 ...

  7. HTML hr 标签定义和用法

    <hr> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 实例 被水平线分隔的标题和段落: <h1>T ...

  8. HTML hr标签简介

    1.简介 <hr> 标签在 HTML 页面中创建一条水平线.        水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 2.标准属性 id, class ...

  9. div标签,h标签,p标签,hr标签

    div标签:搭建网页结构的基本标签 无语义标签      块级标签 语法:<div></div> 特性:1,宽度默认撑满整个父元素 2,高度默认由内容撑起 3,独立成行,垂直布 ...

最新文章

  1. AndroidStudio开发jni不加载libs的so,只加载jniLibs的so
  2. [转]VC无负担实现XP风格界面
  3. python元祖迭代_python *式语法在迭代一个元组序列时的逻辑?
  4. Java正则表达式代码案例
  5. python同时输出两个数组_python中实现将多个print输出合成一个数组
  6. python处理文件效率对比awk
  7. C语言关键字浅析-signed
  8. ASCII码中文对照表
  9. Android Studio中AndroidManifest.xml文件中application标签
  10. 钉钉机器人关键字自动回复_【原创新软件】办公引流机器人个人微信企业微信QQ通用的自动回复,群发助手...
  11. Go 中的那些语法糖
  12. 酱香科技不在YYDS了,市盈率50倍的白酒,要回调到25倍的市盈率?泡沫要破灭了
  13. 生鲜配送APP软件开发
  14. 致远OA合并处理策略
  15. Kubernetes--k8s---进阶--管理工具helm--helm全面介绍
  16. 创建两个线程,其中一个输出1-52,另外一个输出A-Z。输出格式要求:12A 34B 56C 78D 依次类推
  17. 百度地图之一百度地图搭建开发环境(老罗视频笔记整理)
  18. 亚马逊美国站服装类目CPC认证详解
  19. 关闭占用端口号的程序
  20. 计算机类部队文职好考吗,“军队文职”招考遇冷,8000余岗位无人报考,是铁饭碗不香了吗...

热门文章

  1. 股票分析平台 python_GitHub - pythonstock/stock: stock,股票系统。使用python进行开发。...
  2. 【SQL】查询表中姓名“王”开头,并且只有二个字的数据
  3. PAT甲级 1037(C++)
  4. Cubase v5.1.1 macOS (移植版)音乐制作软件下载
  5. mysql数据库所有版本安装包下载地址
  6. Hbase从入门到入坑
  7. 让 Ubuntu 桌面自动更换壁纸
  8. 分数换算小数补0法_数学 | 循环小数的循环节以及永远追不上的乌龟
  9. 外包企业名录 - List of Outsourcing Enterprises
  10. 一款通过人工智能AI计算无损放大图像软件