Analyse des règles de nidification pour les balises XHTML

Dans la langue xhtml, nous savons tous que la balise UL contient la balise LI, DL contient des règles DT et DD pour ces balises fixes sont très claires. Cependant, il existe de nombreuses balises qui sont indépendantes et elles ne sont pas liées, comme H1, Div, P ... Alors, quelles sont les règles de nidification pour ces balises? Parlons de ce sujet aujourd'hui.

En ce qui concerne les règles de nidification des balises XHTML, nous devons d'abord savoir qu'il existe deux types de balises XHTML, l'une est appelée élément de bloc , et l'autre est appelé élément en ligne (en ligne, que beaucoup de gens l'appellent: en ligne, en ligne, niveau de ligne, etc.).

Les normes de division pour les éléments au niveau des blocs et les éléments intégrés sont très simples. Veuillez mettre les deux lignes de code suivantes dans l'étiquette corporelle:

<div style = bordure: 1px rouge solide;> div1 </div>

<div style = bordure: 1px rouge solide;> div2 </div>

Effet de rendu du navigateur:

div1div2

Les deux divs présentés sur la page occupent deux rangées d'espace. À moins qu'ils ne soient autorisés à flotter ou à faire d'autres paramètres, personne n'est côte à côte. Ils occupent tous leurs propres rangées d'espaces de manière trop dominante. Si vous voyez une certaine balise ayant ce phénomène, vous pouvez l'appeler: Block Element (Block) ;

Ensuite, mettez les deux lignes de code suivantes dans la balise corporelle:

<span style = bordure: 1px rouge solide;> span1 </span>

<Span Style = Border: 1Px Red solide;> Span2 </span>

Effet de rendu du navigateur:

Span1 Span2

Cette fois, deux portées sont disposées côte à côte, et ils sont sympathiques et amicaux, amicaux et harmonieux ... pour des comportements d'étiquetage comme celui-ci, nous pouvons les appeler: des éléments en ligne ;

La différence entre les éléments au niveau du bloc et les éléments intégrés:

· Les éléments au niveau des blocs sont généralement utilisés pour créer l'architecture, la mise en page et le contenu de la mise en page du site Web ... Ces travaux à gros lien sont des éléments au niveau du bloc, qui incluent les balises suivantes:

div, ul, li, dl, dt, dd, h1 ~ h6, p, adresse ...

· Les éléments en ligne sont généralement utilisés dans certains détails ou parties du contenu du site Web pour souligner et distinguer les styles, les exposés, les indices, les points d'ancrage, etc. Les balises suivantes sont tous des éléments intégrés:

A, Span, Strong, Sub, Sup, IMG ...

· Les éléments de bloc et les éléments intégrés peuvent être convertis les uns aux autres , et le code de conversion est le suivant:

Affichage: bloc; / * Convertir en élément de bloc * /

Affichage: en ligne; / * Convertir en un élément intégré * /

· Les règles d'appel pour CSS entre les éléments de bloc et les éléments intégrés sont différentes (cet article traite de la nidification de l'étiquette, donc je n'expliquerai pas ce point de connaissance).

Après avoir simplement compris les éléments de bloc et les éléments intégrés, vous pouvez énumérer les règles de nidification des balises XHTML :

1. Un élément de bloc peut contenir des éléments en ligne ou certains éléments de bloc, mais un élément en ligne ne peut pas contenir d'éléments de bloc. Il ne peut contenir que d'autres éléments en ligne :

<div> <h1> </h1> <p> </p> </div> - Oui

<a href = #> <span> </span> </a> - Oui

<span> <div> </div> </span> - mal

2. Les éléments au niveau du bloc ne peuvent pas être placés dans <p> :

<p> <l> <li> </li> </l> </p> - Mauvais

<p> <div> </div> </p> - mal

3. Il existe plusieurs éléments spéciaux au niveau des blocs qui ne peuvent contenir que des éléments intégrés et ne peuvent pas contenir d'éléments au niveau du bloc. Ces balises spéciales sont:

H1, H2, H3, H4, H5, H6, P, DT.

4. La balise Div peut être incluse dans Li - Cet article n'a pas besoin d'être répertorié séparément, mais de nombreuses personnes sur Internet ont des doutes à ce sujet, donc je l'expliquerai brièvement ici:

Les balises Li et Div sont des conteneurs pour le chargement du contenu, avec un statut égal et aucune distinction entre les niveaux (par exemple: H1 et H2 avec une hiérarchie stricte ^ _ ^). Vous devez savoir que l'étiquette LI peut même accueillir son parent UL ou OL. Pourquoi certaines personnes pensent-elles que Li ne peut pas accueillir la prochaine div? Ne prenez pas Li si avare, ne regardez pas Li aussi mince qu'il est, en fait, Li a un grand esprit ...

5. Les éléments au niveau du bloc et les éléments au niveau du bloc sont parallèles, et les éléments en ligne et les éléments en ligne sont parallèles:

<div> <h2> </h2> <p> </p> </div> - Oui

<div> <a href = #> </a> <span> </span> </div> - Oui

<div> <h2> </h2> <span> </span> </div> - mal