简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Verschachtelungsproblem bei HTML-Elementen

高洛峰
Freigeben： 2017-02-15 14:03:59
Original
2033 Leute haben es durchsucht

HTML-Elementverschachtelungsproblem

Elementverschachtelung

<p>Blockelemente können Inline-Elemente oder 某些Blockelemente enthalten, aber Inline-Elemente können keine Blockelemente enthalten, sie können nur andere Inline-Elemente enthalten.

P-Element-Verschachtelungsproblem

<p>
  <p></p>
</p>
Nach dem Login kopieren
<p> Die Verschachtelung von p und anderen Elementen auf Blockebene im P-Element wird im Browser wie folgt analysiert:

<p>HTML元素嵌套问题

<p>Sie können sehen, dass am Ende des Elements ein leeres <p></p> steht.

<p> Bei einer Untersuchung wurde festgestellt, dass p元素 nicht innerhalb von 块级元素 verpackt werden kann.
Da die von uns verwendete DTD vorschreibt, dass 块级元素 nicht in <p> platziert werden kann, und einige Browser diese Schreibweise dulden: 

<p>这是一个段落的开始
<p>这是另一个段落的开始
Nach dem Login kopieren
<p> wird als <p>-Tag verwendet. Bevor es endet, wird es wird sich selbst beenden, wenn er auf das nächste Blockelement trifft. Tatsächlich verarbeitet der Browser sie wie folgt: 

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
Nach dem Login kopieren
<p>Dies erklärt auch, warum am Ende zu viele davon im Browser vorhanden sind >. <p></p>

Problem bei der Verschachtelung von Elementen auf Blockebene

Sie können zunächst alle Blockelemente erneut in mehrere Ebenen unterteilen. Wir wissen bereits, dass sich <p> auf der äußersten Ebene und <html> als nächstes befindet wird nur <html> im Level sein, und wir wissen bereits, dass visuelle Elemente nur in <head>、<body>、<frameset>、<noframes> erscheinen werden, also haben wir <body> in das erste Level eingefügt. Platzieren Sie dann die Elemente von <body> in der dritten Ebene und die anderen in der zweiten Ebene. Zu den sogenannten Elementen, die nicht frei verschachtelt werden können, gehören nur: 不可以自由嵌套 für Titel-Tags; <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption> für Absatz-Tags; existiert auf der untergeordneten Ebene des Listenelements <p>). <hr><dt><dl> bedeutet, dass Elemente auf Blockebene nur Inline-Elemente verschachteln können.

ist zufällig auch einer von ihnen. <p>三级元素Warum können Elemente der zweiten Ebene frei verschachtelt werden? p

Wir können sie uns als einige Container (oder Kisten) vorstellen und die Größe dieser Container kann beispielsweise frei geändert werden kann

in

eingebettet werden, oder <p> kann in <ul> eingebettet werden. <p><p> Es gibt mehrere Elemente in HTML, die ganz besonders sind: <li>, ihre Unterebenen müssen angegebene Elemente sein, die Unterebene von

> Unterebene von <p> muss <ul>、
    、<dl>、<table> oder <ul>、 sein; die Unterebene von <li> muss <dl> oder <dt> usw. sein, und die Unterebene muss <dd> sein (<table> existiert nur in <caption>), gefolgt von <thead>、<tfoot>、<tbody> oder <tr>, wo Inhalte platziert werden können. <tr><thead>、<tfoot>、<tbody>Inline-Elemente<td><th>Tatsächlich kann man unter den Inline-Elementen noch mehrere Elemente (

    usw.) unterscheiden, die die Breite definieren können Höhe. Obwohl im

    -Browser alle Elemente Breite und Höhe definieren können, ist dies der eigene Standard von

    und wird von nicht allen Browsern als ersetzte Elemente bezeichnet Inline-Blöcke, obwohl diese Elemente zu Inline gehören, haben sie einen bestimmten Block (Breite und Höhe können festgelegt werden). Wir können jedem Element auch das CSS-Attribut display:inline-block geben. <p>Elemente, die selbst einen Inline-Block haben, sollten dies nicht tun! <img>、<input>IEWeitere Probleme mit der Verschachtelung von HTML-Elementen und verwandte Artikel finden Sie auf der chinesischen PHP-Website! IEW3C

    <p></p>
Verwandte Etiketten：
HTML 元素嵌套
Quelle：php.cn
Vorheriger Artikel：Favicon ist mehr als nur ein Symbol Nächster Artikel：Löst perfekt das Problem, dass die Auswahloption in HTML nicht ausgeblendet werden kann.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Schreiben Sie den Titel um in: Vue 3: Inhalt auf Element übertragen und ersetzen Ich verwende den Teleport von Vue3, um ein Element in ein Div zu rendern, und es funktioni...
Aus 2023-11-06 11:01:38
0
1
451
Warum funktioniert nth-of-type/nth-child nicht für verschachtelte Elemente? Ich versuche, den Stil ungerader Divs innerhalb von Divs zu ändern. Wenn sich der n-te Typ...
Aus 2023-10-23 10:39:24
0
1
211
Warum können jQuery- oder DOM-Methoden wie getElementById keine Elemente finden? Was sind die möglichen Gründe, warum document.getElementById, $("#id") oder eine...
Aus 2023-10-15 15:40:06
0
2
210
Warum kann jQuery oder getElementById das Element nicht finden? Was sind die möglichen Gründe, warum document.getElementById, $("#id") oder eine...
Aus 2023-10-15 14:53:18
0
2
293
Ändern Sie die Deckkraft des Hintergrundbilds und bewahren Sie gleichzeitig die Sichtbarkeit untergeordneter Elemente Ist es möglich, die Deckkraft eines Hintergrundbilds festzulegen, ohne die Deckkraft unter...
Aus 2023-10-10 19:40:19
0
1
257
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！