Was bedeutet das HTML5-Figuren-Tag? Ausführliche Erklärung zur Verwendung des HTML5-Figuren-Tags

Was bedeutet das HTML5-Figuren-Tag? Möchten Sie wissen, wie Sie den HTML5-Figuren-Tag verwenden? Als nächstes werde ich den heutigen Artikel vorstellen, in dem es hauptsächlich um die Definition und Verwendung des HTML5-Figuren-Tags geht (mit Beispielen)

Die Definition und Verwendung des HTML5

-Tags:

wird zum Gruppieren von Elementen verwendet. Das

-Tag gibt unabhängige Stream-Inhalte an (Bilder, Diagramme, Fotos, Code usw.).

Der Inhalt des Elements sollte sich auf den Hauptinhalt beziehen, während die Position des Elements unabhängig vom Hauptinhalt sein sollte. Wenn es entfernt wird, sollte es keine Auswirkungen auf den Dokumentenfluss haben.

Beispiel für HTML5

-Tag:

Ein Unterabschnitt im Dokument, der die VR China beschreibt:

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

Tipp: Bitte verwenden Sie

Element fügt der Gruppe von Elementen einen Titel hinzu.

Das Abbildungselement ist eine Kombination von Elementen, optional mit einem Titel. Das Figure-Tag wird verwendet, um einen unabhängigen Inhalt auf der Website-Produktionsseite darzustellen. Das Entfernen von ihm von der Webseite hat keine Auswirkungen auf andere Inhalte auf der Webseite. Der durch die Abbildung dargestellte Inhalt kann ein Bild, ein statistisches Diagramm oder ein Codebeispiel sein.

Hinweis: In einem Figurenelement darf nur ein figcaption-Element platziert werden, andere Elemente können unbegrenzt platziert werden.

Die Rolle des HTML5-Figuren-Tags:

Ich habe schon einmal ein sehr interessantes Rad gesehen: den Hover-Effekt, der ohne Verwendung von JavaScript-Code implementiert wurde. Es war alles HTML + CSS. Ich habe das Reviewer-Tool verwendet, um mir den Quellcode anzusehen, und festgestellt, dass die Grundstruktur von HTML wie folgt ist:

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

Und der Code des HTML-Teils des von mir implementierten Quellcodes, Beispielvergleich :

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

Der offensichtliche Unterschied besteht darin, dass der Originalcode das neue HTML5-Tag

verwendet, um den grundlegenden Aufbau der Seite zu implementieren.

Es ist erwähnenswert, dass im offiziellen Dokument erwähnt wird, dass es unabhängig vom Mainstream des Dokuments ist. Es wird auch erwähnt, dass der in diesem Tag enthaltene Inhalt unabhängig und portierbar sein sollte und keinen Einfluss auf die haben sollte Mainstream-Inhalte. Dann ist die oben erwähnte Beschreibung der Inhalt des optionalen Subtags

als

.

Jetzt gehe ich zurück zu dem Rad, das ich zuvor neu erfinden wollte, und stelle fest, dass es sowohl in Bezug auf die Semantik klarer wird, wenn ich den gesamten Beschreibungsinhalt des Bildes in das

-Tag einpacke und Codestruktur.

Unterschiede zwischen HTML 4.01 und HTML 5 Das

-Tag ist ein neues Tag in HTML 5.

【Verwandte Empfehlungen】

Was bedeutet das HTML5-Tag? Detaillierte Erläuterung der grundlegenden Verwendung des HTML5--Tags

Was bedeutet das Header-Tag in HTML5? Wissen Sie, wie man das Header-Tag in HTML5 verwendet?

Das obige ist der detaillierte Inhalt vonWas bedeutet das HTML5-Figuren-Tag? Ausführliche Erklärung zur Verwendung des HTML5-Figuren-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!