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 HTML5

est utilisée pour regrouper des éléments. La balise

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

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 HTML5

 :

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

Conseil : Veuillez utiliser < L'élément figcaption> 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

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

comme

.

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

de la sémantique et de la structure du code.

Différences entre HTML 4.01 et HTML 5 La balise

【Recommandations associées】

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

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!