你所不知道的, ,

(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

你可能感兴趣的:(html)