Warum können HTML-P-Tags keine Divs verschachteln? Es gibt auch Beispiele für CSS-Stile für HTML-P-Tags

In diesem Artikel wird die erweiterte Version des HTML-P-Tags vorgestellt. Wer die Basisversion des vorherigen Artikels nicht gesehen hat, kann auf den Link unten klicken Es gibt zwei wichtige Wissenspunkte zum Thema Tags. Zum einen gibt es Beispiele, warum HTML-P-Tags nicht eingebettet werden können. Ich hoffe, dass Sie die

HTML-P-Tag-Tag-Definition und die Gebrauchsanweisung für eine ausführliche Erklärung der Div-Gruppe sorgfältig lesen:

Absatz. Das

-Element erzeugt automatisch etwas Leerraum davor und danach. Der Browser fügt diese Leerzeichen automatisch hinzu, oder Sie können sie in Ihrem Stylesheet angeben.

HTML-Attribute des P-Tags:

Warum können div-Tags nicht innerhalb des verschachtelt werden? P-Tag in HTML?

Eingehendes Studium:

Lassen Sie uns zunächst Inline-Inline-Elemente und Block-Line-Blockelemente verstehen. weil fast alle HTML-Elemente Alle Elemente sind entweder Inline-Elemente oder Blockelemente.

Das Wort Inline hat viele Interpretationen: Inline, Inline, Inline, Line-Level usw. Sie haben jedoch alle die gleiche Bedeutung. Hier wählen wir den üblichen Namen – Inline.

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

    <p>测试一下块元素与<span>内联元素</span>的差别</p>
    <p>测试一下<div>块元素</div>与内联元素的差别</p>

Sie können den Effekt sehen, indem Sie einfach das obige Beispiel üben. Es nimmt hier keinen Platz ein, generiert selbst eine neue Zeile und ist jedoch nur ohne CSS-Rendering der Fall , wir können sie nicht beliebig in HTML konvertieren. Blockelemente können Inline-Elemente oder bestimmte Blockelemente enthalten (das obige Beispiel ist tatsächlich eine falsche Verwendung – ich habe

in

eingefügt), aber Inline-Elemente Sie können keine Blockelemente enthalten. Schauen Sie sich das noch einmal an:

rrree> wobei ein Inline-Element ist mit

kann enthalten, und es ist auch korrekt, dass Folgendes enthält: Elemente sollten keine Blockelemente enthalten:

<h2>我喜欢在<a href="http://www.php.cn/ " >php中文网</a>讨论Web标准的原因。</h2>

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

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

Und das ist in Ordnung.

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

Warum? Da die von uns verwendete DTD vorschreibt, dass Elemente auf Blockebene nicht in

platziert werden können, und einige Browser diese Schreibweise zulassen:

Dies ist der Anfang eines Absatzes

Dies ist der Anfang eines weiteren Absatzes

Wenn ein

-Tag nicht beendet ist, wird es von selbst beendet, wenn es auf das nächste Blockelement trifft. Tatsächlich werden sie auf diese Weise verarbeitet :

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

Die Schreibweise jetzt wird also so aussehen:

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

Testtext

Das ist auch derselbe Grund wie ich gerade über das Einfügen von

in

gesagt habe.

Welche Blockelemente können nicht in welchen Blockelementen platziert werden? Ich weiß, dass Sie diese Frage haben, und ich weiß, dass es für Sie schwierig ist, sich an sie zu erinnern, wenn ich nur eine Liste erstelle. Wir können alle Blockelemente zunächst wieder in mehrere Ebenen unterteilen. Wir wissen bereits, dass sich in der äußersten Ebene befindet und die nächste Ebene von , , , und wir wissen bereits, dass visuelle Elemente nur in erscheinen, also platzieren wir auf der ersten Ebene und dann werden nicht freie verschachtelte Elemente auf der dritten Ebene platziert , und andere werden auf der zweiten Ebene platziert. <p></p>Die sogenannten Elemente, die nicht frei verschachtelt werden können, sind diejenigen, die nur Inline-Elemente enthalten können. Dazu gehören: Titel-Tags <h1>, <h2>, <h3>, <h4> <h5>, <caption>; die <p>-Trennlinie der Absatzmarke; ; Unterebene). </p> <p></p> <p>Kompatibilitätshinweise<strong></strong></p>In HTML 4.01 ist das align-Attribut des p-Elements veraltet; in der XHTML 1.0 Strict DTD ist das align-Attribut des p-Elements nicht veraltet unterstützt. <p></p>Bitte verwenden Sie stattdessen CSS. <p></p>CSS-Syntax: <p><pre class="brush:html;toolbar:false">&lt;p&gt;测试文字&lt;/p&gt; &lt;ul&gt; &lt;li&gt;现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。&lt;/li&gt; &lt;/ul&gt;</pre></p> <p><span style="font-size: 16px;">html Beispiel für CSS-Stil für P-Tag: <strong></strong></span></p>1. , „text-right“, „text-center“ steuern die Inhaltsposition der Beschriftung <p><pre class="brush:html;toolbar:false"> &lt;p class=&quot;text-left&quot;&gt;在左&lt;/p&gt; &lt;p class=&quot;text-right&quot;&gt;在右&lt;/p&gt; &lt;p class=&quot;text-center&quot;&gt;居中&lt;/p&gt;</pre></p> <p>2.“ text-lowercase ”、“ text-uppercase ”、“ text-capitalize ”属性控制</p> <p>标签英文内容的大小写 </p><pre class="brush:html;toolbar:false"> &lt;p class=&quot;text-lowercase&quot;&gt;hahahahhahahaha都小写&lt;/p&gt; &lt;p class=&quot;text-uppercase&quot;&gt;hahahahhahahaha都大写&lt;/p&gt; &lt;p class=&quot;text-capitalize&quot;&gt;hahahahhahahaha首字母大写&lt;/p&gt;</pre><p>3.字体：“text-muted ”、“text-info ”、“text-success ”、“text-warning ”、“text-primary ”、“text-danger ”等属性，对不同情况下的内容进行不同颜色的标注</p><pre class="brush:html;toolbar:false"> &lt;p class=&quot;text-muted&quot;&gt;text-muted&lt;/p&gt; &lt;p class=&quot;text-info&quot;&gt;text-info&lt;/p&gt; &lt;p class=&quot;text-success&quot;&gt;text-success&lt;/p&gt; &lt;p class=&quot;text-warning&quot;&gt;text-warning&lt;/p&gt; &lt;p class=&quot;text-primary&quot;&gt;text-primary&lt;/p&gt; &lt;p class=&quot;text-danger&quot;&gt;text-danger&lt;/p&gt;</pre><p>4.背景：“bg-muted ”、“bg-info ”、“bg-success ”、“bg-warning ”、“bg-primary ”、“bg-danger ”等属性，对不同情况下的内容进行不同颜色背景的标注</p><pre class="brush:html;toolbar:false"> &lt;p class=&quot;bg-muted&quot;&gt;bg-muted&lt;/p&gt; &lt;p class=&quot;bg-info&quot;&gt;bg-info&lt;/p&gt; &lt;p class=&quot;bg-success&quot;&gt;bg-success&lt;/p&gt; &lt;p class=&quot;bg-warning&quot;&gt;bg-warning&lt;/p&gt; &lt;p class=&quot;bg-primary&quot;&gt;bg-primary&lt;/p&gt; &lt;p class=&quot;bg-danger&quot;&gt;bg-danger&lt;/p&gt;</pre><p>点击这里查看p标签的基础学习文章：<a href="http://www.php.cn/div-tutorial-409056.html" target="_blank"><span style="color: rgb(0, 0, 0); font-family: " helvetica neue sc tahoma arial sans-serif>html<p>标签是什么元素？关于html p标签的定义和作用详解</p></span></a></p> <p>【小编的相关推荐】</p> <p><a href="http://www.php.cn/div-tutorial-408951.html" target="_blank">html dir标签是干啥的？<dir>标签的具体定义和属性介绍</dir></a><br></p> <p><a href="http://www.php.cn/div-tutorial-408952.html" target="_blank">html noscript标签是什么意思？关于noscript标签的用法你了解多少？</a><br></p> </caption> </h5> </h4> </h3> </h2> </h1>

Das obige ist der detaillierte Inhalt vonWarum können HTML-P-Tags keine Divs verschachteln? Es gibt auch Beispiele für CSS-Stile für HTML-P-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!