首頁  >  文章  >  web前端  >  html P標籤為什麼不能嵌套div?還有關於html P標籤的css樣式的實例介紹

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

寻∝梦
寻∝梦原創
2018-08-25 10:49:315792瀏覽

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

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

##

標籤定義段落。

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

html P標籤的屬性:

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

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

深究:

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

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

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

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

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

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

    其中

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

包含是沒有錯誤的,同樣,
可以包含

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

  <a href="#"> <h2>这样是错误的用法!</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:html;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: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> </dl> </caption> </h6> </h5> </h4> </h3> </h2> </h1>

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn