Règles détaillées pour l'imbrication des balises HTML

Cette fois je vous apporte les règles détaillées d'imbrication des balises HTML, et quelles sont les précautions d'imbrication des balises HTML Voici un cas pratique, jetons un oeil.

J'ai récemment réappris le HTML, ce qui peut être considéré comme une nouvelle compréhension du HTML ! Ne sous-estimez pas cette chose, toutes les pages Web sont basées sur elle ! Résumons en détail les règles d'imbrication des balises HTML. J'espère que cela sera utile à tout le monde.

Il existe de nombreuses balises XHTML : div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... Quand on utilise ces balises pour construire la structure de la page , Ils peuvent être imbriqués à l'infini, mais l'imbrication doit également avoir certaines règles, et vous ne pouvez pas permettre que vos propres habitudes personnelles soient imbriquées de manière aléatoire - XHTML n'est pas XML après tout.

Dans le langage XHTML, nous le savons tous : la balise ul contient li, la balise dl contient dt et dd - les règles d'imbrication de ces balises fixes sont très claires. Cependant, il existe de nombreuses balises indépendantes qui ne sont pas regroupées, comme h1, div, p... Alors quelles sont les règles d'imbrication de ces balises ? Parlons de ce sujet aujourd'hui.

En ce qui concerne les règles d'imbrication des balises XHTML, il faut d'abord savoir qu'il existe deux types de balises XHTML :
Un type est appelé éléments de niveau bloc (block)
L'autre Le type est appelé éléments en ligne (inline, Beaucoup de gens l'appellent aussi : inline, inline, line level, etc.)

La norme pour diviser les éléments au niveau du bloc et les éléments en ligne est très simple. lignes de code dans la balise body :

Le code est le suivant :

<div style=”border: 1px solid red;”>div1</div> 
<div style=”border: 1px solid red;”>div2</div>

Effet de rendu du navigateur :
div1
div2
Les deux divs rendus sur le la page occupe la deuxième ligne d'espace, à moins qu'ils ne soient autorisés à Float (flotter) ou à faire d'autres réglages, sinon personne ne sera l'un à côté de l'autre et ils occuperont leur propre ligne d'espace avec arrogance - à chaque fois vous voyez ce phénomène dans une étiquette, vous pouvez l'appeler : Élément de niveau bloc (bloc)
Mettez les deux lignes de code suivantes dans la balise body :

Le code est le suivant :

<span style=”border: 1px solid red;”>span1</span> 
<span style=”border: 1px solid red;”>span2</span>

L'effet de rendu du navigateur :
span1 span2
Cette fois, les deux travées sont juxtaposées en une seule ligne. Elles sont conviviales et harmonieuses... Avec des tags comme ce comportement. , nous pouvons les appeler : éléments en ligne (inline) ;
La différence entre les éléments de niveau bloc et les éléments en ligne :
·Les éléments de niveau bloc sont généralement utilisés pour créer l'architecture, la mise en page et le contenu d'un site Web. ... Ces tâches physiques majeures appartiennent toutes à des éléments de niveau bloc, qui incluent les balises suivantes :

address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

· Les éléments en ligne sont généralement utilisés dans certains détails ou parties du contenu du site Web pour « souligner » , distinguer les styles, les exposants, les indices, les points d'ancrage", etc. Attendez, les balises suivantes sont toutes des éléments en ligne :

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

· Les éléments de bloc et les éléments en ligne peuvent être convertis les uns aux autres. le code de conversion est le suivant :

display: block; /* 转成块元素 */ 
display: inline; /* 转成内嵌元素 */

· Les règles d'appel CSS pour les éléments de bloc et les éléments en ligne sont différentes (cet article traite de l'imbrication de balises, ce point de connaissance ne sera donc pas expliqué).
Après avoir brièvement compris les éléments de bloc et les éléments en ligne, les règles d'imbrication des balises XHTML peuvent être répertoriées ci-dessous :
1. Les éléments de bloc peuvent contenir des éléments en ligne ou certains éléments de bloc ne peuvent pas contenir. éléments de bloc, ils ne peuvent contenir que d'autres éléments en ligne :

<div><h1></h1><p></p></div> —— 对 
<a href=”#”><span></span></a> —— 对 
<span><div></div></span> —— 错

2 Les éléments de niveau bloc ne peuvent pas être placés à l'intérieur de e388a4556c0f65e1904146cc1a846bee :

<p><ol><li></li></ol></p> —— 错 
<p><div></div></p> —— 错

. 3. Il existe plusieurs éléments spéciaux de niveau bloc qui ne peuvent contenir que des éléments en ligne et ne peuvent pas contenir d'éléments de niveau bloc. Ces balises spéciales sont :

h1、h2、h3、h4、h5、h6、p、dt

4. L'élément n'a pas besoin d'être répertorié séparément, mais de nombreuses personnes sur Internet sont confuses à ce sujet, je vais donc l'expliquer brièvement ici :
Les balises Li et div sont toutes deux des conteneurs pour charger du contenu, avec un statut égal et aucune distinction dans. niveaux (par exemple : des hiérarchies strictes telles que h1 et h2^_^). Vous devez savoir que la balise li peut même accueillir son parent ul ou ol. Pourquoi certaines personnes pensent-elles que li ne l'accepte que ? Ne pensez pas que li est si avare. Même si li a l'air assez mince, en fait, li a un grand cœur...
5. Les éléments de niveau bloc sont juxtaposés aux éléments de niveau bloc, et les éléments en ligne sont juxtaposés à. éléments en ligne :

<div><h2></h2><p></p></div> —— 对 
<div><a href=”#”></a><span></span></div> —— 对 
<div><h2></h2><span></span></div> —— 错

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la structure d'en-tête en HTML

Comment utiliser le style de zone de saisie de type="file "

Dans les listes HTML, quelles sont les différences entre dl(dt,dd), ul(li) et ol(li)

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!