今天在學(xué)習(xí)DIVE INTO HTML5時(shí)，在HTML5 Peeks, Pokes and Pointers一頁看到這樣一句話：

Optional start tags. html, head, body, tbody, colgroup. Amaze your friends! Skip the tags and still validate!

　　頓時(shí)來了興趣。

　　其實(shí)這一點(diǎn)在WHATWG的HTML vs. XHTML頁面中也有提到，其中最常接觸的就是tbody標(biāo)簽的省略（其實(shí)多數(shù)是因?yàn)橥祽谢蛘吒纱嗍峭浟耍糠譃g覽器（IE）會自動補(bǔ)上一個(gè)tbody元素，而其他瀏覽器則可以在沒有tbody的情況下渲染table（此處確實(shí)是IE的錯，因?yàn)闃?biāo)準(zhǔn)里說table里允許直接寫tr，這點(diǎn)和本文要說的html、head、body標(biāo)簽不同）。

　　既然html、head、body這三個(gè)標(biāo)簽可以省略，但是標(biāo)準(zhǔn)中指定的根元素為html元素，且在html元素的內(nèi)容模型中明確其只能包含一個(gè)head元素和一個(gè)body元素，甚至連head必須在body之前也已經(jīng)明確說明了。那么這就意味著，雖然在編寫過程中，HTML里沒有html、head、body這三個(gè)元素，但是在瀏覽器對純文本的文檔進(jìn)行解析之后，勢必要按著標(biāo)準(zhǔn)來創(chuàng)建這三個(gè)元素，最終的DOM模型里必須有html、head和body存在。

　　于是就會產(chǎn)生一個(gè)問題，如果完全不寫這三個(gè)元素，那么瀏覽器會根據(jù)什么樣的原理，將所有的元素分別放置到自動生成的head和body元素之中。為此，編寫了一個(gè)頁面，通過一個(gè)簡單的例子，試圖找出瀏覽器自動創(chuàng)建head和body元素的規(guī)律。

　　頁面可以通過這里查看測試頁面，頁面的html結(jié)構(gòu)如下：

• DOCTYPE
• meta
• title
• style
• script
• h1
• p
  • q
  • code
• p
  • code
• script
• pre
  • code

　　在各瀏覽器中測試結(jié)果如下：

　　各瀏覽器中的結(jié)果出奇地一致，就連老得掉渣的IE6也很順應(yīng)主流地將各個(gè)元素正確地分配到了head和body元素之中。

　　經(jīng)過對各瀏覽器中的結(jié)果的觀察，似乎不難得出這樣的一個(gè)結(jié)論：瀏覽器始終創(chuàng)建一個(gè)head元素，并自上而下依次檢查頁面源碼中的各標(biāo)簽，能夠加入到head元素的標(biāo)簽都加入到head元素中，隨后將剩余的元素分配到自動創(chuàng)建的body元素中。

　　而這種結(jié)果也是符合正常的思維邏輯的，可見瀏覽器確實(shí)可以為我們做到很多，讓我們省心省力

那么進(jìn)一步的，head元素中可以放置哪些元素呢？在標(biāo)準(zhǔn)中的head標(biāo)簽一章中明確指出，head元素的內(nèi)容模型為元數(shù)據(jù)內(nèi)容，包括了base、command、link、meta、noscript、script、style、title這幾個(gè)。

　　因此，對于自動創(chuàng)建head和body元素這一回事，如果使用代碼來表述，大概是以下的模式：

//elements - 所有頂層元素
var head = document.createElement('head'),
    body = document.createElement('body'),
    i = 0, //循環(huán)用
    element, //當(dāng)前的元素
    forceToBody = false; //指定所有元素都放到body中
for (; element = elements[i]; i++) {
    if (!forceToBody  isMetadataContent(element)) {
        head.appendChild(element);
    }
    else {
        !foreceToBody  forceToBody = true;
        body.appendChild(element);
    }
}
document.appendChild(head);
document.appendChild(body);        

        

        
        
      
        
it知識庫：沒有html、head、body的頁面，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。