首頁 > web前端 > html教學 > HTML元素嵌套問題

HTML元素嵌套問題

高洛峰
發布: 2017-02-15 14:03:59
原創
2191 人瀏覽過

HTML元素巢狀問題

元素巢狀

塊元素​​可以包含內聯元素或某些塊元素,但內聯元素卻不能包含塊元素,只能包含其他的內聯元素。

P元素嵌套問題

<p>
  <p></p>
</p>
登入後複製

在P元素中嵌套p等區塊級元素,在瀏覽器中解析如下:

HTML元素嵌套问题

可以看到在元素最後會多出一個空的<p> </p>

透過查詢,發現原來p元素內無法包裹塊級元素
因為我們使用的DTD中規定了塊級元素是不能放在<p></p>裡面的,再加上一些瀏覽器縱容這樣的寫法:

<p>这是一个段落的开始
<p>这是另一个段落的开始
登入後複製

當一個<p></p>標籤還沒沒結束時,遇到下一個區塊元素就會把自己結束掉,其實瀏覽器是把它們處理成這樣:

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
登入後複製

這也就解釋了,為何瀏覽器中最後會多出1個空的<p></p>

塊級元素嵌套問題

可以先把所有的塊元素再次劃分成幾個級別的,我們已經知道是在最外層,下一級只會有、、<frameset>、<noframes></noframes> </frameset>,而我們已經知道了可視的元素只會出現在裡,所以我們把劃在第一個級裡面。接著,把不可以自由嵌套的元素劃在第三級,其他的就歸進第二級。所謂的不可自由巢狀的元素就是裡面只能放內聯元素的,它們包括有:標題標記的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、 <caption></caption> </h6> </h5> </h4> </h3> </h2> </h1>;段落標記的<p></p>;分隔線<hr>和一個特別的元素<dt></dt>(它只存在於列表元素<dl></dl>的子一級)。

三級元素就是指,只能嵌套內嵌元素的區塊級元素。 p也恰好是其中之一。

為什麼第二級的元素可以自由嵌套

我們可以把它們看成是一些容器(或者說是盒子), 這些容器的大小可以自由變化,例如我們可以把<ul></ul>嵌在 <p></p>裡面,也可以把<p></p>嵌在<li>裡面。

在HTML裡有幾個元素是比較特別的:

    、,它們的子一層必須是指定元素,
      >的子一級必須是<li><dl></dl>的子一級必須是<dt></dt><dd></dd><table>的子一層必須是<code><caption></caption><thead>、</thead> <tfoot>、</tfoot> <tbody>等,而再子一層必須是<code><tr>(<code><tr>只存在於<code><thead>、</thead> <tfoot>、</tfoot> <tbody>中),之後才是可放內容的<code><td>或<code><th>。 <h2>內聯元素</h2> <p>其實在內聯元素中,還是可以再區分一下的,有幾個元素(<code><img alt="HTML元素嵌套問題" >、<input>等)比較特別,它們可以定義寬高。雖然在IE瀏覽器裡,所有的元素都可以定義寬高,但這是IE自己的標準,並非所有瀏覽器都支持,W3C稱它們為replaced元素,其實它們也就是我們常所說的行內塊,雖然這些元素屬於inline,但是卻有一定的block(可以設定寬高),我們也可以給任何元素css屬性display:inline-block。
      本身俱有inline-block的元素應該沒有!

      更多HTML元素嵌套問題 相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板