Résumé détaillé des règles d'imbrication des balises HTML adaptées aux amis novices_Production de pages HTML/Xhtml_Web

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 nécessite également certaines règles, et vous ne pouvez pas permettre que vos propres habitudes personnelles soient imbriquées sans discernement - 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 encore de nombreuses balises indépendantes et non 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 :

Copier le code

Le code est le suivant :

div1

div2

Effet de rendu du navigateur :
div1
div2

Les deux divs présentés sur la page occupent deux rangées d'espace. À moins qu'ils ne soient flottants ou que d'autres paramètres ne soient définis, personne. est à côté de l'autre. Ils sont tous les deux dominateurs et occupent leur propre rangée d'espace - chaque fois que vous voyez ce phénomène dans une balise, vous pouvez l'appeler : élément de niveau bloc (bloc) ; deux lignes de code dans la balise body Ici :

Copier le codeLe code est le suivant :

span1

span2



Effet de rendu du navigateur :
span1 span2

Cette fois, les deux travées sont juxtaposées à la suite. Elles sont conviviales, amicales et harmonieuses... Avec un comportement d'étiquette comme celui-ci, nous. Vous pouvez les appeler : éléments en ligne ;

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 sont 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, l'exposant, l'indice, point d'ancrage, etc., 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


· L'élément de bloc et les éléments en ligne peuvent être convertis en le code de conversion est le suivant :
display: block; /* Convert to block element*/
display: inline /* Convert to inline element*/

· L'appel CSS les règles pour les éléments de bloc et les éléments en ligne sont différentes (cet article traite de l'imbrication des balises, donc ce point de connaissance ne sera 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 en contenir. éléments de bloc, ils ne peuvent contenir que d'autres éléments en ligne :

—— Oui
—— Oui

< ;/span> >
2. Les éléments de niveau bloc ne peuvent pas être placés à l'intérieur de

 :

— Faux

—— Faux

3. Il existe plusieurs éléments spéciaux au niveau du bloc. Il ne peut contenir que des éléments en ligne et peut ne contient plus d'éléments de niveau bloc. Ces balises spéciales sont :
h1, h2, h3, h4, h5, h6, p, dt

4 à l'intérieur de li Peut contenir des balises div - Cet élément ne contient pas d'éléments de niveau bloc. doivent être répertoriés 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 et ont le même statut, il n'y en a pas. distinction de niveau (par exemple : hiérarchies strictes telles que h1 et h2^_^). Il faut savoir que la balise li peut même accueillir son parent ul ou ol Pourquoi certaines personnes pensent-elles que li ne peut pas accueillir un div ? 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 aux éléments en ligne. sont en ligne avec des éléments en ligne :

—— Droite

< a href=”#” >
—— Droite


< ;/div> —— Faux

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