HTML DOM樹生成之 匿名元素

匿名(anonymous)元素有兩種:  匿名 block 元素 和 匿名 inline 元素.

匿名元素是指原來的DOM樹中不存在的元素，但是爲了滿足CSS標準  而出現的一種元素。

 

什麼時候會出現匿名元素呢？ 這要分情況來說:

 

第一種情況:

block 元素內部包含有 block 元素和 inline 元素, 如:

 

<div> this is some text! <p> this is another text! </p> </div>

 

這樣，爲了滿足CSS的標準:

一個匿名block 被生成:

 

<div> <匿名block> this is some text! </匿名block> <p> this is anthoer text </p> </div>

 

第二種情況:

當block 元素內部包含有匿名文本(Anonymous Text)和inline元素, 如:

<div> this is anonymous text! <em> this is another text included by EM </em> </div>

 

 

爲了滿足CSS標準, 一個匿名inline 被生成

 

<div> <匿名inline> this is anonymous text! </匿名inline> <em> this is another text included by EM </em> </div>

總結: block 元素內部要麼全部是block元素，要麼全部是inline元素 . (不考慮浮動塊和絕對定位塊).

 

第三種情況:

這種情況比較複雜， CSS規定 inline 元素內部只能包含inline元素. 但是如果還是有哪個網頁作者，堅持要在inline元素裏面插入包含block元素，如:

<em> this is some text! <div> this is anthoer text included by a block! </div> </em>

 

那麼這時候， inline元素 <em></em> 會被破壞，拆成兩部分，並且本身也被匿名block包含

<匿名block> <匿名block> <em>this is some text</em> </匿名block> <匿名block> <div> this is anther text included by a block </div> </匿名block> </匿名block>