如同电子邮件有主题、收件人、正文、（签名）这些结构和标准，HTML文件也会遵循一定的结构和标准。
![]()
![]()
![]()
前文给出的一系列例子都是HTML文件的片段，他们是不完整或者是不规范的。
一个完整的HTML文件，最外层的标签是<html>，文件结束是</html>。
<html></html>是最外层的盒子，或者是俄罗斯套娃。我们拆开盒子，可以看到另外两个套娃。
<head>标签，或者叫head娃娃是后续解耦内容的关键。分离网页的内容、样式和行为都是在head娃娃中实现。
很多信息小套娃还可以放在head套娃中。这里举个例，抓住虾米网的head娃娃，打开看看。
源码（已做删减和格式重排）：
<head>
<meta charset="UTF-8" />
<title>虾米音乐网(xiami.com) - 高品质音乐 发现 分享 </title>
<meta name="keywords" content="虾米网,在线音乐网站,在线听歌,音乐网站,在线音乐试听,音乐搜索,音乐下载,APE,数字音乐,高品质音乐,mp3下载,高品质mp3,音乐P2P分享,音乐社区,音乐互动平台,音乐分享,乐评,高品质音乐社区,网络电台,老歌,无损音乐,P2P下载,音乐SNS,320K,320Kbps " />
<meta name="description" content="提供高品质音乐MP3的个性化推荐、发布、P2P下载服务，以及线下音乐活动等互动内容" />
</head>
<meta charset="UTF-8" />规定网页使用UTF-8的编码形式（UTF-8在这个系列的第一篇中提到过），这样Hongkong、湾湾和各种外国友人打开虾米网就不会出现乱码了。
<title>标签，用以制定页面的标题，我们打开浏览器，在多窗口Tab上可以看到<title>的文字——“虾米音乐网(xiami.com) - 高品质音乐 发现 分享”。
name属性为keywords、description的<meta>标签是定义网站描述和关键词的。
闭上眼睛想象一样，在信息流通的网络上，几个大蜘蛛（爬虫）在吐丝缠绕猎物，一个叫度娘、一个叫谷歌。公正的蜘蛛是会严格地抓住这两个<meta>标签的内容的。
那么就做一个实验吧，虾米网在<meta>给出了若干关键词——"虾米网,在线音乐网站,在线听歌,音乐网站,在线音乐试听,音乐搜索,音乐下载,APE,数字音乐,高品质音乐,mp3下载,高品质mp3,音乐P2P分享,音乐社区,音乐互动平台,音乐分享,乐评,高品质音乐社区,网络电台,老歌,无损音乐,P2P下载,音乐SNS,320K,320Kbps"。
我们随意挑出一个，看看会不会被度娘准确的抓到！“高品质mp3”就是你了！
手气不错哦！（谷歌君：关你什么事_(:з」∠)_）。
注意一下红框的文字，看看是不是<meta>中description给出的内容。
各位站长君，定义了keywords并且网站做得还差强人意，不妨试试度娘蜘蛛和谷歌蜘蛛，当然要是竞争对手给度娘BG了大果粒，度娘会对你毫无情面。P.S.非黄赌毒的正规网站，1000页内一定可以找到！还有，小伙伴们，加油让你的个人博客和网站成为关键词下搜索结果的第一个吧！
咳咳，紧接着看看另外一个和<head>平级的套娃，<body>娃娃。
<body>娃娃多数时候老实、专一，页面内容一般都放在body娃娃中，比如前文中的代码片段，这里就不深入下去了。
把HTML的结构比作俄罗斯套娃还是比较新颖的，当然比喻成曾祖父、祖父、父亲、儿子也可以，越在外层的标签辈分越大。一个标签内没有包含其他标签，或许是这个标签（娃娃）还没有到婚育年龄，找不到另一半也说不定。
计算机科学中，常用“树”来描述这种结构。最外层的标签<html>通常被称为树根，抓起树根我们可以拔起整棵树（偷走最外层的娃娃，我们就会得到所有套娃）；包含其他标签的标签（如<head><body>）的标签通常被称为树干；不包含任何其他标签的标签通常被称为叶子。（绕晕了）
为了更好地过渡到另外一个主题，我们把标签们统一称为节点即：根节点、枝干节点、叶子节点。外层节点是其
直接包裹的节点的父节点，被包裹的节点是
直接包裹其外层节点的子节点。例如：<head>是<html>的子节点，<html>是<head>的父节点。
<html>
<head>
<meta>
</meta>
</head>
</head>
注意meta并不是<html>的子节点，因为没有被<html>
直接
包裹，但是它是<head>的子节点。
我们重新构建一下鸽子餐单吧，用上面提到的规则！
<html>
<head>
<title>怪鸽子餐厅特色菜，最好的味道给热爱鸽子的你们。</title>
<meta name="keywords" content="鸽子,晚餐,美味,自由,亭子">
<meta name="description" content="一个美味的鸽子餐厅，只提供鸽子肉">
</head>
<body>
<h1>
<center>
<font color="red">
<b>
鸽子的晚餐
</b>
</font>
</center>
</h1>
<hr>
<ol>
<li>
<font color="blue">
<em>
香辣鸽子
</em>
</font>
</li>
<li>
<font color="blue">
<em>
红烧鸽子
</em>
</font>
</li>
<li>
<font color="blue">
<em>
原味炖鸽子
</em>
</font>
</li>
</ol>
<input type="radio">上菜吧！</input>
<input type="radio">再等等！</input>
<br>
<br>
<input type="button" value="确定" onclick = "alert('收到您的菜单，怪鸽子餐厅很荣幸为您服务，鸽子的晚餐稍后就到。');"></input>
</body>
</html>
我们向着解耦的方向一步步前进着，确定清楚的结构是第一步，下一篇会介绍一个新的技术——CSS，HTML君暂且告一段落吧！
尾声我们把鸽子餐厅的页面结构画成一棵树O(∩_∩)O~（省略了很多节点）
生物树！
HTML树！！（褐色节点：根节点；灰色节点：枝干节点；绿色节点：叶子节点。P.S. 未画全所有节点）
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
