html中P標籤內為何不可包含DIV標籤？

彙總：

1、區塊元素可以包含內嵌元素或某些區塊元素（上面的例子其實是錯誤的使用--->我把e388a4556c0f65e1904146cc1a846bee放在e388a4556c0f65e1904146cc1a846bee裡面了) ，但內聯元素卻不能包含區塊元素，它只能包含其他的內聯元素

2 、為我們使用的DTD中規定了區塊級元素是不能放在e388a4556c0f65e1904146cc1a846bee裡面的

##3、重點：塊狀元素的三個層級

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

##起因： 在做專案時發現原本在DW中無誤的程式碼到了MyEclipse

6.0裡面

但提示N多重錯誤，甚是詬異。於是究其原因，發現區塊級元素P內是不能嵌套p的。

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

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

###先看下面的例子你就能明白兩者的差異：############e388a4556c0f65e1904146cc1a846bee測試一下區塊元素與45a2772a6b6107b401db3c9b82c049c2內嵌元素54bdf357c58b8a65c66d7c19c8e4d114的差異94b3e26ee717c64999d7867364b1b4a3#######

e388a4556c0f65e1904146cc1a846bee測試一下e388a4556c0f65e1904146cc1a846bee區塊元素94b3e26ee717c64999d7867364b1b4a3與內嵌元素的差異化94b3e26ee717c64999d7867364b1b4a3

##                                        ## 效果如下圖：

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

但內聯元素卻不能包含區塊元素，它只能包含其他的內聯元素，再看看這個：

<h2>我喜欢在<a href="#" >经典论坛</a>讨论Web标准的原因。</h2>

其中c1a436a314ed609750bd7c7d319db4da是屬於區塊元素，而3499910bf9dac5ae3c52d5ede7383485是屬於內聯元素，c1a436a314ed609750bd7c7d319db4da包含3499910bf9dac5ae3c52d5ede7383485是沒有錯誤的，同樣， e388a4556c0f65e1904146cc1a846bee可以包含e388a4556c0f65e1904146cc1a846bee，e388a4556c0f65e1904146cc1a846bee包含3499910bf9dac5ae3c52d5ede7383485也是對的，但是如果是下面這樣的話，就是錯誤的，因為內聯元素不應該包含塊元素：

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

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

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

而這樣又是可以的。

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

為什麼呢？因為我們使用的DTD中規定了塊級元素是不能放在e388a4556c0f65e1904146cc1a846bee裡面的，再加上一些瀏覽器縱容這樣的寫法：

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

当一个e388a4556c0f65e1904146cc1a846bee签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

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

所以刚才那样的写法会变成这样：

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

这也是跟刚才说第一个例子中e388a4556c0f65e1904146cc1a846bee里面放e388a4556c0f65e1904146cc1a846bee不合理是同一个道理。

以下为重点理解部分：

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道100db36a723c770d327fc0aef2ce13b1是在最外层，100db36a723c770d327fc0aef2ce13b1下一级里面只会有8cea2e99ba256aa9b779f5ab5949ca21、6c04bd5ca3fcae76e30b72ad730ca86d、f900b4fc197b16ab214eecf015bb6bd2、37f861bd36cef5b6406eba87d20a5bab，而我们已经知道了可视的元素只会出现在6c04bd5ca3fcae76e30b72ad730ca86d里，所以我们把6c04bd5ca3fcae76e30b72ad730ca86d划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、63bd76834ec05ac1f4c0ebbeaafb0994；段落标记的e388a4556c0f65e1904146cc1a846bee；分隔线f32b48428a809b51f04d3228cdf461fa和一个特别的元素73de882deff7a050a357292d0a1fca94(它只存在于列表元素5c69336ffbc20d23018e48b396cdd57a的子一级)。

为什么说第二级的元素可以自由嵌套呢？我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把ff6d136ddc5fdfeffaf53ff6ee95f185嵌在e388a4556c0f65e1904146cc1a846bee里面，也可以把e388a4556c0f65e1904146cc1a846bee嵌在25edfb22a4f469ecb59f1190150159c6里面。

在HTML裡有幾個元素是比較特別的：ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、5c69336ffbc20d23018e48b396cdd57a、f5d188ed2c074f8b944552db028f98a1，它們的子一層必須是指定元素，7af642afb7cbf7886d194925c3e5eedb、c34106e0b4e09414b63b2ea253ff83d6的子一級必須是25edfb22a4f469ecb59f1190150159c6;5c69336ffbc20d23018e48b396cdd57a的子一級必須是73de882deff7a050a357292d0a1fca94或67bc4f89d416b0b8236eaa5f43dee742;f5d188ed2c074f8b944552db028f98a1的子一層必須是165ce83cfd62d7f5daa3cc4a4085ce33 或ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a等，而再子一層必須是a34de1251f0d9fe1e645927f19a896e8 （a34de1251f0d9fe1e645927f19a896e8只存在於ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、45d34ede88d816973d95e26696dafc5d中），之後才是可放內容的b6c5a531a458a2e790c1fd6421739d1c或b4d429308760b6c2d20d6300079ed38e。

很多人在W3C校驗無法通過也是這個原因-->錯誤的元素嵌套，然而把提示錯誤的標籤改成e388a4556c0f65e1904146cc1a846bee或45a2772a6b6107b401db3c9b82c049c2就可以通過，但是我們不能這樣盲目的為了校驗而校驗，e388a4556c0f65e1904146cc1a846bee也不是神，e388a4556c0f65e1904146cc1a846bee代替不了語義化的標籤。

其實在內嵌元素中，還是可以再區分一下的，有幾個元素（a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd等）比較特別，它們可以定義寬高。雖然在IE 瀏覽器裡，所有的元素都可以定義寬高，但這是IE自己的標準，並非所有瀏覽器都支持，W3C稱它們為replaced元素，我也找不到適合翻譯的詞，它們在屬於in-line的情況下同樣具有block-line的一些特性，在"desplay:inline-block的應用"中所說的inline-block其實就是讓其他元素也模擬成replaced元素，你暫時也不用多了解，等到後面再學習它。

以上是html中P標籤內為何不可包含DIV標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！