Python学习第220课——html的层级关系( 二 )_Python学习第220课——html的层级关系

图1如图1 ，我们这个网页body里面仅仅只有很少的几个元素，而实际上你随便查看一些网站的网页源代码，你会看到他们源代码的html元素是一层套一层，非常复杂。这种html元素一层套一层的情况，就是html元素的层级关系结构，也就是我们前面说的DOM树结构。关于DOM ，简单的说，我们写的html网页就是一个文档，这个文档可以看做一个对象，我们知道Python等一些编程语言都有对象的概念，那么html文档就可以看做一个对象， html文档里面的元素也都可以看做对象，所以DOM就是Document Object Model(文档对象模型)的缩写。关于DOM的概念，我们现在暂时提一下，不去深入，因为这是前端的一个核心知识点，现在先不展开，我们先把网页的基础知识点学完，这样对全栈需要掌握哪些基本的东西有一个全局的了解，有个大概的框架，后面咱们有机会可以再去深入核心知识和细节。我们回来继续说html元素的层级关系。前面我们了解过html的树形结构。我们可以看看图1的代码结构，我们说一个html文档的html元素就是根元素， html元素里面又有head元素和body元素， head元素里面又有meta元素和title元素，而body元素里面又有h1元素、p元素、4个img元素。这种层级结构就像一棵树， html元素是根元素， body元素相当于树干，我们自己要写的网页的可视内容，都是写在body元素里面的，比如我们写的h1、p、img这些元素都在body里面，就相当于树干上的树枝。那么html元素的层级关系，实际上就是树形结构的另一种描述。我们把html的这种层级关系描述成父子、兄弟的关系。 A元素包含B元素， A就是B的父元素， B就是A是子元素。 A和B如果不是包含关系，则互为平行的兄弟元素。比如图1中的代码， html就相当于爷爷， body相当于父亲， h1、p、img相当于body的儿子， h1、p、img它们之间相当于兄弟的关系。所以html的层级关系我们用父子、兄弟关系去理解和描述。 ●div标签由于一个html文档一般会有很多的html元素，也就是说一个网页它会有很多的内容，这些内容实际上是由各个html元素去描述的。而一个网页又有分成很多区域，我们可以用一个标签去把组成网页上每一个区域的html元素包裹起来，这个标签就是div标签。 div标签没有实际的含义， div就是division的缩写，就是分开分隔的意思，所以div标签的作用就是相当于一个容器，把一些html元素装到它里面，表示这是一个区域。比如你可以给h1元素外面加一个div标签，然后给这个div标签取一个名字叫heading ，别人一看到这个div就知道，奥，这一块区域是一个标题。你也可以给p元素和img元素外面加一个div标签，然后给这个div取一个名字叫paragraph ，别人一看到这个div ，就知道，奥，这是一个段落，这个段落里面是一段文字和几张图片。 div的名字根据你想表达的意思随便取就行，这个名字赋给标签的属性class ， class是所有的html标签都有的属性。后面我们学习css的时候再介绍class 。我们按上面的想法，在vscode里面进行编写，在h1元素外面加上div标签，在p、img外面也加上div标签。具体的操作很简单，就是输入div标签，然后把他们复制或剪切再粘贴进div标签里面就行。如下图图2：