你所不知道的<html>, <head>, <body>

rensanning

浏览: 3514203 次
性别:
来自: 大连

最近访客更多访客>>

blogtester

lliiqiang

film

newer_fisher

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 使用Titanium Mo...
浏览量：37479

: Cordova 3.x入门...
浏览量：604323

: 常用Java开源Libra...
浏览量：678071

: 搭建 CentOS 6 服...
浏览量：87257

: Spring Boot 入...
浏览量：399816

: 基于Spring Secu...
浏览量：69067

: MQTT入门
浏览量：90474

文章分类

社区版块

存档分类

博客分类：

杂七杂八

（1）HTML并没有要求一定要有<html>, <head>, <body>（XHTML会做校验）

<!DOCTYPE html>
<meta charset=utf-8>
<title>Browsers add html, head, body elements</title>
<p>There is no html, head, body element in the source code but if you check - in any browser - you'll find they've been inserted.</p>

浏览器会正常解析，并自动构建了包含标准标签的DOM树，解析后的DOM树如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>Browsers add html, head, body elements</title>
</head><body><p>There is no html, head, body element in the source code but if you check - in any browser - you'll find they've been inserted.</p></body></html>

（2）浏览器如何判断<head>结束<body>开始的呢？

<!DOCTYPE html>
<meta charset=utf-8>
<title>Browsers add html, head, body elements</title>
<vomitingotter>This is in a &lt;vomitingotter> element. (this is, as yet, not officially part of HTML. hurry up, Hixie!) But how does the browser know it should be in the &lt;body>?</vomitingotter>

浏览器遇到不认识的<vomitingotter>就认为是<body>开始，解析后的DOM树如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>Browsers add html, head, body elements</title>
</head><body><vomitingotter>This is in a &lt;vomitingotter&gt; element. (this is, as yet, not officially part of HTML. hurry up, Hixie!) But how does the browser know it should be in the &lt;body&gt;?</vomitingotter></body></html>

（3）只要遇到<head>中可识别的Metadata(<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>)以外的标签就结束<head>，如果你把Metadata写在了后边也不会被自动识别到<head>中。

<!DOCTYPE html>
<viewport>This is the content of a pretend &lt;viewport> element, which in the source is the first line after the DOCTYPE, before the charset declaration or title element. But if you look in any DOM inspector in any browser, you'll see that it's been put in the body.</viewport>
<meta charset=utf-8>
<title>Browsers add html, head, body elements</title>

浏览器遇到不认识的标签<viewport>就认为是<body>开始，<meta>和<title>被解析到了<body>中：

<html><head></head><body><viewport>This is the content of a pretend &lt;viewport&gt; element, which in the source is the first line after the DOCTYPE, before the charset declaration or title element. But if you look in any DOM inspector in any browser, you'll see that it's been put in the body.</viewport>
<meta charset="utf-8">
<title>Browsers add html, head, body elements</title></body></html>

（4）即使你把不该出现在<head>中的标签强制放到<head>里，比如：

<!DOCTYPE html>
<html>
<head>
<viewport>This is the content of a pretend &lt;viewport> element, which in the source is the first line after the DOCTYPE</viewport>
<meta charset=utf-8>
<title>Browsers add html, head, body elements</title>
</head>
<body>
<p>Paragraph in body element</p>
</body>
</html>

浏览器也不认为他们是<head>信息：

<html><head>
</head><body><viewport>This is the content of a pretend &lt;viewport&gt; element, which in the source is the first line after the DOCTYPE</viewport>
<meta charset="utf-8">
<title>Browsers add html, head, body elements</title>


<p>Paragraph in body element</p>

</body></html>

以上使用的浏览器是：Google Chrome 版本：35.0.1916.153。

参考：
http://www.brucelawson.co.uk/2014/why-is-viewport-in-a-meta-tag/
http://www.w3.org/TR/html401/struct/global.html

分享到：

AngularUI Router 概要 | 把Crosswalk打包到Cordova应用中

2014-10-10 15:48
浏览 1934
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论