五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > 沒有html、head、body的頁面分析

沒有html、head、body的頁面分析

文章來源:365jz.com     點擊數(shù):372    更新時間:2011-02-10 16:25   參與評論

今天在學習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標簽的省略(其實多數(shù)是因為偷懶或者干脆是忘記了),部分瀏覽器(IE)會自動補上一個tbody元素,而其他瀏覽器則可以在沒有tbody的情況下渲染table(此處確實是IE的錯,因為標準里說table里允許直接寫tr,這點和本文要說的html、head、body標簽不同)。

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

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

頁面可以通過這里查看測試頁面,頁面的html結(jié)構如下:

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

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

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

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

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

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

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

//elements - 所有頂層元素
var head = document.createElement('head'),
    body = document.createElement('body'),
    i = 0, //循環(huán)用
    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的結(jié)構多了一層,看起來更復雜了。個人的推薦是,從此去掉html、head、body三個標簽,在head內(nèi)容和body內(nèi)容之間使用2-3個換行來分隔,整個源碼會更清爽整潔。

題外話:在群里說起這個問題的時候,我先表達的是“沒有html、head、body元素的HTML頁面能通過驗證器驗證”,結(jié)果遭到了反駁,大家提出不要為了驗證器而編碼。其實確實是這樣的,個人的觀點一直是“只要瀏覽器表現(xiàn)一致,且穩(wěn)定的標準支持這種使用方法,那么就可以投入生產(chǎn)環(huán)境之中”,對于前端這樣多變、分裂的局面,我想這種態(tài)度相對一本正經(jīng)地抱著標準不放會來得更好。

如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答?。?點擊進入論壇

發(fā)表評論 (372人查看,0條評論)
請自覺遵守互聯(lián)網(wǎng)相關的政策法規(guī),嚴禁發(fā)布色情、暴力、反動的言論。
昵稱:
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務咨詢

· 技術支持
· 服務時間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權所有 鄂ICP備17013400號