Maison > Article > interface Web > Problème d'imbrication d'éléments HTML

Problème d'imbrication d'éléments HTML

高洛峰original: 2017-02-15 14:03:592155parcourir

Problème d'imbrication d'éléments HTML

Imbrication d'éléments

<p>Les éléments de bloc peuvent contenir des éléments en ligne ou des 某些éléments de bloc, mais les éléments en ligne ne peuvent pas contenir d'éléments de bloc, ils ne peuvent contenir que d'autres éléments en ligne.

Problème d'imbrication de l'élément P

<p>
  <p></p>
</p>

<p> L'imbrication de p et d'autres éléments au niveau du bloc dans l'élément P est analysée comme suit dans le navigateur :

<p>

HTML元素嵌套问题

<p>Vous pouvez voir qu'il y aura un <p></p> vide à la fin de l'élément.

<p> Grâce à une enquête, il a été constaté que p元素 ne peut pas être emballé dans 块级元素.
Parce que la DTD que nous utilisons stipule que 块级元素 ne peut pas être placé à l'intérieur de <p>, et que certains navigateurs tolèrent cette écriture :

<p>这是一个段落的开始
<p>这是另一个段落的开始

<p> est utilisé comme une balise <p> Avant de se terminer, il se terminera lorsqu'il rencontrera l'élément de bloc suivant. En fait, le navigateur les traite comme ceci :

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>

<p>Cela explique également pourquoi il y en a trop dans le navigateur à la fin. Créez un . <p></p>

Problème d'imbrication des éléments au niveau du bloc

Vous pouvez d'abord diviser à nouveau tous les éléments de bloc en plusieurs niveaux. Nous savons déjà que <p> est au niveau le plus externe et <html> est le suivant. ne sera que <html> dans le niveau, et nous savons déjà que les éléments visuels n'apparaîtront que dans <head>、<body>、<frameset>、<noframes>, nous mettons donc <body> dans le premier niveau. Ensuite, mettez les éléments de <body> au troisième niveau, et les autres au deuxième niveau. Les éléments dits qui ne peuvent pas être librement imbriqués sont ceux dans lesquels seuls les éléments en ligne peuvent être placés. Ils comprennent : 不可以自由嵌套 pour les balises de titre <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption> pour les séparateurs de paragraphe <p> et un élément spécial <hr>( Il n'existe qu'au niveau enfant de l'élément de liste <dt>). <dl>

<p> signifie que les éléments de niveau bloc ne peuvent imbriquer que des éléments en ligne. 三级元素 se trouve également être l'un d'entre eux. p

Pourquoi les éléments de deuxième niveau peuvent-ils être imbriqués librement ?

Nous pouvons les considérer comme des conteneurs (ou des boîtes), et la taille de ces conteneurs peut être modifiée librement. peut <p> est intégré à l'intérieur de <ul>, ou <p> peut être intégré à l'intérieur de <p>. <li>

Il y a plusieurs éléments en HTML qui sont assez particuliers : <p>, leurs sous-niveaux doivent être des éléments spécifiés, le sous-niveau de <ul>、

、<dl>、<table>

<ul>、 doit être <li> ou <dl> ; le sous-niveau de <dt> doit être <dd> ou <table>, etc., et le sous-niveau doit être <caption> (<thead>、<tfoot>、<tbody> n'existe qu'en <tr>), suivi de <tr> ou <thead>、<tfoot>、<tbody> où le contenu peut être placé. <td><th>Éléments en ligne
En fait, parmi les éléments en ligne, vous pouvez toujours les distinguer. Il existe plusieurs éléments (
, etc.) qui sont spéciaux. Ils peuvent définir la largeur et. hauteur. Bien que dans les navigateurs <p>, tous les éléments peuvent définir la largeur et la hauteur, il s'agit du propre standard de <img>、<input> et tous les navigateurs ne le prennent pas en charge. IE les appelle éléments remplacés. En fait, c'est ce que nous utilisons souvent. des blocs en ligne, bien que ces éléments appartiennent à inline, ils ont un certain bloc (la largeur et la hauteur peuvent être définies. Nous pouvons également donner à n'importe quel élément l'attribut css display:inline-block). IELes éléments qui ont eux-mêmes un blocage en ligne ne devraient pas le faire ! W3C
Pour plus de problèmes d'imbrication d'éléments HTML et d'articles connexes, veuillez faire attention au site Web PHP chinois ! 
<p></p>

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：Le favicon est plus qu'une simple icôneArticle suivant：Le favicon est plus qu'une simple icône

`Articles Liés`

Voir plus