七、树状结构
目錄
- 一、樹狀結構
- 樹狀結構概述
- 節點間的關系
- 二、html文件的樹狀結構
一、樹狀結構
樹狀結構概述
在學習網頁布局之前，我們需要先了解樹狀結構的基本概念。
在生活中，家譜就是一個最常見的樹狀結構，一個人可以有多個兒子，但是兒子只能有一個父親，隨著整個家庭一代代繁衍，整個家譜樹也越來越根深葉茂。我們先看一個家譜的例子。
我們電腦的目錄結構也是一個樹狀結構，如下所示：
├─我的電腦 │ ├─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節點分類，可以分成下面三類：
- 元素節點
- 文本節點
- 屬性節點
dy的子節點，h1與ul是兄弟節點，又叫同級節點。
拋開節點之間的關系，我們再給html節點分類，可以分成下面三類：
- 元素節點
- 文本節點
- 屬性節點
在上面的代碼中，每一個元素都是原始節點，第一個li中的“香蕉”兩個字就是文本節點，id就是屬性節點。
總結
- 上一篇： 树状结构表结构和功能设计
- 下一篇： 如何快速提升网站PV值（人均浏览页数）？