What are the attributes of html hr tag? Detailed explanation of the style of HTML hr tag

html What are the attributes of the hr tag? Detailed explanation of the style of HTML hr tag. This article introduces the definition and attribute description of hr tag in html, as well as several methods of using the style of html hr tag

hr tag in html Definition and Usage: The

---

tag creates a horizontal line in an HTML page.

Horizontal rule (horizontal rule) can visually separate the document into various parts.

HTML

---

tag example:

Titles and paragraphs separated by horizontal lines:

<h1 id="This-nbsp-is-nbsp-header-nbsp">This is header 1</h1>
<hr />
<p>This is some text</p>

Optional attributes of the hr tag in html:

How to use the hr tag in web pages:

<hr align="center">
<hr align="left">
<hr align="right">
<hr noshade="true">
<hr noshade="false">
<hr size="5">
<hr width="500px">
<hr align="left" noshade="false" size="4" width="500px" color="#ff0000">

How to use the hr tag in various styles ：

The various styles of hr in web design, if used properly, will add a lot of color to your page. Here is a detailed introduction to the various styles and various usage methods!

The editor I use is eclipse. This is based on personal preference. It doesn’t matter what you use. Even if you use txt directly, you can still achieve the effect here. After all, it is just static.

The first type:

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

height:2px; is the height of hr

border:none; is no border

border-top:2px dotted #185598; is to set the style of the horizontal line

dotted dashed line #185598 color

Second:

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

Third:

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

Fourth Type:

<hr style="height:3px;border:none;border-top:3px double red;" />

Use various styles of hr in html

Fifth type:

<hr style="height:5px;border:none;border-top:5px ridge green;" />

Sixth type:

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
border-top:10px groove skyblue;    groove  上颜色        skyblue   下颜色

Gradient color separator :

<hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:10px" color=green>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=1);height:10px" color=blue>

Transparent dividing line in the center:

<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:12px" color=orange>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=3);height:12px" color=#FF00FF>

Opaque dividing line in the center:

<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:15px" color=yellow>
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);height:15px" color=#00FFFF>

Wavy line:

<hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>

Three-color line:

<hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">

Dotted line:

<hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>

Vertical line:

<hr style="height:100px; width:4px" color=orange>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>

Difference between HTML and XHTML

In HTML, the

---

tag does not End tag.

In XHTML,

---

must be closed correctly, such as

---

.

In HTML 4.01, all rendering attributes of the hr element are deprecated.

In XHTML 1.0 Strict DTD, all rendering attributes of the hr element are not supported.

[Related recommendations]

html What is the role of the title tag? A detailed introduction to the html title tag

#Do you know how to use the html select tag? Introduction to html select tag attributes

The above is the detailed content of What are the attributes of html hr tag? Detailed explanation of the style of HTML hr tag. For more information, please follow other related articles on the PHP Chinese website!