html P標籤為什麼不能嵌套div？還有關於html P標籤的css樣式的實例介紹

本篇文章介紹了有關於html p標籤的進階版，上一篇基礎版沒看過的同學點擊下方的連結就可以看了，本篇主要介紹了html p標籤的兩個重要知識點，一個是如何用css的樣式來控制P標籤的具體使用，每個都有實例，有興趣的同學可以自己敲代碼試試，還有一個是html P標籤為什麼不能嵌套div的詳解，希望各位認真閱讀

html P標籤標籤定義及使用說明：

##

標籤定義段落。

元素會自動在其前後創建一些空白。瀏覽器會自動新增這些空間，您也可以在樣式表中規定。

html P標籤的屬性：

#HTML中P標籤內為什麼不能巢狀div標籤

深究：

    我們先來認識in-line內嵌元素和block-line區塊元素，因為HTML裡幾乎所有元素都屬於內聯元素或區塊元素中的一種。

    in-line這個字有很多種解釋：內嵌、內聯、行內、線級等，但是，它們都是表示相同的意思，在這裡我們選擇習慣的叫法-內嵌。

先看下面的例子你就能明白兩者的差別：

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

上面的例子自己隨便實踐一下就知道效果了，這裡就不佔用空間了，

會自己產生一個新的行，而並沒有換行,這是在沒有CSS渲染的情況下才這樣，同樣，我們也可以透過CSS把div定義成內聯元素，把span定義成區塊元素，但是，我們卻不能在HTML裡任意轉換它們，塊元素可以包含內聯元素或某些塊元素（上面的例子其實是錯誤的使用--->我把

放在

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

    其中

是屬於塊元素，而屬於內聯元素，

包含是沒有錯誤的，同樣，

可以包含

，

包含也是對的，但是如果是下面這樣的話，就是錯誤的，因為內聯元素不應該包含塊元素：

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

還有一些情況就是一些塊元素不可以包含另一些塊元素。例如這樣：

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

而這樣又是可以的。

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

     為什麼呢？因為我們使用的DTD中規定了塊級元素是不能放在

裡面的，再加上一些瀏覽器縱容這樣的寫法：

     

這是段落的開始

     

這是另一個段落的開始

當一個

簽還沒結束時，遇到下一個區塊元素就會把自己結束掉，其實瀏覽器是把它們處理成這樣：

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

所以剛才那樣的寫法會變成這樣：

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

測試文字

#這也是跟剛才說第一個例子中

裡面放

不合理是同一個道理。

那哪些塊元素裡面不能放哪些塊元素呢？我知道你有這個疑問，也知道我只列一張清單你不好記住它們。我們可以先把所有的區塊元素再次劃分成幾個等級的，我們已經知道是在最外層，下一級裡面只會有、、 、，而我們已經知道了可視的元素只會出現在裡，所以我們把劃在第一個等級裡面，接著，把不可以自由嵌套的元素劃在第三級，其他的就歸進第二級。 <p></p>所謂的不可自由嵌套的元素就是裡面只能放內聯元素的，它們包括有：標題標記的<h1>、<h2>、<h3>、<h4> 、<h5>、<h6>、<caption>；段落標記的<p>；分隔線</p> <hr>和一個特別的元素<dt>(它只存在於列表元素</dt> <dl>的子一級)。 <p></p> <p>相容性註解<strong></strong></p>在 HTML 4.01 中，不贊成使用 p 元素的 align 屬性；在 XHTML 1.0 Strict DTD 中，不支援 p 元素的 align 屬性。 <p></p>請使用 CSS 代替。 <p></p>CSS 語法：<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 P標籤的css樣式的實例：<strong></strong></span></p>1.“ text-left ” 、「 text-right 」、「 text-center 」屬性控制<p>標籤內容位置</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>

以上是html P標籤為什麼不能嵌套div？還有關於html P標籤的css樣式的實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！