Was sind die Attribute des HTML-HR-Tags? Detaillierte Erläuterung des Stils des HTML-HR-Tags

Was sind die Attribute des HTML-HR-Tags? Detaillierte Erläuterung des Stils des HTML-HR-Tags. In diesem Artikel werden die Definition und Attributbeschreibung des HR-Tags in HTML sowie verschiedene Methoden zur Verwendung des HTML-HR-Tag-Stils

HR-Tag in HTML vorgestellt Definition und Verwendung: Das Tag

---

erstellt eine horizontale Linie in einer HTML-Seite.

Horizontale Regeln können ein Dokument visuell in Teile unterteilen.

HTML

---

-Tag-Beispiel:

Titel und Absatz durch horizontale Linien getrennt:

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

Optionale Attribute des hr-Tags in HTML:

Verwendung von HR-Tags in HTML in Webseiten:

<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">

Verwendung verschiedener Stile von HR-Tags in HTML :

Die verschiedenen HR-Stile im Webdesign werden Ihrer Seite bei richtiger Anwendung viel Farbe verleihen. Nachfolgend stellen wir Ihnen die verschiedenen Stile und Verwendungsmethoden im Detail vor!

Der Editor, den ich verwende, hängt von Ihren persönlichen Vorlieben ab. Auch wenn Sie txt direkt verwenden, ist dies immer noch der Fall statisch.

Der erste Typ:

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

height:2px; ist die Höhe von hr

border:none; ist kein Rand

border-top:2px dotted #185598; dient zum Festlegen des Stils horizontaler Linien

gepunktete gestrichelte Linie #185598 Farbe

Zweitens:

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

Drittens:

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

Vierter Typ :

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

Verwenden Sie

für verschiedene HR-Stile in HTML. Typ 5:

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

Typ 6:

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

Farbverlaufstrennzeichen:

<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>

Transparente Trennlinie in der Mitte:

<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>

Undurchsichtige Trennlinie in der Mitte:

<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>

Wellenlinie:

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

Dreifarbige Linie:

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

Gepunktete Linie:

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

Vertikale Linie:

<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>

Unterschied zwischen HTML und XHTML

In HTML ist das

---

-Tag kein End-Tag.

In XHTML muss

---

ordnungsgemäß geschlossen werden, z. B.

---

.

In HTML 4.01 sind alle Rendering-Attribute des hr-Elements veraltet.

In XHTML 1.0 Strict DTD werden nicht alle Rendering-Attribute des hr-Elements unterstützt.

[Verwandte Empfehlungen]

Welche Rolle spielt der HTML-Titel-Tag? Detaillierte Einführung in den HTML-Titel-Tag

Wissen Sie, wie man den HTML-Select-Tag verwendet? Einführung in HTML-Select-Tag-Attribute

Das obige ist der detaillierte Inhalt vonWas sind die Attribute des HTML-HR-Tags? Detaillierte Erläuterung des Stils des HTML-HR-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!