Html | Details Tag

Die Organisation von Daten auf einer Website ist eine entscheidende Aufgabe. Insbesondere bei einem großen Text hilft die Organisation der Daten, Lesbarkeitsprobleme für Benutzer zu vermeiden. In einem anderen Szenario möchte der Benutzer nur die Informationen sehen, wenn er auf einen bestimmten Abschnitt klickt. Zu diesem Zweck die HTML “<Details>Das Tag wird verwendet, auf das angeklickt werden kann, um die Details anzuzeigen oder auszublenden. Außerdem wird das in dem Detail -Tag hinzugefügte Zusammenfassungs -Tag zum Hinzufügen von sichtbaren Überschriften verwendet.

Dieses Tutorial bietet eine detaillierte Anleitung zum HTML -Tag.

So verwenden Sie HTML -Tag?

Um das HTML -Tag zu verwenden, folgen Sie der bereitgestellten Syntax:

Einige Überschrift

Inhalt…

In der oben gegebenen Syntax:

• ist das Startetik.
• Das Tag wird verwendet, um eine sichtbare Überschrift für die Details anzugeben.
• ist das Schlussetikett.

• Tag gibt einen Absatzinhalt für die Seite an.

• ist das Schlussetikett.
• ist das Schlussetikett.

Beispiel: So fügen Sie Element in HTML ein?

Fügen Sie zunächst ein DIV -Element mit einem Klassennamen hinzuvor”In HTML. In diesem DIV -Element hinzufügen

Element, um einige Absatzinhalte wie unten gezeigt anzugeben:

Hier ist die Liste der HTML -Tags mit ihren Details:

Fügen Sie in diesem DIV -Element so viele Detail -Tags hinzu, wie Sie möchten. Hier in diesem Beispiel werden wir zusammen mit dem HTML -Tag drei Detail -Tags hinzufügen und

Schild:

HTML BR -Tag

HTML BR -Tag wird verwendet, um eine Zeilenpause hinzuzufügen.

HTML Head Tag

HTML -Kopf -Tag wird verwendet, um die Metadaten zu halten.

HTML P -Tag

HTML P -Tag wird verwendet, um einen Absatz hinzuzufügen.

Der oben bereitgestellte Code führt zur entsprechenden Ausgabe:

Ja, die Struktur wurde abgeschlossen. Jetzt wenden sie einige CSS -Eigenschaften für ein besseres Layout an.

Stil „Desc“ div

.Desc
Höhe: 250px;
Rand: 0px Auto;
Grenze: 3px Solid #9C2C77;
Breite: 80%;
Polsterung: 5px 10px;
Schriftgröße: 16px;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
Hintergrundfarbe: #F2C0F5;

Das Div -Element mit Klasse “vor”Wird mit den folgenden Eigenschaften angewendet:

• “HöheEigenschaft wird für die Einstellung der Höhe des Elements verwendet.
• “RandEigenschaft mit dem Wert als '0px Auto”Zeigt den Platz von 0px am oberen Boden an und den gleichen Raum auf den links-rechts-Seiten.
• “Grenze”Eigenschaft mit dem Wert als"3px fest grau”Definiert die Grenzlinienbreite als 3px, fester Randstil und die Grenzefarbe.
• “BreiteDie Eigenschaft wird verwendet, um die Breite des Elements einzustellen/anzupassen.
• “Polsterung”Eigenschaft mit dem Wert als"5px 10px" zeigt an "5px"Platz auf Top-Bottom und"10pxPlatz auf der linken Rechts des Inhalts des Elements.
• “SchriftgrößeDas Attribut gibt die Größe der Schrift eines Elements an.
• “Schriftfamilie”Wird mit der Liste der Schriftstile festgelegt, um sicherzustellen, ob eine Schriftfamilie nicht vom Browser unterstützt wird, andere werden angewendet.
• “HintergrundfarbeDie Eigenschaft wird so eingestellt, dass die Hintergrundfarbe des Elements angegeben wird.

Stil „Details“ Element

Einzelheiten
Cursor: Zeiger;
Schriftfamilie: Kursiv;

Das HTML -Detailelement wird mit den folgenden Eigenschaften angewendet:

• “Mauszeiger”Eigenschaft mit dem Wert festgelegt als“Zeiger”Wird den Mauszeiger als zeigende Hand ändern, wenn er auf dem Inhalt des Elements schwebt.
• “Schriftfamilie”Eigenschaft mit dem Wert zugewiesen“kursiv”, Den Text im kursiven Stil angeben.

Stil „Zusammenfassung“ Element

Zusammenfassung
Schriftdicke: fett;

Das zusammenfassende Tag wird mit dem angewendetSchriftgewicht”Eigenschaft mit dem Wert“deutlich”.

Der obige Code liefert Ergebnisse, wie im folgenden Bild gezeigt:

So können wir das HTML -Element implementieren.

Abschluss

Während der Entwicklung einer Website ist es erforderlich, Daten organisiert zu platzieren. Vor allem, wenn ein langer Text auf einer Website platziert wird, kann er Probleme beim Lesen, Verfolgen von Informationen und mehr verursachen. Das HTML -Tag wird zum Organisieren von Daten verwendet und bietet die Funktionalität zum Ausblenden oder Anzeigen der Details auf dem Klick. Dieser Blog hat das HTML -Tag mit einem praktischen Beispiel demonstriert.