Web前端学习 第2章 网页重构8 网页结构
原创
一、树状结构
树状结构概述
在学习网页布局之前，我们需要先了解树状结构的基本概念。
在生活中，家谱就是一个最常见的树状结构，一个人可以有多个儿子，但是儿子只能有一个父亲，随着整个家庭一代代繁衍，整个家谱树也越来越根深叶茂。我们先看一个家谱的例子。 我们电脑的目录结构也是一个树状结构，如下所示：
├─我的电脑
│ ├─c:
│ ├─d:
│ │ ├─游戏
│ │ ├─电影
│ ├─e:
│ │ └─教学视频
│ │ │ └─html教学视频
│ │ └─电子书
│ │ │ └─JavaScript电子书
│ │ └─学习文档
│ │ └─学习笔记节点间的关系
我们还是以家谱为例，家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点，司马炎同样也是一个节点，这些节点是有关系的，具体关系如下所示：
- 根节点：每一个树状结构都有一个没有父级的节点，他被称作根节点。
- 父级节点：司马防是司马懿的父级，司马懿是司马师的父级。
- 子级节点：司马师是司马懿的子级，司马懿是司马防的子级。
- 同级关系：有相同父级的节点就是同级关系，司马懿和司马朗是同级，司马昭和司马亮是同级。（这里需要注意的是，司马炎和司马熙不是同级，因为他们没有相同的父级。）
二、html文件的树状结构
html文件的结构和上面的家谱一样，也是树状结构，例如下面的html代码。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <h1>水果列表</h1>
9 <ul>
10 <li id="banana">香蕉</li>
11 <li>苹果</li>
12 <li>鸭梨</li>
13 </ul>
14 </body>
15 </html>转换成树状结构如下所示，这里不考虑文档声明标签：
├─html
│ ├─lang="en"
│ ├─head
│ │ ├─meta
│ │ │ └─charset="UTF-8"
│ │ ├─title
│ │ │ └─Document
│ ├─body
│ │ └─h1
│ │ │ └─水果列表
│ │ └─ul
│ │ │ └─li
│ │ | │ └─id="banana"
│ │ | │ └─香蕉
│ │ │ └─li
│ │ | │ └─苹果
│ │ │ └─li
│ │ | │ └─鸭梨html标签是最外层的标签，没有父级，所以他是整个树状结构的根节点，body标签中有h1标签和ul标签，所以body是h1的父节点，h1是body的子节点，h1与ul是兄弟节点，又叫同级节点。
抛开节点之间的关系，我们再给html节点分类，可以分成下面三类：
- 元素节点
- 文本节点
- 属性节点
在上面的代码中，每一个元素都是原始节点，第一个li中的“香蕉”两个字就是文本节点，id就是属性节点。
三、网页布局
观察设计稿
画出树状结构
├─html
│ ├─div
│ │ ├─h2
│ │ │ └─精选手册
│ │ │ ├─a
│ │ │ │ └─查看更多>
│ ├─div
│ │ └─ul
│ │ │ └─li
│ │ | │ └─div
│ │ | │ │ └─img
│ │ | │ └─div
│ │ | │ │ └─h3
│ │ | │ │ └─span
│ │ | │ │ └─a
│ │ │ └─li
│ │ | │ └─div
│ │ | │ │ └─img
│ │ | │ └─div
│ │ | │ │ └─h3
│ │ | │ │ └─span
│ │ | │ │ └─a每一个区域（盒子）都使用div标签包裹起来，这样可以让我们的布局思路更清晰，将网页中出现的问题用一个个div隔离开。
但是缺点也是有的，那就是网页会多出很多没有必要的div。但是对于初学者来说，制作网页的过程，多两个div不是问题，结构混乱才，不容易调试才是最大的问题。
为了让树状结构更简洁，在上面的树状结构中未添加属性节点。
四、课后练习：
画出融职教育首页的网页树状结构，下图为参考答案。 要求如下：
- 写出所有元素节点和文本节点
- 适当标注出class属性节点，为后续添加样式做准备。
我们将会在第10节完成此设计稿的重构。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
