沒有html、head、body的頁面
今天在學習DIVE INTO HTML5時，在HTML5 Peeks, Pokes and Pointers一頁看到這樣一句話：
Optional start tags. html, head, body, tbody, colgroup. Amaze your friends! Skip the tags and still validate!
頓時來了興趣。
其實這一點在WHATWG的HTML vs. XHTML頁面中也有提到，其中最常接觸的就是tbody標簽的省略（其實多數是因為偷懶或者干脆是忘記了），部分瀏覽器（IE）會自動補上一個tbody元素，而其他瀏覽器則可以在沒有tbody的情況下渲染table（此處確實是IE的錯，因為標準里說table里允許直接寫tr，這點和本文要說的html、head、body標簽不同）。
既然html、head、body這三個標簽可以省略，但是標準中指定的根元素為html元素，且在html元素的內容模型中明確其只能包含一個head元素和一個body元素，甚至連head必須在body之前也已經明確說明了。那么這就意味著，雖然在編寫過程中，HTML里沒有html、head、body這三個元素，但是在瀏覽器對純文本的文檔進行解析之后，勢必要按著標準來創建這三個元素，最終的DOM模型里必須有html、head和body存在。
于是就會產生一個問題，如果完全不寫這三個元素，那么瀏覽器會根據什么樣的原理，將所有的元素分別放置到自動生成的head和body元素之中。為此，編寫了一個頁面，通過一個簡單的例子，試圖找出瀏覽器自動創建head和body元素的規律。
頁面可以通過這里查看測試頁面，頁面的html結構如下：
- DOCTYPE
- meta
- title
- style
- script
- h1
- p
- q
- code
- p
- code
- script
- pre
- code
在各瀏覽器中測試結果如下：
各瀏覽器中的結果出奇地一致，就連老得掉渣的IE6也很順應主流地將各個元素正確地分配到了head和body元素之中。
經過對各瀏覽器中的結果的觀察，似乎不難得出這樣的一個結論：瀏覽器始終創建一個head元素，并自上而下依次檢查頁面源碼中的各標簽，能夠加入到head元素的標簽都加入到head元素中，隨后將剩余的元素分配到自動創建的body元素中。
而這種結果也是符合正常的思維邏輯的，可見瀏覽器確實可以為我們做到很多，讓我們省心省力
那么進一步的，head元素中可以放置哪些元素呢？在標準中的head標簽一章中明確指出，head元素的內容模型為元數據內容，包括了base、command、link、meta、noscript、script、style、title這幾個。
因此，對于自動創建head和body元素這一回事，如果使用代碼來表述，大概是以下的模式：
var head = document.createElement('head'),
body = document.createElement('body'),
i = 0, //循環用
element, //當前的元素
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);
其實，html、head、body這三個標簽確實沒什么用，html還有一個lang屬性，如果需要用到這個屬性的話，就留著html，其他時候完全就是一個累贅，反而導致HTML的結構多了一層，看起來更復雜了。個人的推薦是，從此去掉html、head、body三個標簽，在head內容和body內容之間使用2-3個換行來分隔，整個源碼會更清爽整潔。
題外話：在群里說起這個問題的時候，我先表達的是沒有html、head、body元素的HTML頁面能通過驗證器驗證，結果遭到了反駁，大家提出不要為了驗證器而編碼。其實確實是這樣的，個人的觀點一直是只要瀏覽器表現一致，且穩定的標準支持這種使用方法，那么就可以投入生產環境之中，對于前端這樣多變、分裂的局面，我想這種態度相對一本正經地抱著標準不放會來得更好。
留言列表
