Why can't html P tags nest divs? There are also examples of css styles for html P tags

This article introduces the advanced version of the html p tag. Those who have not seen the basic version of the previous article can click on the link below to read it. This article mainly introduces the html p There are two important knowledge points about tags. One is how to use CSS styles to control the specific use of P tags. There are examples for each. Interested students can try the code by themselves. The other is why HTML P tags cannot be embedded. For a detailed explanation of the set of divs, I hope you will carefully read the

html P tag tag definition and usage instructions:

tag definition paragraph.

The element will automatically create some white space before and after it. The browser adds these spaces automatically, or you can specify them in your stylesheet.

html Attributes of P tag:

##Why can’t div tags be nested within P tags in HTML?

Deep study:

Let’s first understand in-line inline elements and block-line block elements, because almost all HTML elements All elements are either inline elements or block elements.

The word in-line has many interpretations: inline, inline, inline, line level, etc. However, they all mean the same meaning. Here we choose the customary name - inline.

You can understand the difference between the two by looking at the following example:

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

You will know the effect by just practicing the above example. It does not take up space here,

will generate a new line by itself, and does not break. This is only the case without CSS rendering. Similarly, we can also define div as an inline element and span as a block element through CSS. , however, we cannot convert them arbitrarily in HTML. Block elements can contain inline elements or certain block elements (the above example is actually a wrong use--->I put

in

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

Where

belongs to the block element, and is an inline element, and there is nothing wrong with

including . Similarly,

can contain

, and it is also correct for

to contain , but if The following is wrong, because inline elements should not contain block elements:

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

There are also cases where some block elements cannot contain other block elements. For example:

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

And this is okay.

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

Why? Because the DTD we use stipulates that block-level elements cannot be placed inside

, and some browsers condone this writing:

This is the beginning of a paragraph

This is the beginning of another paragraph

When a

tag has not ended, it will end itself when it encounters the next block element. In fact, the browser They are processed like this:

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

So the writing method just now will become like this:

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

Test text

This is also It’s the same reason as what I just said about putting

inside

in the first example.

So which block elements cannot be placed inside which block elements? I know you have this question, and I know it's hard for you to remember them if I just make a list. We can first divide all the block elements into several levels again. We already know that is in the outermost layer, and the next level of will only have , , , , and we already know that visual elements will only appear in , so we put in the first level, and then, not free Nested elements are placed at the third level, and others are placed at the second level. <p></p>The so-called elements that cannot be freely nested are those that can only contain inline elements. They include: title tags <h1>, <h2>, <h3>, <h4> , <h5>, <h6>, <caption>; the <p> separator line </p> <hr> of the paragraph mark; and a special element <dt> (which only exists in the list element </dt> <dl> sublevel). <p></p> <p>Compatibility Notes<strong></strong></p>In HTML 4.01, the align attribute of the p element is deprecated; in the XHTML 1.0 Strict DTD, the align attribute of the p element is not supported. <p></p>Please use CSS instead. <p></p>CSS syntax: <p><pre class='brush:php;toolbar:false;'>&lt;p style=&quot;text-align:right&quot;&gt;</pre></p> <p><span style="font-size: 16px;">html Example of css style for P tag: <strong></strong></span></p>1. " text-left " , " text-right ", " text-center " attributes control<p> label content position</p> <p><pre class='brush:php;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:php;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:php;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:php;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> </dl> </caption> </h6> </h5> </h4> </h3> </h2> </h1>

The above is the detailed content of Why can't html P tags nest divs? There are also examples of css styles for html P tags. For more information, please follow other related articles on the PHP Chinese website!