# 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) 加大练习才是掌握的最佳途径,你不动手,就算饭放到你面前,你也会饿死!请多动手操作!