七、树状结构

最新推荐文章于 2024-12-04 20:26:00 发布

web前端菜鸟

最新推荐文章于 2024-12-04 20:26:00 发布

阅读量3.1k

点赞数

分类专栏：网页重构文章标签： html css 前端

原文链接：http://www.xiaozhoubg.com/docs/27

版权

网页重构专栏收录该内容

15 篇文章

订阅专栏

一、树状结构

树状结构概述

在学习网页布局之前，我们需要先了解树状结构的基本概念。

在生活中，家谱就是一个最常见的树状结构，一个人可以有多个儿子，但是儿子只能有一个父亲，随着整个家庭一代代繁衍，整个家谱树也越来越根深叶茂。我们先看一个家谱的例子。

我们电脑的目录结构也是一个树状结构，如下所示：

├─我的电脑
│    ├─c:
│    ├─d:
│    │   ├─游戏
│    │   ├─电影
│    ├─e:
│    │   └─教学视频
│    │   │   └─html教学视频
│    │   └─电子书
│    │   │   └─JavaScript电子书
│    │   └─学习文档
│    │   └─学习笔记
│    ├─f:电影

节点间的关系

我们还是以家谱为例，家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点，司马炎同样也是一个节点，这些节点是有关系的，具体关系如下所示：

根节点：每一个树状结构都有一个没有父级的节点，他被称作根节点。
父级节点：司马防是司马懿的父级，司马懿是司马师的父级。
子级节点：司马师是司马懿的子级，司马懿是司马防的子级。
同级关系：有相同父级的节点就是同级关系，司马懿和司马朗是同级，司马昭和司马亮是同级。（这里需要注意的是，司马炎和司马熙不是同级，因为他们没有相同的父级。）

二、html文件的树状结构

html文件的结构和上面的家谱一样，也是树状结构，例如下面的html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>水果列表</h1>
    <ul>
        <li id="banana">香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>
</body>
</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节点分类，可以分成下面三类：