Comparaison entre div et span en HTML

Cet article présente principalement la comparaison entre div et span en HTML, et présente respectivement l'utilisation et la comparaison de p et span. Ceux qui sont intéressés peuvent en savoir plus

1. ;p> ;94b3e26ee717c64999d7867364b1b4a3et45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114

1.e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3Tag

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 peuvent définir des partitions ou des sections (pision/section) dans le document, divisant ainsi le document en parties indépendantes et différentes. La balise e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 peut être utilisée comme un outil d'organisation strict et n'utilise aucun formatage qui lui est associé, ce qui contient l'idée de séparer le balisage HTML et les styles de présentation. Dans le travail réel, nous spécifions généralement l'attribut id ou class pour la balise e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 est un élément de niveau bloc, ce qui signifie que son contenu démarre automatiquement sur une nouvelle ligne. Et en fait, les nouvelles lignes sont le seul comportement de formatage inhérent à e388a4556c0f65e1904146cc1a846bee.

Le code HTML suivant simule la structure d'un site Web d'actualités. Chaque paire de balises e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 combine le titre et le résumé de chaque actualité. Autrement dit, e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 ajoute une structure supplémentaire au document. En même temps, puisque ces balises e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 appartiennent au même type d'éléments, vous pouvez utiliser l'attribut class="news" pour identifier ces balises e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 fournit uniquement e388a4556c0f65e1904146cc1a846bee 94b3e26ee717c64999d7867364b1b4a3 ajoute une sémantique appropriée et facilite l'utilisation ultérieure des styles pour formater e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3.

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2. Les balises 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114

45a2772a6b6107b401db3c9b82c049c2 sont utilisées pour regrouper les éléments en ligne dans le document).

  <span style="color: Red">注意：</span>

2. Éléments de niveau bloc et éléments en ligne

Éléments de niveau bloc (éléments de bloc) et éléments en ligne/éléments en ligne ( élément en ligne) est un concept en CSS. Les éléments comme e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 et 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a En effet, ces éléments apparaissent comme un bloc de contenu, une « block box ». En revanche, les éléments tels que 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 et 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 sont appelés « éléments en ligne » car leur contenu apparaît sur une seule ligne, une « boîte en ligne ».

Les concepts d'éléments de niveau bloc et d'éléments en ligne ne sont pas fixes, mais relatifs. Nous pouvons changer le type de boîte générée en utilisant la propriété display de l'élément. Cela signifie que vous pouvez faire en sorte que les éléments en ligne (tels que les éléments 3499910bf9dac5ae3c52d5ede7383485) se comportent comme des éléments de niveau bloc en définissant l'attribut display sur block ; vous pouvez également faire en sorte que les éléments générés deviennent des éléments en ligne en définissant display sur inline ou même, Nous pouvons définir l'attribut display sur none pour que l'élément n'ait aucune boîte du tout. Dans ce cas, la boîte et tout son contenu ne seront plus affichés et n'occuperont pas d'espace dans le document.

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

3. Comparaison entre e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 et 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114

1. Similitudes : la balise e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 et la balise 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 sont des balises utilisées pour diviser les intervalles mais n'ont pas de sémantique réelle, toutes deux sont principalement utilisées pour appliquer des feuilles de style.

2. Différences : La balise e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 est un élément de niveau bloc, et le navigateur ajoutera automatiquement une balise de saut de ligne avant et après celle-ci ; La balise /span> est un élément en ligne et les balises de nouvelle ligne ne seront pas automatiquement ajoutées avant et après.

Si vous souhaitez afficher deux éléments de contenu sur la même ligne dans une mise en page Web, le moyen le plus simple est de les envelopper avec des balises 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 Par exemple, une page comporte deux éléments adjacents, l'un est e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3, l'autre est 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114. Pour les afficher sur la même ligne, remplacez e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 par 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114. Bien entendu, cela peut également être réalisé en définissant l'attribut d'affichage des balises telles que e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 sur inline via CSS.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Expliquez en détail via le code comment créer des divs en js, span, label

Discutez en détail de la différence entre le style display:inline dans div et span

Comment définir la hauteur minimale de l'élément en ligne span

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!