HTML-Tutorial: Definitionsliste

<br />Originaltext: http://andymao.com/andy/post/104.html
Vorheriger Abschnitt : Geordnete Listen Nachdem ich „Ungeordnete Listen“ und „Geordnete Listen“ fertig geschrieben hatte, sagten mir einige Leute, dass diese beiden Artikel nicht interessant seien. Diese beiden Artikel wären bedeutungslos, wenn man sie nur einseitig lesen würde. Das Wichtige an diesen beiden Artikeln ist jedoch, dass sie von den Lesern verlangen, ihre eigenen Gedanken einzubringen. Geordnete und ungeordnete Einzelbeschriftungen sind sehr einfach, solange Sie wissen, wie man sie verwendet. Ich denke jedoch, dass es nicht darauf ankommt, wie die Beschriftung aussieht, sondern welche Art von Daten für welche Art von Liste geeignet ist. Welche Art von Daten sind geordnet und welche sind ungeordnet? Sie sollten nach der Lektüre nachdenken, um etwas zu lernen und sich das Wissen zu eigen zu machen.
Definitionslisten haben eine spezielle Form und Verwendung und werden viel seltener verwendet als ungeordnete Listen. Es gibt auch viele Freunde, die diese Liste noch nicht verwenden. Lassen Sie uns also den Code dieser Liste aufschlüsseln:
<dl>
<dt></dt>
<dd></dd>
</dl>
Wenn wir uns den obigen Code ansehen, können wir sehen, dass es hier kein <li>-Tag gibt. Stattdessen besteht es aus drei Tags: DL, DT und DD. Anhand des Erscheinungsbilds und der vorherigen Liste können wir erkennen, dass DL ein Container für diese Liste ist, genau wie eine Box. Der Unterschied besteht darin, dass die Box diesmal nicht nur eine einzelne kleine Box mit einheitlichem Standard enthält. Stattdessen erscheinen zwei unterschiedliche Inhalte. Was verstehen wir unter DT und DD? Semantisch gesehen ist DT der Name, der Titel, während DD die Erklärung, der Inhalt ist. DT und DD sind beides Boxen. DD erklärt nur das darüber liegende DT und kann keine Ebenen überspringen oder nach unten erklären. Wenn DT nicht existiert, hat DD keine Bedeutung. Was die Frage betrifft, ob auf DT DD folgen muss, habe ich keine definitive Literatur gefunden, die dies erklärt. Basierend auf meinem Verständnis von Definitionslisten denke ich jedoch, dass es sich nicht um eine Definitionsliste handeln kann, wenn in den Daten nur DT, aber kein DD vorhanden ist, und Sie einfach die ungeordnete UL-Liste verwenden können. Wenn aber nur ein oder wenige in den Daten kein DD haben, die meisten aber DD aufweisen, dann denke ich, dass diese Form existieren kann.
<dl>
<dt>Geordnete Liste</dt>
<dt>Geordnete Liste</dt>
<dt>Geordnete Liste</dt>
<dt>Geordnete Liste</dt>
</dl>
Das Obige ist offensichtlich unangebracht. Diese Form ist eine ungeordnete Liste. Warum brauchen wir eine Definitionsliste? Das ergibt semantisch keinen Sinn.
<dl>
<dt>Geordnete Liste</dt>
<dd>Eine geordnete Liste ist eine Datenform, in der sequenzielle Daten in einer Liste organisiert sind</dd>
<dt>Geordnete Liste</dt>
<dd>Eine geordnete Liste ist eine Datenform, in der sequenzielle Daten in einer Liste organisiert sind</dd>
<dt>Dieser Satz hat keine Erklärung</dt>
<dt>Geordnete Liste</dt>
<dd>Eine geordnete Liste ist eine Datenform, in der sequenzielle Daten in einer Liste organisiert sind</dd>
</dl>
Ich persönlich halte die obige Form für umsetzbar. Kann ein DT also mehrere DDs tragen? Ich habe auch keine Literatur gefunden, die beweist, dass dies nicht möglich ist, und auf einigen bekannten Websites gibt es immer noch viele Fälle von einem DT mit mehreren DDs. Meine Meinung hierzu ist, dass es unter besonderen Umständen in Ordnung ist, wenn ein DT mehrere DDs mit sich führt, aber insgesamt mangelt es mir an diesem Ansatz. Zeigen mehrere DDs aus interpretativer Sicht mehrere Interpretationen an? Oder wenn der Erklärungsinhalt in Abschnitte unterteilt werden muss, muss DD nicht der Hund sein, der Mäuse fängt. Ein DD kann viele Absatz-Tags enthalten. Darüber hinaus sind mehrere DDs aus Sicht der Stilanwendung insgesamt lose und ihr Design ist nicht skalierbar genug. Wenn wir beispielsweise einen Effekt erstellen möchten, bei dem durch Klicken auf DT das entsprechende DD ausgeblendet wird, ist dieser Ansatz mit mehreren DDs nicht so einfach umzusetzen. Versuchen Sie daher, einen DT nicht mit mehreren DDs zu verwenden, es sei denn, es dient besonderen Zwecken. Platzieren Sie den Inhalt stattdessen im DD, verwenden Sie Absatz-Tags, um den Inhalt in Abschnitte zu unterteilen, und verwenden Sie geordnete oder ungeordnete Listen, um den Inhalt in Listen zu unterteilen.
Wie eingangs gesagt, ist das Etikett selbst nichts Besonderes. Entscheidend ist, dass man sich überlegt, wie man es anbringt. Hier ist ein Bild, das Ihnen zeigt, ob Sie eine benutzerdefinierte Liste verwenden sollten. Lassen Sie es uns gemeinsam besprechen.

<<: Tutorial zur Installation der dekomprimierten Version von MySQL 8.0.22 (nur für Anfänger)

>>: Beheben Sie das Problem, dass Änderungen an der Docker MySQL-Containerdatenbank nicht wirksam werden

$Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung$

CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)

Füge im CSS-Style des Elements, welches die Hinte...

HTML-Tutorial: Definitionsliste

Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung

Ausführliche Erklärung der Set- und WeakSet-Sammlungen in ES6

Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3

So implementieren Sie eine bidirektionale MySQL-Sicherung

Erfahren Sie, wie Sie Vue3 Reactivity implementieren

js Canvas realisiert Slider-Verifizierung

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

Anweisungen zur Verwendung der Option --rm von Docker Run

So verwenden Sie DQL-Befehle zum Abfragen von Daten in MySQL

So verwenden Sie Docker-Compose zum Erstellen eines ELK-Clusters

Artikel empfehlen

Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

JavaScript zum Implementieren eines Dropdown-Listenauswahlfelds

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)

Aufnahmedateien des öffentlichen WeChat-Kontos abspielen und speichern (AMR-Dateien in MP3 konvertieren)

SSM VUE Axios Detaillierte Erklärung

jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)

Grundlegende Fähigkeiten zum Entwerfen von Web-Frontend-Schnittstellen

Das Frontend erstellt und ändert CAD-Grafikdetails über JavaScript

Eine vollständige Liste der Meta-Tag-Einstellungen für Mobilgeräte

Verwendung des Fokus-innerhalb-Selektors von CSS3

MySQL-Anmelde- und Beendigungsbefehlsformat

Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation

MySQL-Installation mehrerer Instanzen - Boot- und Autostart-Dienstkonfigurationsprozess