各浏览器中的结果出奇地一致,就连老得掉渣的IE6也很顺应主流地将各个元素正确地分配到了head和body元素之中。
经过对各浏览器中的结果的观察,似乎不难得出这样的一个结论:浏览器始终创建一个head元素,并自上而下依次检查页面源码中的各标签,能够加入到head元素的标签都加入到head元素中,随后将剩余的元素分配到自动创建的body元素中。
而这种结果也是符合正常的思维逻辑的,可见浏览器确实可以为我们做到很多,让我们省心省力
那么进一步的,head元素中可以放置哪些元素呢?在标准中的head标签一章中明确指出,head元素的内容模型为元数据内容,包括了base、command、link、meta、noscript、script、style、title
这几个。
因此,对于自动创建head和body元素这一回事,如果使用代码来表述,大概是以下的模式:
//elements - 所有顶层元素 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页面能通过验证器验证,结果遭到了反驳,大家提出不要为了验证器而编码。其实确实是这样的,个人的观点一直是只要浏览器表现一致,且稳定的标准支持这种使用方法,那么就可以投入生产环境之中,对于前端这样多变、分裂的局面,我想这种态度相对一本正经地抱着标准不放会来得更好。