What does hr mean in html?

In HTML, hr means "horizontal line" and is a tag used to create a horizontal line on the page. The hr element is used to separate content in HTML pages without a closing tag; just add "

---

" directly between the elements that need to be separated.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer. The

---

tag defines a topic change (such as a transfer of topic) in an HTML page and is displayed as a horizontal line. The

---

element is used to separate content in an HTML page (or to define a variation).

Description:

• In HTML5,

  ---

  defines the theme variation in the content and is displayed as a horizontal line.

• In HTML 4.01, the

  ---

  tag only appears as a horizontal line.

• In HTML, the

  ---

  tag does not have a closing tag.

html

---

Tag attributes

## Specifies the width of the

---

element.

Attribute	Value	Description
align	left center right	Specifies the alignment of the element
noshade	noshade	Specifies
size	pixels	HTSpecifies the height of the element.
width	pixels %

Example:

<h1 id="HTML">HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1 id="CSS">CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

Rendering:

It can be seen that it is just one Black lines are not beautiful at all, let alone using

---

to make the page beautiful. This requires using css to set the hr style.

For example:

1, css settings hr thickness (bold) and color

<hr   style="max-width:90%"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->

2, css settings Double line style of hr

<hr   style="max-width:90%"/>

3. CSS setting gradient style of hr

html code:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>

css code:

hr.style-one {/*透明渐变水平线*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background: #333;
    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}

Recommended tutorial: "

html video tutorial"

The above is the detailed content of What does hr mean in html?. For more information, please follow other related articles on the PHP Chinese website!