数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学在 HTML 中添加水平线
HTML 中的<hr>标签是水平线，用于定义 HTML 页面中的主题分隔符。它通常用于显示水平线以分隔内容或更改 HTML 页面中内容的显示方式。它在 HTML 中只包含开始标签。
语法
下面显示了在 HTML 中使用<hr>标签的方法：
<hr>………
HTML <hr>标签支持以下附加属性：
属性 |
值 |
描述 |
|---|---|---|
align |
left center right |
指定水平线的对齐方式。 |
noshade |
Noshade |
移除大多数浏览器显示的常用阴影效果。 |
size |
像素或 % |
指定水平线的高度。 |
width |
像素或 % |
指定水平线的宽度。 |
示例
以下示例演示了在 HTML 中使用<hr>标签：
<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body> <p>This text will be followed by a horizontal line</p> <hr> <p>Another horizontal line</p> <hr> </body> </html>
示例
现在，让我们通过为<hr>标签的属性赋值来看一个例子：
<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body> <p>This text will be followed by a horizontal line</p> <hr style="width:30%;text-align:left;margin-left:0"> <p>Continue another sentence here....</p> </body> </html>
示例
以下是 CSS 中无阴影<hr>元素的示例：
<!DOCTYPE html> <html> <body> <p>Demonstrating noshaded horizontal line:</p> <hr> <p>Applying styling sheet</p> <hr style="height:2px;border-width:0;color:grey;background-color:red"> </body> </html>
示例
以下示例演示了使用 CSS 设置<hr>元素的高度：
<!DOCTYPE html> <html> <body> <p>Height of horizontal line:</p> <hr> <p>A horizontal line with a height of 50 pixels:</p> <hr style="height:50px"> </body> </html>
示例
在以下示例中，我们使用 CSS 属性更改<hr>元素的宽度：
<!DOCTYPE html> <html> <body> <p>Normal horizontal line:</p> <hr> <p>A horizontal line with a width of 30 %:</p> <hr style="width:30%"> </body> </html>
更新于：2023年10月10日
572 次浏览
广告