Heim Web-Frontend HTML-Tutorial 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

Aug 18, 2018 pm 01:30 PM
hr html

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>This is header 1</h1>
<hr />
<p>This is some text</p>

Optionale Attribute des hr-Tags in HTML:

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

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1583
276
So fügen Sie in HTML ein Symbol zu Ihrer Registerkarte 'Website -Titel' hinzu So fügen Sie in HTML ein Symbol zu Ihrer Registerkarte 'Website -Titel' hinzu Aug 07, 2025 pm 11:30 PM

Um der Website -Titelleiste ein Symbol hinzuzufügen, müssen Sie eine Favicon -Datei in einem Teil des HTML verlinken. Die spezifischen Schritte sind wie folgt: 1. Bereiten Sie eine 16x16- oder 32x32 -Pixel -Symboldatei vor. Es wird empfohlen, Favicon.ico zu verwenden, um es zu benennen und in das Root -Verzeichnis der Website zu platzieren oder moderne Formate wie PNG und SVG zu verwenden. 2. Fügen Sie Link -Tags zu HTML hinzu, wie z. B. PNG- oder SVG -Formaten, das Typattribut entsprechend. 3. Fügen Sie optional hochauflösende Symbole für mobile Geräte wie AppleTouchicon hinzu und geben Sie verschiedene Größen über das Größenattribut an. V.

Warum wird mein HTML -Bild nicht angezeigt? Warum wird mein HTML -Bild nicht angezeigt? Aug 16, 2025 am 10:08 AM

Überprüfen Sie zunächst, ob der SRC -Attributpfad korrekt ist, und stellen Sie sicher, dass der relative oder absolute Pfad mit dem Speicherort der HTML -Datei übereinstimmt. 2. Überprüfen Sie, ob der Dateiname und die Erweiterung korrekt geschrieben sind und fallsempfindlich sind. 3. bestätigen Sie, dass die Bilddatei tatsächlich im angegebenen Verzeichnis vorliegt. 4. Verwenden Sie geeignete ALT -Attribute und stellen Sie sicher, dass das Bildformat .jpg, .png, .gif oder .webp ist, das vom Browser weit verbreitet ist; 5. Fehlerbehebung bei Browser -Cache -Problemen, versuchen Sie, die Aktualisierung zu erzwingen oder direkt auf die Bild -URL zuzugreifen. 6. Überprüfen Sie die Berechtigungseinstellungen der Server, um sicherzustellen, dass die Datei gelesen und nicht blockiert werden kann. 7. Stellen Sie sicher, dass die IMG -Tag -Syntax korrekt ist, einschließlich der richtigen Zitate und der Attributreihenfolge, und schließlich beheben Sie 404 Fehler oder Syntaxprobleme über die Browser -Entwickler -Tools, um sicherzustellen, dass das Bild normal angezeigt wird.

Wie können Sie vom Benutzer ein HTML -Element bearbeitet? Wie können Sie vom Benutzer ein HTML -Element bearbeitet? Aug 11, 2025 pm 05:23 PM

Ja, Sie können HTML -Elemente mithilfe des inhaltlichen Attributs bearbeitbar machen. Die spezifische Methode besteht darin, dem Zielelement contenteditable = "true" hinzuzufügen. Sie können diesen Text beispielsweise bearbeiten und der Benutzer kann den Inhalt direkt klicken und ändern. Dieses Attribut eignet sich für Block- und Inline-Elemente wie Div, P, Span, H1 bis H6. Der Standardwert ist "wahr", um bearbeitbar, "falsch" zu sein, um nicht editabel zu sein, und "erben", um die Einstellungen für das übergeordnete Element zu erben. Um die Zugänglichkeit zu verbessern, wird empfohlen, tabindex = "0 & quo hinzuzufügen

So verwenden Sie Del und INS -Tags in HTML So verwenden Sie Del und INS -Tags in HTML Aug 12, 2025 am 11:38 AM

ThetagisusesedTomarkDeletedText, optional mit dem Datetimeandcitattributestospecifywhen und whyTHEDETIONOCCCURRED.2.THETAGINDICATESSERTEDCONTENT, alsososupportingDatetimeinndciteforcontextheaddition.3.TheSetagsagensetagsagensetagsagensetoagens

So verwenden Sie das asynchrische Attribut für das Laden des Skripts in HTML So verwenden Sie das asynchrische Attribut für das Laden des Skripts in HTML Aug 17, 2025 pm 12:52 PM

TheasyncAttributeInHtmlisusedToloadandExexTernaljavaScriptFilesAsynchron und erlaubt theBrowsertodownloadthescriptinParallelWithhtmlParsingandexexecuteImitimed sofort-uponcompletion, welcheimprovespageloadperformanceBypreventReper-Blocker

So legen Sie einen Standardwert für ein HTML -Element ein So legen Sie einen Standardwert für ein HTML -Element ein Aug 17, 2025 pm 01:00 PM

Um den Standardwert für HTMLSelect -Elemente festzulegen, muss das entsprechende Optionselement mit dem ausgewählten Attribut gekennzeichnet sein. 1. Fügen Sie das ausgewählte Attribut der Option hinzu, die Sie standardmäßig auswählen möchten, z. B. UnitedStates. 2. Stellen Sie sicher, dass nur eine Option in einem einzelnen Auswahl das ausgewählte Attribut ausgewählt hat, und wenn mehrere eine vorhanden ist, ist die erste Quellcode -Reihenfolge. 3. Das ausgewählte Attribut kann überall in der Liste platziert werden, nicht auf die erste Option beschränkt. V. 5. Wenn Sie es dynamisch festlegen müssen, können Sie JavaScript verwenden, um das Wert -Attribut wie document.querySelec zu bedienen

So verwenden Sie das BDO -Tag, um die Textrichtung in HTML zu überschreiben So verwenden Sie das BDO -Tag, um die Textrichtung in HTML zu überschreiben Aug 16, 2025 am 09:32 AM

ThebdotagisusedTooverridethebrowrossersDefaultTextDirectionRenderingwhendealingWithmixedleft-to-Rightandright-to-Links-text-CorrectvisualDisplayByforcingaspecificDirectionusectionThedIrAttributeWithvalues "ltr" oder "rtl", asdemonstrattribute

So verwenden Sie das Adress -Tag in HTML So verwenden Sie das Adress -Tag in HTML Aug 15, 2025 am 06:24 AM

ThetagisusedTodeFineContactinformationForteAuthorOrOrofadocumentorsection; 1. UseSeitemail, Physicaladdress, PhoneNumber, OrwebsiteurlwithinanArticleOrbody; 2.PlaTITInsideForAuthorContactorinfordocument-Widecontactactactactactactactactactactactactactactactactactactactactacleorbody

See all articles