recherche

Maison >interface Web >tutoriel HTML >Comment utiliser la balise HTML div ? Voici des exemples d'utilisation de div

Comment utiliser la balise HTML div ? Voici des exemples d'utilisation de div

寻∝梦
寻∝梦original
2018-08-28 13:54:2619112parcourir

Cet article présente l'utilisation détaillée des balises div HTML. Vous pouvez utiliser des div sans CSS. Bien que cela soit moins utile, cela reste quelque peu utile. Cependant, si vous ajoutez du CSS, il peut mieux afficher les balises div. utilisation, voici une introduction à la signification de HTML div. Jetons-y un coup d'œil maintenant

Tout d'abord, parlons de la signification et de l'utilisation de div :

Voici la définition de div :

peut définir des divisions ou des sections (division/section) dans le document. La balise

peut diviser le document en parties indépendantes et différentes. Il peut être utilisé comme un outil d’organisation strict et n’utilise aucun formatage qui lui est associé.

Si

est marqué d'un identifiant ou d'une classe, la balise devient plus efficace.

Voici une introduction à l'utilisation de div :

Cela signifie que son contenu démarre automatiquement sur une nouvelle ligne. En fait, les sauts de ligne sont le seul comportement de formatage inhérent à
. Des styles supplémentaires peuvent être appliqués via la classe ou l'identifiant de
.

Il n'est pas nécessaire d'ajouter une classe ou un identifiant à chaque

, bien que cela présente certains avantages.

Il est possible d'appliquer des attributs class ou id au même élément

, mais il est plus courant de n'en appliquer qu'un seul. La principale différence entre les deux est que class est utilisé pour des groupes d'éléments (éléments similaires ou peut être compris comme un certain type d'éléments), tandis que id est utilisé pour identifier des éléments individuels et uniques.

Boîte d'invite de balise HTML div :

Conseils : L'élément

Astuce : Par défaut, les navigateurs placent généralement un saut de ligne avant et après un élément

Cependant, vous pouvez modifier cela en utilisant CSS.

Analysons maintenant un cas : 

<body>
 <h1>PHP中文网</h1>
  <p>编程语言教室，里面有很多课程...</p>
  ...
 <div class="news">
  <h2>php中文网首页 1</h2>
  <p>关于HTML5的东西都在这里...</p>
  ...
 </div>
 <div class="news">
  <h2>php中文网首 2</h2>
  <p>关于HTML的东西都在这里...</p>
  ...
 </div>
 ...
</body>

L'effet de ce cas est tel que le montre la figure :

Comment utiliser la balise HTML div ? Voici des exemples dutilisation de div

Expliquons maintenant la situation en voyant l'exemple :

Comme vous pouvez le voir, le HTML ci-dessus simule la structure d'un site Web d'actualités. Chacun de ces divs combine le titre et le résumé de chaque actualité, ce qui signifie que les divs ajoutent une structure supplémentaire au document. Dans le même temps, puisque ces divs appartiennent au même type d'éléments, vous pouvez utiliser class="news" pour identifier ces divs. Cela ajoute non seulement une sémantique appropriée aux divs, mais facilite également l'utilisation ultérieure de styles pour formater les divs. , qui fait d’une pierre deux coups.

D'accord, ce qui précède concerne toutes les utilisations des balises HTML div, car de nombreuses utilisations sont utilisées avec le CSS, c'est donc le seul point sans utiliser les styles CSS. J'espère que tout le monde pourra apprendre le CSS le plus tôt possible. Si vous avez des questions, vous pouvez Poser une question ci-dessous

[Recommandation de la rédaction]

Quel est le rôle de la balise méta HTML ? Introduction à l'utilisation des balises méta html

Comment utiliser les balises de base html ? Comment utiliser la balise de base (avec exemples)

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Que signifie la balise HTML ul ? Explication détaillée du rôle de la balise HTML ulArticle suivant：Que signifie la balise HTML ul ? Explication détaillée du rôle de la balise HTML ul

Articles Liés

Voir plus