Pourquoi les balises DIV ne peuvent-elles pas être incluses dans la balise P en HTML ?

Résumé :

1 les éléments de bloc peuvent contenir éléments en ligne <.> ou certains éléments de bloc (l'exemple ci-dessus est en fait une mauvaise utilisation ---> J'ai mis e388a4556c0f65e1904146cc1a846bee à l'intérieur de e388a4556c0f65e1904146cc1a846bee) , mais les éléments en ligne ne peuvent pas contenir éléments de bloc Ils ne peuvent contenir que d'autres éléments en ligne

2 , La DTD. que nous utilisons stipule que les éléments au niveau du bloc ne peuvent pas être placés à l'intérieur de e388a4556c0f65e1904146cc1a846bee : trois niveaux d'éléments de bloc

4. img des éléments en ligne Ils sont spéciaux à saisir. n'en avons pas. Le W3C le définit comme un élément de remplacement. Définir l'élément sur display:inline-block simule l'effet de l'élément de remplacement.

Cause :
En travaillant sur le projet, j'ai découvert que le code qui était initialement correct dans DW était dans MyEclipse6.0

mais a incité N Tant d'erreurs, tellement surprenant. Ainsi, après avoir étudié la raison, nous avons constaté que p ne peut pas être imbriqué dans l’élément P au niveau du bloc. Étude approfondie : comprenons d'abord les éléments en ligne et les éléments de bloc en ligne, car presque tous les éléments en HTML sont des éléments ou des blocs en ligne. L'un des éléments . Le mot in-line a de nombreuses interprétations : inline, inline, inline, niveau ligne, etc., mais ils signifient tous la même chose. , nous choisissons ici le nom habituel - inline.

Vous pouvez comprendre la différence en regardant l'exemple ci-dessous :

e388a4556c0f65e1904146cc1a846beeTestez les différences entre éléments de bloc et 45a2772a6b6107b401db3c9b82c049c2éléments en ligne54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeTester la différence entre les élémentse388a4556c0f65e1904146cc1a846beeblock94b3e26ee717c64999d7867364b1b4a3 et les éléments en ligne94b3e26ee717c64999d7867364b1b4a3

                                            🎜> L'effet est le suivant :

Dans l'exemple ci-dessus, e388a4556c0f65e1904146cc1a846bee par lui-même, et 45a2772a6b6107b401db3c9b82c049c2 ne se casse pas. Ce n'est le cas que sans rendu CSS. De même, nous pouvons également définir p comme un élément en ligne et span comme un élément de bloc via CSS. Cependant, nous ne pouvons pas les convertir arbitrairement en HTML. . Les éléments de bloc peuvent contenir des éléments en ligne ou certains éléments de bloc (l'exemple ci-dessus est en fait une mauvaise utilisation ---> J'ai mis e388a4556c0f65e1904146cc1a846bee dans e388a4556c0f65e1904146cc1a846bee à l'intérieur),

mais les éléments en ligne ne peuvent pas contenir d'éléments de bloc, il ne peut contenir que d'autres éléments en ligne , regardez à nouveau ceci :

<h2>我喜欢在<a href="#" >经典论坛</a>讨论Web标准的原因。</h2>

Où a9cd2f6be376a17a7b11e1c9a933f439 est un élément en ligne. Il n'y a aucune erreur dans c1a436a314ed609750bd7c7d319db4da, y compris 3499910bf9dac5ae3c52d5ede7383485. ;p> contient 3499910bf9dac5ae3c52d5ede7383485, mais c'est faux si c'est comme ça, car les éléments en ligne ne doivent pas contenir d'éléments de bloc :

<a href="#"> <h2>这样是错误的用法！</h2></a>

Il existe également des cas où certains éléments de bloc ne peuvent pas contenir d'autres éléments de bloc. Par exemple :

<p>测试文字
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字
</p>

Et ça va.

<ul>
<li><p>这样是可以的</p></li>
</ul>

Pourquoi ? Parce que la DTD que nous utilisons stipule que les éléments de niveau bloc ne peuvent pas être placés à l'intérieur de e388a4556c0f65e1904146cc1a846bee, et certains navigateurs tolèrent cette écriture :

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

当一个e388a4556c0f65e1904146cc1a846bee签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

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

所以刚才那样的写法会变成这样：

<p>测试文字</p>
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字<p></p>

这也是跟刚才说第一个例子中e388a4556c0f65e1904146cc1a846bee里面放e388a4556c0f65e1904146cc1a846bee不合理是同一个道理。

以下为重点理解部分：

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道100db36a723c770d327fc0aef2ce13b1是在最外层，100db36a723c770d327fc0aef2ce13b1下一级里面只会有8cea2e99ba256aa9b779f5ab5949ca21、6c04bd5ca3fcae76e30b72ad730ca86d、f900b4fc197b16ab214eecf015bb6bd2、37f861bd36cef5b6406eba87d20a5bab，而我们已经知道了可视的元素只会出现在6c04bd5ca3fcae76e30b72ad730ca86d里，所以我们把6c04bd5ca3fcae76e30b72ad730ca86d划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、63bd76834ec05ac1f4c0ebbeaafb0994；段落标记的e388a4556c0f65e1904146cc1a846bee；分隔线f32b48428a809b51f04d3228cdf461fa和一个特别的元素73de882deff7a050a357292d0a1fca94(它只存在于列表元素5c69336ffbc20d23018e48b396cdd57a的子一级)。

为什么说第二级的元素可以自由嵌套呢？我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把ff6d136ddc5fdfeffaf53ff6ee95f185嵌在e388a4556c0f65e1904146cc1a846bee里面，也可以把e388a4556c0f65e1904146cc1a846bee嵌在25edfb22a4f469ecb59f1190150159c6里面。

Il y a plusieurs éléments en HTML qui sont assez particuliers : ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 5c69336ffbc20d23018e48b396cdd57a, f5d188ed2c074f8b944552db028f98a1, leurs sous-niveaux doivent être désignés comme éléments, 6361dbf5b36a6d33b45567cc95a20908 et c34106e0b4e09414b63b2ea253ff83d6 doit être 25edfb22a4f469ecb59f1190150159c6; le niveau enfant de 5c69336ffbc20d23018e48b396cdd57a doit être 73de882deff7a050a357292d0a1fca94 ou ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a, etc., et la sous-couche suivante doit être a34de1251f0d9fe1e645927f19a896e8 (a34de1251f0d9fe1e645927f19a896e8 n'existe que dans ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, < ; tbody>), suivi de b6c5a531a458a2e790c1fd6421739d1c ou b4d429308760b6c2d20d6300079ed38e

C'est aussi la raison pour laquelle de nombreuses personnes ne réussissent pas la validation W3C--> ; Cela peut passer, mais nous ne pouvons pas vérifier aveuglément par souci de vérification. e388a4556c0f65e1904146cc1a846bee n'est pas un dieu, et e388a4556c0f65e1904146cc1a846bee ne peut pas remplacer la balise sémantique .

En fait, parmi les éléments en ligne, vous pouvez toujours les distinguer. Il existe plusieurs éléments. (a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, etc.) sont spéciaux, ils peuvent définir la largeur et la hauteur. Bien que dans IE Dans le navigateur, tous les éléments peuvent définir la largeur et la hauteur, mais il s'agit du propre standard d'IE et tous les navigateurs ne le prennent pas en charge. Je ne trouve pas de mot approprié pour la traduction, ils. ont également certaines caractéristiques de block-line lorsqu'ils sont en ligne. Le inline-block mentionné dans "desplay: application of inline-block" permet en fait de simuler d'autres éléments en tant qu'éléments remplacés. en sais trop, apprenez-le plus tard.

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!