html中P標籤內為何不可包含DIV標籤？-html教學-PHP中文網

首頁

web前端

html教學

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

黄舟

Jul 03, 2017 am 11:41 AM

html 包含

彙總：

1、區塊元素可以包含內嵌元素或某些區塊元素（上面的例子其實是錯誤的使用--->我把

放在

裡面了) ，但內聯元素卻不能包含區塊元素，它只能包含其他的內聯元素

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

裡面的

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

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

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

6.0裡面

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

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

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

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

測試一下區塊元素與內嵌元素的差異

#######

測試一下

區塊元素

與內嵌元素的差異化

## ## 效果如下圖：

HTML中为何P标签内不可包含p标签？ - JORTON - ★柳暗花明★

# 在上面的範例中，

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

放在

裡面了) ，

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

<h2>我喜欢在<a href="#" >经典论坛</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>

登入後複製

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

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

登入後複製

这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。

以下为重点理解部分：

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有<head>、、、