一、为什么需要了解我
在这个网络时代，各类终端看到的网络内容，几乎都需要转换成“我”进行展示。所以在这么高大上的时代，如果都不了解我是不是有点low。
对于html语言的了解，基本是从前端显示的内容开始。对于这个部分大家首要的感观，就类似于用各种标签来实现内容的排版效果。建议大家可以先去感受各类网站的排版效果，在基本掌握部分标签的控制特性后就可以思考和实践各类效果的实现。对于高级部分的内容就要依赖于我的化妆师CSS（层叠样式表）来进行控制，这个我们会在后续的内容中介绍到。
但不管怎样，大家首先要对我形成一种具有画面感的感受，我们可以将各类标签理解为一层一层的洋葱，每一层可以放置各种不同的内容。
洋葱的层次结构
在熟悉并能有各种画面的感觉后，可以尝试向更高级及复杂的树型画面转换。总体来说我就是利用了这样一种树型结构将需要看到的内容进行组织与展示。当然，这一结构在大自然中普遍存在。
树状结构--从根部到发散的枝叶
太阳系--甚至整个宇宙也使用这一规则
在我的世界中，需要大家熟悉各种不同标签的展示效果与控制范围。有了这样的基础认知，就可以开始来看看我是怎么组织、控制最终需要展示的内容。
二、一个最基本的我
首先，让大家来看看我身体的基本结构吧！
<!DOCTYPE html>
<html>
<head>
<title>这是页面的标题</title>
</head>
<body>
<h1>这是我们正文需要放置“标题”的地方</h>
<p> 这是我们正文需要放置“段落内容”的地方</p>
</body>
</html>
我上面的结构，在浏览器中所能呈现的效果
下面让我们带着洋葱皮、树状结构的画面印象，一起来探索这个文档的结构。
<!DOCTYPE HTML>
<html>
1.最外一层标签，告诉主人我的类型是“html”。就像洋葱如果长着一层桔子的皮，我们一看就会觉得这是个桔子，但他也许只是个洋葱。<head>
2.我的头部，头部标签，定义我在网络上的基本特征，比方我的姓名，也就是下面标题标签所表示的内容；我的字符编码格式；可以用什么样的关键字来寻找到我等等。<title>这是页面的标题</title>
3.定义我的姓名。</head>
4.头部位置结束，下面应该是脖子与身体了。噢，我好像是一个没有脖子的人。<body>
5.主人，这是我的身体，我们需要展示的内容就在身体里，他们在开展各种不可思议的活动<h1>这是我们需要放置内容的地方</h>
6."h"开头的标签代表[标题]，表示这里面需要显示的内容是标题格式，他们一共有6级（<h1>...<h6>）。
实际使用中"h1"不太常用，只在页面中最关键的信息，例如站名名称、企业名称中使用一次，在全文中一般很少再次使用。
<p> 这里放置我们需要的内容</p>
7. "p" 标签代表这是一个段落，一般可以理解为这里面放的是正文。他是一个很重要的区块，当我们需要将某一内容以"区块"的方式组织，可以使用这个标签。
区块是很重要的一个结构，可理解为身体中的器官。</body>
8. "/"放置在标签前，代表这个标签段的内容结束了。我们可以看到大部分标签都是这样成对出现。以代表他的控制范围。</html>
9. 整个文档的结束位置，也是故事要说再见的地方。
我们可以看看实际使用中我的结构
百度搜索页的结构
怎么能看到这个结构呢，我们用Firefox或Chrome浏览器打开网页后，按F12键，就可以了。
当然其它的浏览器，你也可以尝试这个操作。
好了，到此大家对我有了一个基本的认识。
下一篇，我会继续带领大家一起探索我神秘而蕴含宇宙真理的身体。
网友评论