Warum können DIV-Tags nicht in das P-Tag in HTML eingefügt werden?

Zusammenfassung:

1. Blockelemente können Inline-Elemente oder einige Blockelemente (das obige Beispiel ist eigentlich eine falsche Verwendung ---> ich habe e388a4556c0f65e1904146cc1a846bee in e388a4556c0f65e1904146cc1a846bee eingefügt) , aber Inline-Elemente können nicht enthalten Blockelemente. Sie können nur andere Inline-Elemente enthalten

2 , Die DTD Wir verwenden, dass Elemente auf Blockebene nicht innerhalb von

3 platziert werden können : drei Ebenen von Blockelementen

4. img von Inline-Elementen Sie sind im Vergleich zur Eingabe etwas Besonderes. Sie haben eine Inline-Breite und -Höhe Elemente haben es nicht. W3C definiert es als Ersetzungselement.

Ursache:

Während der Arbeit an dem Projekt stellte ich fest, dass der Code, der ursprünglich in DW korrekt war, in MyEclipse6.0 aber dazu aufgefordert N So viele Fehler, so überraschend. Nachdem wir den Grund untersucht hatten, stellten wir fest, dass p nicht innerhalb des Elements P auf Blockebene verschachtelt werden kann. Eingehendes Studium: Lassen Sie uns zunächst Inline-Elemente und Block-Line-Block-Elemente verstehen, da fast alle Elemente in HTML Inline-Elemente oder Blöcke sind. Eines der Elemente .

Das Wort Inline hat viele Interpretationen: Inline, Inline, Inline, Line-Level usw., aber sie bedeuten alle dasselbe , hier wählen wir den üblichen Namen – inline.

Sie können den Unterschied verstehen, indem Sie sich das folgende Beispiel ansehen:

e388a4556c0f65e1904146cc1a846beeTesten Sie die Unterschiede zwischen Blockelemente und 45a2772a6b6107b401db3c9b82c049c2Inline-Elemente54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeTesten Sie den Unterschied zwischene388a4556c0f65e1904146cc1a846beeBlockelementen94b3e26ee717c64999d7867364b1b4a3und Inline-Elementen94b3e26ee717c64999d7867364b1b4a3

                                          🎜> Der Effekt ist wie folgt:

Im obigen Beispiel generiert e388a4556c0f65e1904146cc1a846bee von selbst, und 45a2772a6b6107b401db3c9b82c049c2 funktioniert nicht. Ebenso können wir p als Inline-Element und Span als Blockelement in HTML definieren . Blockelemente können Inline-Elemente oder bestimmte Blockelemente enthalten (das obige Beispiel ist eigentlich eine falsche Verwendung – ich habe e388a4556c0f65e1904146cc1a846bee in e388a4556c0f65e1904146cc1a846bee eingefügt), , aber Inline-Elemente können keine Blockelemente enthalten. es kann nur andere Inline-Elemente enthalten , schauen Sie sich das noch einmal an:

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

Wobei 8349a3b5e1a5cd049cb0168a93eb61ea ist kein Fehler, auch e388a4556c0f65e1904146cc1a846bee ;p> enthält 3499910bf9dac5ae3c52d5ede7383485, aber es ist falsch, wenn es so ist, denn Inline-Elemente sollten keine Blockelemente enthalten:

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

Es gibt auch Fälle, in denen einige Blockelemente keine anderen Blockelemente enthalten können. Zum Beispiel:

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

Und das ist in Ordnung.

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

Warum? Weil die von uns verwendete DTD vorschreibt, dass Elemente auf Blockebene nicht in e388a4556c0f65e1904146cc1a846bee platziert werden können, und einige Browser diese Schreibweise dulden:

<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里面。

Es gibt mehrere Elemente in HTML, die ganz besonders sind: ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 5c69336ffbc20d23018e48b396cdd57a, f5d188ed2c074f8b944552db028f98a1, ihre Unterebenen müssen als Elemente bezeichnet werden, < Das untergeordnete Element Die untergeordnete Ebene von 5c69336ffbc20d23018e48b396cdd57a muss 67bc4f89d416b0b8236eaa5f43dee742 sein. oder ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a usw., und die nächste Unterebene muss a34de1251f0d9fe1e645927f19a896e8 sein (a34de1251f0d9fe1e645927f19a896e8 existiert nur in ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, < ;tbody>), gefolgt von b6c5a531a458a2e790c1fd6421739d1c, wo Inhalte platziert werden können.

Dies ist auch der Grund, warum viele Leute die W3C-Validierung nicht bestehen –>Falsche Elementverschachtelung, aber ändern Sie die Bezeichnung, die den Fehler auslöst, in e388a4556c0f65e1904146cc1a846bee Es kann bestehen, aber wir können nicht blind überprüfen, ob e388a4556c0f65e1904146cc1a846bee ein Gott ist und das -Semantik-Tag

Tatsächlich kann man zwischen Inline-Elementen immer noch mehrere Elemente unterscheiden (a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd usw.) sind etwas Besonderes, sie können Breite und Höhe definieren. Obwohl im IE Im Browser können alle Elemente Breite und Höhe definieren, aber das ist der IE-eigene Standard und nicht alle Browser unterstützen sie. Ich kann kein passendes Wort für die Übersetzung finden Sie haben auch einige Eigenschaften von Blockzeilen, wenn sie inline sind. Der in „Anzeige: Anwendung von Inlineblöcken“ erwähnte Inlineblock ermöglicht tatsächlich die Simulation anderer Elemente als ersetzte Elemente Wenn Sie zu viel darüber wissen, lernen Sie es einfach später.

Das obige ist der detaillierte Inhalt vonWarum können DIV-Tags nicht in das P-Tag in HTML eingefügt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!