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

et

1.

Tag

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

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

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 à

.

Le code HTML suivant simule la structure d'un site Web d'actualités. Chaque paire de balises

combine le titre et le résumé de chaque actualité. Autrement dit,

ajoute une structure supplémentaire au document. En même temps, puisque ces balises

appartiennent au même type d'éléments, vous pouvez utiliser l'attribut class="news" pour identifier ces balises

fournit uniquement

ajoute une sémantique appropriée et facilite l'utilisation ultérieure des styles pour formater

.

     <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

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

et

En effet, ces éléments apparaissent comme un bloc de contenu, une « block box ». En revanche, les éléments tels que et 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 ) 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

et

1. Similitudes : la balise

et la balise 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

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 Par exemple, une page comporte deux éléments adjacents, l'un est

, l'autre est . Pour les afficher sur la même ligne, remplacez

par . Bien entendu, cela peut également être réalisé en définissant l'attribut d'affichage des balises telles que

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!