HTML标签嵌套问题

块级元素和内联元素的嵌套规则：

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.块级元素与块级元素并列、内联元素与内联元素并列

　　　　<div><h2></h2><p></p></div>　　正确

　　　　<div><a href="#"></a><span></span></div>　　正确

　　　　<div><h2></h2><span></span></div>　　错误（块级和内联并列了）

 

4，在HTML里有几个元素是比较特别的：<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>。

 

5. 在内联元素中，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为替换元素，它们在属于inline的情况下同样具有block的一些特性，在"display:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，使之既可以以内联元素显示，又可以设置块级元素的属性。

转载于:https://www.cnblogs.com/wzp-monkey/p/10083663.html