- 【融职培训】Web前端学习 第2章 网页重构8 网页结构
- 【融职培训】Web前端学习 第2章 网页重构9 css定位
- 【融职培训】Web前端学习 第2章 网页重构15 flex布局
- 【融职培训】Web前端学习 第2章 网页重构7 浮动布局
- 【融职培训】Web前端学习 第2章 网页重构16 grid布局
- 【融职培训】Web前端学习 第2章 网页重构18 rem布局
- 【融职培训】Web前端学习 第2章 网页重构17 媒体查询
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增
- 【融职培训】Web前端学习 第2章 网页重构10 还原设计稿
- 【融职培训】Web前端学习 第2章 网页重构12 css3新增样
一、树状结构
树状结构概述
在学习网页布局之前，我们需要先了解树状结构的基本概念。
在生活中，家谱就是一个最常见的树状结构，一个人可以有多个儿子，但是儿子只能有一个父亲，随着整个家庭一代代繁衍，整个家谱树也越来越根深叶茂。我们先看一个家谱的例子。
我们电脑的目录结构也是一个树状结构，如下所示：
├─我的电脑
│ ├─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节完成此设计稿的重构。
网友评论