# H1,2,3,4,5,6标题元素
切记:div不是diy,div是跨级元素类别哦!
div是什么,你会想一下,用一句话概括一下,div就是通过层层嵌套的方式布局网页结构的,好比是盖房子,一间一间的房子,外面有一个大的围墙!
我们来看看h系列的标题,光有,框框和架子还不够啊,标题,就好比我们家里的门,有房门,大门,厨房门,卫生间的门,都是门,为何要分这么多,因为场景不同,总不能在我们的卫生间装个防盗门吧!
**为啥会有h系列标题呢**
> 为了方便排版和直接的调整文字大小,主要是早起的网页,是用来排版文档的,随意就一直遗留下来了!
**h1,h2,h3,h4,他们后面的数字,代表的级别,数字约到,他的最直观的的效果就是,字体大小变了,粗细也变了!**
效果如下:
![](https://box.kancloud.cn/b89b45388c333308f4e269ec91cd52e1_952x434.png)
# 代码如下
![](https://box.kancloud.cn/3c7f4da9fd0c2b2dbd130f7e33922e3c_898x394.png)
## 这个标签有啥用,为何我们要学呢:
> 首先,他和div是一个家族,他是块级标签!
> 方便们只管的统一文字大小排版,主要考虑有些浏览器的兼容问题,对不同大小的渲染有差异,标题就很统一了!
### 一般在什么情况下可以考虑使用这个标签呢
先看看,别人的网页他们是否也又用到这个标签
![](https://box.kancloud.cn/9eea6770c840f0c4d32c1db51deb8e5c_2061x1221.png)
能看清吗,我只是告诉你哦,我仅仅是告诉,别人是怎么用,的同时别人用它一般是控制什么内容,当你看你看到类似设计需求的时候,你应该联想起来!
你可以找找其他网站是否有类似的情况,要回举一反三!
![](https://box.kancloud.cn/a3a29409ed624eb1701d2b99e275cc73_1953x1144.png)
找到这种标签的使用场景,太多了!
### 课后练习
> 实现如下效果的排版,左边的红方点,不需要
> ![](https://box.kancloud.cn/d89d779937a499d00b0e64a4c830a490_374x215.png)
### 扩展题:
![](https://box.kancloud.cn/a4806ffa580135d20569f0249e19ebcb_696x1042.png)
加大练习才是掌握的最佳途径,你不动手,就算饭放到你面前,你也会饿死!请多动手操作!