<hr>
HTML <hr> Tag
The HTML <hr> tag is a block-level element transferring all the elements after it to another line. The external look of the horizontal line defined by the tag depends on the type of the browser. More often it is displayed with a border, which creates 3D effect.
In HTML5 the <hr> tag defines a thematic change between paragraph-level elements in an HTML page. In previous versions of HTML, it was used to draw a horizontal line on the page visually separating the content. In HTML5 it has a semantic tag meaning.
Syntax
Syntax （语法）
The <hr> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<hr>) tag must be closed (<hr/>).
Example of the HTML <hr> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from the scratch.
（本HTML教程将教您（超文本标记语言）的基础知识以及如何从头开始创建您的网站。）
</p>
<hr>
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
（在我们的CSS教程中，您将学习如何使用CSS一次控制多个网页的样式和布局。）
</p>
</body>
</html>
HTML <hr> Size Attribute
HTML <hr> Size Attribute
The size attribute specifies the height of the line. （Size属性指定行的高度。）
Though the size attribute is one of the deprecated attributes, it is still supported in all browsers. （>虽然size属性是已弃用的属性之一，但它仍然在所有浏览器中受支持。）
Example of the HTML <hr> tag with the “size” attibute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40">
</body>
</html>
An alternate way to specify the size of the <hr> tag is using CSS height Property.
Example of the HTML <hr> tag used with the height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
（高度为20像素的水平线。）
</p>
<hr>
</body>
</html>
HTML <hr> Width Attribute
HTML <hr> Width Attribute
The width attribute specifies the width of the line. （Width属性指定线条的宽度。）
The width attribute is also from the list of deprecated attributes, but is supported in all browsers. （> width属性也来自已弃用的属性列表，但在所有浏览器中都受支持。）
Example of the HTML <hr> tag with the width attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a width of 30%:</p>
<hr width="30%">
</body>
</html>
Use CSS width Property instead of the width attribute. （>使用CSS width属性而不是width属性。）
Example of the HTML <hr> tag used with the width property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 50%:</p>
<hr>
</body>
</html>
HTML <hr> Noshade Attribute
HTML <hr> Noshade Attribute
The noshade attribute makes the horizontal line without shade. （Noshade属性使水平线没有阴影。）
The noshade attribute is one of the deprecated attributes, but is supported in all browsers. （> noshade属性是已弃用的属性之一，但所有浏览器都支持。）
Example of the HTML <hr> tag with the noshade attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr>
<p>Noshaded horizontal line:</p>
<hr noshade>
</body>
</html>
An alternate way to accomplish noshade effect is to use CSS border Property. （>实现noshade效果的另一种方法是使用CSS边框属性。）
Example of the HTML <hr> tag used with the border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
（使用CSS border属性指定的水平线。）
</p>
<hr>
</body>
</html>
HTML align Attribute
HTML align Attribute （HTML ALIGN属性）
The align attribute specifies the alignment of the line. （Align属性指定线条的对齐方式。）
The align attribute is one of the deprecated attributes, but is supported in all browsers. （> align属性是已弃用的属性之一，但在所有浏览器中都受支持。）
Example of the HTML <hr> tag with the align attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%">
</body>
</html>
Use the CSS text-align Property instead of <hr> align attribute.
Example of the HTML <hr> tag used with the text-align property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
text-align: left;
margin-left: 0;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS text-align Property</p>
<hr>
</body>
</html>
The attributes of the <hr> tag are not supported in HTML5, instead, we use CSS styles.
How to Style <hr> Tag
How to Style <hr> Tag
CSS border property is used to style the horizontal line. （CSS边框属性用于设置水平线的样式。）
Example of the HTML <hr> tag styled with the border property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
（/*蓝色边框*/）
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
（虚线边框）
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
（虚线边框）
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
（边框厚度）
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
（/*大圆角边框*/）
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr>
<p>Styling "hr" tag</p>
<hr class="one">
<hr class="two">
<hr class="three">
<hr class="four">
<hr class="five">
</body>
</html>
Attributes
Attributes （属性）
| Attribute | Value | Description |
|---|---|---|
| align | leftcenterright | Defines the horizontal alignment of a line. |
| Not supported in HTML5. | ||
| noshade | noshade | Defines that the line will be displayed without 3D effect. |
| Not supported in HTML5. | ||
| size | pixels | Defines the size of a line. |
| Not supported in HTML5. | ||
| width | pixels% | Defines the width of a line. |
| Not supported in HTML5. |
The <hr> tag supports the Global Attributes and the Event Attributes.