在学习网页布局之前,我们需要先了解树状结构的基本概念。
在生活中,家谱就是一个最常见的树状结构,一个人可以有多个儿子,但是儿子只能有一个父亲,随着整个家庭一代代繁衍,整个家谱树也越来越根深叶茂。我们先看一个家谱的例子。 我们电脑的目录结构也是一个树状结构,如下所示:
├─我的电脑
│ ├─c:
│ ├─d:
│ │ ├─游戏
│ │ ├─电影
│ ├─e:
│ │ └─教学视频
│ │ │ └─html教学视频
│ │ └─电子书
│ │ │ └─JavaScript电子书
│ │ └─学习文档
│ │ └─学习笔记
我们还是以家谱为例,家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点,司马炎同样也是一个节点,这些节点是有关系的,具体关系如下所示:
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不是问题,结构混乱才,不容易调试才是最大的问题。
为了让树状结构更简洁,在上面的树状结构中未添加属性节点。
画出融职教育首页的网页树状结构,下图为参考答案。 要求如下:
我们将会在第10节完成此设计稿的重构。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。