匯總:
1、塊元素可以包含內(nèi)聯(lián)元素或某些塊元素(上面的例子其實是錯誤的使用--- 我把 p 放在 p 里面了) ,但內(nèi)聯(lián)元素卻不能包含塊元素,它只能包含其他的內(nèi)聯(lián)元素
2、為我們使用的DTD中規(guī)定了塊級元素是不能放在 p 里面的
3、重點:塊狀元素的三個級別
4、內(nèi)聯(lián)元素的img 與 input比較特殊,他們有內(nèi)聯(lián)元素沒有的寬高,w3c定義為replace元素,將元素設(shè)置為display:inline-block,模擬的就是replace元素的效果。
起因:在做項目時發(fā)現(xiàn)原本在DW中無誤的代碼到了MyEclipse6.0里面卻提示N多錯誤,甚是詫異。于是究其原因,發(fā)現(xiàn)塊級元素P內(nèi)是不能嵌套p的。
深究:我們先來認識in-line內(nèi)聯(lián)元素和block-line塊元素,因為HTML里幾乎所有元素都屬于內(nèi)聯(lián)元素或者塊元素中的一種。
in-line這個詞有很多種解釋:內(nèi)嵌、內(nèi)聯(lián)、行內(nèi)、線級等,但是,它們都是表示相同的意思,在這里我們選擇習(xí)慣的叫法--內(nèi)聯(lián)。
先看下面的例子你就能明白兩者的差別:
p 測試一下塊元素與 span 內(nèi)聯(lián)元素 /span 的差別 /p
p 測試一下 p 塊元素 /p 與內(nèi)聯(lián)元素的差別 /p
效果如下圖:
在上面的例子中, p 會自己產(chǎn)生一個新的行,而 span 并沒有換行,這是在沒有CSS渲染的情況下才這樣,同樣,我們也可以通過CSS把p定義成內(nèi)聯(lián)元素,把span定義成塊元素,但是,我們卻不能在HTML里任意轉(zhuǎn)化它們,塊元素可以包含內(nèi)聯(lián)元素或某些塊元素(上面的例子其實是錯誤的使用--- 我把 p 放在 p 里面了) ,但內(nèi)聯(lián)元素卻不能包含塊元素,它只能包含其他的內(nèi)聯(lián)元素,再看看這個:
h2 我喜歡在 a href= # 經(jīng)典論壇 /a 討論Web標(biāo)準(zhǔn)的原因。 /h2
其中 h2 是屬于塊元素,而 a 是屬于內(nèi)聯(lián)元素, h2 包含 a 是沒有錯誤的,同樣, p 可以包含 p , p 包含 a 也是對的,但是如果是下面這樣的話,就是錯誤的,因為內(nèi)聯(lián)元素不應(yīng)該包含塊元素:
a href= # h2 這樣是錯誤的用法! /h2 /a
還有一些情況就是一些塊元素不可以包含另一些塊元素。例如這樣:
p 測試文字 li 現(xiàn)階段是不能這樣用的,要等到XHTML 2.0才可以這樣用。 /li /ul /p
而這樣又是可以的。
ul li p 這樣是可以的 /p /li /ul
為什么呢?因為我們使用的DTD中規(guī)定了塊級元素是不能放在 p 里面的,再加上一些瀏覽器縱容這樣的寫法:
p 這是一個段落的開始 p 這是另一個段落的開始
當(dāng)一個 p 簽還沒結(jié)束時,遇到下一個塊元素就會把自己結(jié)束掉,其實瀏覽器是把它們處理成這樣:
p 這是一個段落的開始 /p p 這是另一個段落的開始 /p
所以剛才那樣的寫法會變成這樣:
p 測試文字 /p li 現(xiàn)階段是不能這樣用的,要等到XHTML 2.0才可以這樣用。 /li /ul 測試文字 p /p
這也是跟剛才說第一個例子中 p 里面放 p 不合理是同一個道理。
以下為重點理解部分:
那哪些塊元素里面不能放哪些塊元素呢?我知道你有這個疑問,也知道我僅僅列一張清單你不好記住它們。我們可以先把所有的塊元素再次劃分成幾個級別的,我們已經(jīng)知道 html 是在最外層, html 下一級里面只會有 head 、 body 、 frameset 、 noframes ,而我們已經(jīng)知道了可視的元素只會出現(xiàn)在 body 里,所以我們把 body 劃在第一個級里面,接著,把不可以自由嵌套的元素劃在第三個級,其他的就歸進第二個級。所謂的不可自由嵌套的元素就是里面只能放內(nèi)聯(lián)元素的,它們包括有:標(biāo)題標(biāo)記的 h1 、 h2 、 h3 、 h4 、 h5 、 h6 、 caption ;段落標(biāo)記的 p ;分隔線 hr 和一個特別的元素 dt (它只存在于列表元素 dl 的子一級)。
為什么說第二級的元素可以自由嵌套呢?我們可以把它們看成是一些容器(或者說是盒子), 這些容器的大小可以自由變化,例如我們可以把 ul 嵌在 p 里面,也可以把 p 嵌在 li 里面。
在HTML里有幾個元素是比較特別的: ul 、 ol 、 dl 、 table ,它們的子一層必須是指定元素, ul 、 ol 的子一級必須是 li ; dl 的子一級必須是 dt 或者 dd ; table 的子一層必須是 caption 或 thead 、 tfoot 、 tbody 等,而再子一層必須是 tr ( tr 只存在于 thead 、 tfoot 、 tbody 中),之后才是可放內(nèi)容的 td 或者 th 。
很多人在W3C校驗無法通過也是這個原因-- 錯誤的元素嵌套,然而把提示錯誤的標(biāo)簽改成 p 或者 span 就可以通過,但是我們不能這樣盲目的為了校驗而校驗, p 也不是神, p 代替不了語義化的標(biāo)簽。
其實在內(nèi)聯(lián)元素中,還是可以再區(qū)分一下的,有幾個元素( img 、 input 等)比較特別,它們可以定義寬高。雖然在IE 瀏覽器里,所有的元素都可以定義寬高,但這是IE自己的標(biāo)準(zhǔn),并非所有瀏覽器都支持,W3C稱它們?yōu)閞eplaced元素,我也找不到適合翻譯的詞,它們在屬于in-line的情況下同樣具有block-line的一些特性,在 desplay:inline-block的應(yīng)用 中所說的inline-block其實就是讓其他元素也模擬成replaced元素,你暫時也不用過多了解,等到后面再學(xué)習(xí)它。
以上就是html中P標(biāo)簽內(nèi)為何不可包含DIV標(biāo)簽? 的詳細內(nèi)容,html教程
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。
新聞熱點
疑難解答