Que signifie la balise figure HTML5 ? Explication détaillée de la façon d'utiliser la balise figure HTML5

Que signifie la balise figure HTML5 ? Voulez-vous savoir comment utiliser la balise figure HTML5 ? Ensuite, je présenterai l'article d'aujourd'hui, qui parle principalement de la définition et de l'utilisation de la balise HTML5 figure (avec des exemples)

La définition et de l'utilisation de la balise HTML524203f2f45e6606542ba09fd2181843a 24203f2f45e6606542ba09fd2181843a est utilisée pour regrouper des éléments. La balise

24203f2f45e6606542ba09fd2181843a spécifie le contenu du flux indépendant (images, graphiques, photos, code, etc.).

24203f2f45e6606542ba09fd2181843a Le contenu de l'élément doit être lié au contenu principal, tandis que la position de l'élément doit être indépendante du contenu principal. S'il est supprimé, il ne devrait avoir aucun impact sur le flux de documents.

Exemple de balise HTML524203f2f45e6606542ba09fd2181843a :

Une sous-section dans le document décrivant la RPC :

Conseil : Veuillez utiliser d2d785fcc479272def0bb7c4a67b55f6 ajoute une légende à un groupe d'éléments.

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

L'élément figure est une combinaison d'éléments, éventuellement avec un titre. La balise figure est utilisée pour représenter un élément de contenu indépendant sur la page de production du site Web. Sa suppression de la page Web n'affectera pas les autres contenus de la page Web. Le contenu représenté par la figure peut être une image, un graphique statistique ou un exemple de code.

Remarque : un seul élément figcaption peut être placé dans un élément figure, et les autres éléments peuvent être placés de manière illimitée.

Le rôle de la balise figure HTML5 :

J'ai déjà vu une roue très intéressante : l'effet Hover, qui était implémenté sans utiliser de code JavaScript. Tout était HTML. + CSS. , a utilisé l'outil de révision pour examiner le code source et a constaté que la structure de base du HTML est la suivante :

Et le code de la partie HTML du code source que j'ai implémenté, exemple de comparaison :

<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>

La différence évidente est que le code original utilise la nouvelle balise HTML5 24203f2f45e6606542ba09fd2181843a pour implémenter la construction de base de la page. .

<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>

Il convient de mentionner qu'il est mentionné dans le document officiel qu'il est indépendant du courant dominant du document. Il est également mentionné que le contenu contenu dans cette balise doit être indépendant, portable et ne pas affecter le contenu. contenu grand public. Ensuite, la description mentionnée ci-dessus est le contenu de la sous-balise facultative 614eb9dc63b3fb809437a716aa228d24 comme 24203f2f45e6606542ba09fd2181843a.

Maintenant, je reviens à la roue que j'allais réinventer auparavant, et j'ai découvert que si tout le contenu de la description de l'image est enveloppé dans la balise 614eb9dc63b3fb809437a716aa228d24 de la sémantique et de la structure du code.

Différences entre HTML 4.01 et HTML 5 La balise

24203f2f45e6606542ba09fd2181843a

【Recommandations associées】

Que signifie la balise HTML56ecb87e5318a36c03c59e25d55f43372 Explication détaillée de l'utilisation de base de la balise HTML56ecb87e5318a36c03c59e25d55f43372

Que signifie la balise d'en-tête en HTML5 ? Savez-vous comment utiliser la balise header en HTML5 ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!