Das Das Tag wurde vor einiger Zeit mit HTML5 eingeführt, obwohl Sie möglicherweise noch nicht wissen, was es tut oder wie es in vielen verschiedenen Situationen verwendet werden kann. In diesem Lernprogramm erfahren Sie den Unterschied zwischen und andere vergleichbare Tags und wie Sie damit beginnen können, um die Art und Weise zu verbessern, in der Sie Elemente in Ihrem Markup gruppieren.
Dies ist ein Anfängerlehrgang, dient aber auch als nützliche Auffrischung für andere.
Typische Verwendung für
Sehen wir uns zuerst an, was der HTML5 Doctor zu dieser Angelegenheit zu sagen hat:
Das figure-Element stellt eine Inhaltseinheit dar, optional mit einer Beschriftung, die in sich abgeschlossen ist und normalerweise als einzelne Einheit aus dem Hauptfluss des Dokuments referenziert wird und die ohne den Hauptfluss des Dokuments verschoben werden kann die Bedeutung des Dokuments beeinflussen. Richard Clark
Also die Zahl Das Element gibt in sich geschlossenen Inhalt an, wie z. B. Illustrationen und Fotos. Das bedeutet, dass Sie immer die Zahl tag um etwas anderes unterzubringen.
Ein weit verbreitetes Missverständnis ist das Zahl kann nur für Bilder verwendet werden. Tatsächlich kann es verwendet werden, um eine beliebige Anzahl verschiedener Dinge zusammenzufassen, einschließlich, aber nicht beschränkt auf Bilder, Video-, Audio- und Codeblöcke.
Seitenstruktur definieren
Das Zahl ist eine Abschnittswurzel, was bedeutet, dass sie ihren Inhalt effektiv von der Struktur ihres Vorfahren isoliert. Was sich in der Figur befindet, trägt nicht zur Umrisslinie des Dokuments bei. Sie verhält sich als strukturelles Element der Seite und kann daher eigene Überschriften enthalten, beginnend mit einem und die Hierarchie durcharbeiten , und so weiter, aber dies hat keine Auswirkung auf die Hierarchie außerhalb:
Die Hierarchie innerhalb der Figur hat keinen Einfluss auf die Umrisse ihres Vorfahren
Elemente wie diese werden häufig verwendet, um externe Inhalte in das Dokument einzufügen, wie beispielsweise ein Zitat. ist ein anderes Beispiel für ein Schnittwurzelelement.
Bilder
Hier ist ein typisches Beispiel wie Zahl Tag kann verwendet werden, um ein Bild anzuzeigen.
Nun denken Sie vielleicht: "Warum sollte ich mein img-Tag in zusätzliche Markups einwickeln?" Das ist eine faire Frage, aber es macht Sinn, sobald Sie erkennen, dass a kann mehr als ein untergeordnetes Element enthalten, z. B. eine Beschriftung.
Es gibt auch einen Tag für eine Bildunterschrift, oder besser gesagt, figcaption. Wenn Sie dies berücksichtigen, können Sie es auf folgende Weise verwenden.
Wie geht's? Ich bin eine Bildunterschrift!
Mehrere Bilder
Verwenden Sie nur eine Reihe von img Elemente, um Bilder zusammen anzuzeigen, funktionieren gut, obwohl jedes einzelne Bild als eigenständiger Code-Block stehen würde, der in keiner Beziehung zu anderen steht. In Fällen, in denen Bilder eine Art Beziehung haben Zahl kommt zur Rettung. Diese drei Bilder sind miteinander verbunden und enthalten eine einzige Zusammenfassung in der figcaption.
Drei verschiedene Bilder, zusammen als Figur gruppiert und mit Figcaption beschriftet.
Verwenden für Codeblöcke
Das Zahl Das Talent von element für das Gruppieren von häufig themenbezogenen Elementen endet nicht dort. Vielleicht möchten Sie etwas Inline-Code zusammen mit einer Beschriftung in einem Lernprogramm zusammenfassen, das Sie dann verwenden könnten Zahl und figcaption auf die folgende Weise:
Das Leben ist gut, sagte HTML5 zu XHTML.
In diesem Codeblock sehen wir HTML5, das mit XHTML spricht.
Zahl kann auf diese Weise mit verwendet werden Code, Vor, und Samp, So lassen sich Codeblöcke einfach gruppieren.
Einpacken
Das ist es! Sie haben gelernt, wie man das benutzt Zahl Element zusammen mit figcaption und andere Elemente zum Gruppieren mehrerer Elemente. Wie benutzt du die Zahl Element im Moment? Wird sich das durch das Lesen dieses kurzen Tipp ändern? Sagen Sie uns in den Kommentaren!
Share
Accentsconagua
Die Hierarchie innerhalb der Figur hat keinen Einfluss auf die Umrisse ihres Vorfahren
