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

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

　　頓時(shí)來(lái)了興趣。

　　其實(shí)這一點(diǎn)在WHATWG的HTML vs. XHTML頁(yè)面中也有提到，其中最常接觸的就是tbody標(biāo)簽的省略（其實(shí)多數(shù)是因?yàn)橥祽谢蛘吒纱嗍峭浟耍糠譃g覽器（IE）會(huì)自動(dòng)補(bǔ)上一個(gè)tbody元素，而其他瀏覽器則可以在沒(méi)有tbody的情況下渲染table（此處確實(shí)是IE的錯(cuò)，因?yàn)闃?biāo)準(zhǔn)里說(shuō)table里允許直接寫tr，這點(diǎn)和本文要說(shuō)的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)明確說(shuō)明了。那么這就意味著，雖然在編寫過(guò)程中，HTML里沒(méi)有html、head、body這三個(gè)元素，但是在瀏覽器對(duì)純文本的文檔進(jìn)行解析之后，勢(shì)必要按著標(biāo)準(zhǔn)來(lái)創(chuàng)建這三個(gè)元素，最終的DOM模型里必須有html、head和body存在。

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

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

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

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

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

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

　　而這種結(jié)果也是符合正常的思維邏輯的，可見(jiàn)瀏覽器確實(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è)。

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

//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知識(shí)庫(kù)：沒(méi)有html、head、body的頁(yè)面，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。