1. 程式人生 > >p標簽內不能嵌套div(註解)

p標簽內不能嵌套div(註解)

分隔 table rep 情況 列表 display 一個 input 網絡

相關知識:

內聯元素可以嵌套內聯元素,塊級元素可以嵌套部分塊級元素並也能嵌套內聯元素,但內聯元素不能嵌套塊級元素。塊級元素為block,內聯元素為inline,擁有“inline”特性的同時又擁有“block”的特性稱為replace元素。

<p>

  <div>編碼美學</div>

  <div>編碼美學</div>

</p>

在上面的代碼中,p標簽在遇到下一個塊級元素的時候就閉合了,它會被瀏覽器解析為頁面中p元素的兩倍數量,也就是開始標簽被解析為一個p元素,結束標簽被解析為一個p元素。

<p></p>

  <div>編碼美學</div>

  <div>編碼美學</div>

</p></p>

1級元素:<body>

2級元素:其他。。(可以互相嵌套,如li和div)

3級元素:

  指哪些不可以自由嵌套的元素,如<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落標記的<p>;分隔線<hr>和一個特別的元素<dt>(它只存在於列表元素<dl>的子一級)。

特別1:

   <ul>、<ol>、<dl>、<table>,它們的子一層必須是指定元素,<ul>、<ol>的子一級必須是<li>;<dl>的子一級必須是<dt>或者<dd>;<table>的子一層必須是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一層必須是<tr> (<tr>只存在於<thead>、<tfoot>、<tbody>中),之後才是可放內容的<td>或者<th>。

特別2:

  <img>和<input>有著其它內聯元素沒有的寬和高。它們在"inline"的情況下又有"black"的特性,W3C稱之為replace元素。

最後總結匯總

1、塊元素可以包含內聯元素或某些塊元素(p元素中嵌套Div元素是錯誤的做法) ,但內聯元素卻不能包含塊元素,它只能包含其他的內聯元素

2、p元素中是不能嵌套塊級元素的。

3、重點:塊狀元素的三個級別

4、內聯元素的img 與 input比較特殊,他們有內聯元素沒有的寬高,w3c定義為replace元素,將元素設置為display:inline-block,模擬的就是replace元素。

(資料引自網絡,加以修改而成)

p標簽內不能嵌套div(註解)