html元素之间的关系有哪两种关系,HTML标签根据特点分类以及标签之间的关系

HTML标签根据特点分类

首先是块标签：

行标签(内联标签)：

行内标签：

标签和标签之间的关系

HTML里有多种标签让初学者眼花缭乱，那我们怎么给它分分类，划到一起，让我们更快速的记住它们？

在这里我主要根据它们的特点进行分类

首先是块标签：

**

块标签是什么，简单点来说，块标签默认宽度占据它父级标签宽度的100%，可以设置宽高，但是就是设置了小于父级标签的宽度，它剩下的位置也不会给别的标签占用，会存在一片留白，块标签是呈现从上往下的一种排列方式。

效果图

块标签有：div main nav section footer (布局类标签)ul li ol dl dt(列表类标签)p h1-h6等

行标签(内联标签)：

**

行标签和块标签恰恰相反，它只会占据它内部内容的位置，哪怕是你给它设置宽高，它也不要，所以说，它设置不了宽高，并且，会把剩下的位置给别的行标签，或者行内标签。

行内标签有：a span b s del 等

我是span1

我是span2

效果图

行内标签：

**

行内标签可以说是行标签和块标签的孩子吧，在特点方面(我习惯这么去理解它)，它具有行标签和块标签的某些特征：首先是块标签的可以设置宽高，其次是行标签的只占用内部内容的位置。

img是个典型的行内标签，但是在工作当中，我们一般不会去改变它的宽高，那样会导致图片失真等问题。

标签和标签之间的关系

**

在上面提到一个父级标签的存在，那么什么是父级标签？

这要从标签和标签之间的关系说起，标签和标签之间我觉得是有一种血缘关系的，在html标签中，存在单标签和双标签，单标签我理解为和尚，而双标签就是正常的夫妻，和尚是没有后代的，同样的单标签没有办法包含别的标签，自然也就没有后代，而正常的夫妻肯定是有孩子的，那我们的双标签是可以包含别的标签，自然就可以拥有孩子，也有人会说，我不写标签不就没有孩子了，那不是你不想给它孩子嘛。。。

那么有血缘关系了，是不是就有父子关系，兄弟关系，子孙关系呢?

是的。

父子关系是直接上下级的关系比如

span是div的儿子，div是span的父亲。

兄弟关系是相邻的两个标签，在同一级，又不包含。比如

span和a就是兄弟关系span和a都是div的孩子。

子孙关系就是类型与你和你爷爷的关系，隔代的。比如

div和span就是子孙关系，而子孙关系又不光是你和你爷爷这种关系，还可以是你和你太爷爷的关系，同样也是子孙关系。

比如

p是main的子孙，span也是mian的子孙。