Quels sont les attributs de la balise html hr ? Explication détaillée du style de la balise HTML hr

Quels sont les attributs de la balise html hr ? Explication détaillée du style de la balise hr HTML. Cet article présente la définition et la description des attributs de la balise hr en html, ainsi que plusieurs méthodes d'utilisation du style de la balise hr html

balise HR en html. Définition et utilisation : La balise

Les règles horizontales peuvent séparer visuellement un document en parties.

Exemple de balise HTML

Titre et paragraphe séparés par des lignes horizontales :

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

Attributs optionnels de la balise hr en HTML :

Utilisation de la balise hr en html dans les pages web :

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

Balise hr en html Utilisation de différents styles :

Les différents styles de RH dans la conception Web, s'ils sont utilisés correctement, ajouteront beaucoup de couleur à votre page. Présentons en détail les différents styles et les différentes méthodes d'utilisation ci-dessous. !

L'éditeur que j'utilise est Eclipse. Ceci est basé sur vos préférences personnelles. Peu importe ce que vous utilisez. Même si vous utilisez txt directement, vous pouvez toujours obtenir l'effet ici. statique.

Le premier type :

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

height:2px; est la hauteur de hr

border:none; n'est pas une bordure

border-top : 2px pointillé #185598; consiste à définir le style de la ligne horizontale

ligne pointillée pointillée #185598 Couleur

Deuxième :

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

Troisième :

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

Quatrième type :

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

Utiliser différents styles de ressources humaines en HTML

Cinquième type :

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

Sixième type :

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

Diviseur de couleur dégradé :

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

Diviseur central transparent :

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

Diviseur central opaque :

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

Lignes ondulées :

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

Lignes tricolores :

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

Lignes pointillées :

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

Lignes verticales :

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

Différences entre HTML et XHTML

En HTML, la balise

En XHTML,

Dans HTML 4.01, tous les attributs de rendu de l'élément hr sont obsolètes.

Dans XHTML 1.0 Strict DTD, tous les attributs de rendu de l'élément hr ne sont pas pris en charge.

[Recommandations associées]

Quel est le rôle de la balise titre html ? Introduction détaillée à la balise titre html

Savez-vous comment utiliser la balise html select ? Introduction aux attributs des balises de sélection HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!