HTML块级元素和行内元素的嵌套问题

块级元素与行内元素的区别：

块级元素：块级元素总是会另起一行开始，占一行或多行，其高度、行高和边距都是可控的。

行内元素：负责局部和细节，在同一行显示，其高度、行高和边距不可控。

通过display：block;或者display:inline两者可以相互转化。

分类：

块级元素：div、h1、h2、h3、h4、h5、h6、ol、ul、p等

行内元素：a、strong、br、font、img、label、span等

嵌套规则：

1行内不能嵌套块级，块级可以嵌套行内

举例： <div><h1></h1><p></p></div>     正确（块级并列，块级嵌套块级）

　　     <a href="#"><span></span></a>    正确（行内嵌套行内）

　　     <span><div></div></span>     错误（行内嵌套块级）　

2有几个特殊的块级元素只能包含行内元素，不能再包含块级元素

这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt

<p><ol><li></li></ol></p> —— 错

<p><div></div></p> —— 错

3特殊的<li>里面可以嵌套div（<li>可以但<p>不行）

4块级元素与块级元素并列、行内元素与行内元素并列

<div><h2></h2><span></span></div>　　错误（块级不能与行内并列）

参考链接：https://www.cnblogs.com/lovelvxia/p/5726316.html