p标签内不能嵌套div(注解)

相关知识:

内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素。块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“block”的特性称为replace元素。

<p>

  <div>编码美学</div>

  <div>编码美学</div>

</p>

在上面的代码中,p标签在遇到下一个块级元素的时候就闭合了,它会被浏览器解析为页面中p元素的两倍数量,也就是开始标签被解析为一个p元素,结束标签被解析为一个p元素。

 

<p></p>

 

  <div>编码美学</div>

 

  <div>编码美学</div>

 

</p></p>

 

 

1级元素:<body>

2级元素:其他。。(可以互相嵌套,如li和div)

3级元素:

  指哪些不可以自由嵌套的元素,如<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

特别1:

   <ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须是<dt>或者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容的<td>或者<th>。

特别2:

  <img>和<input>有着其它内联元素没有的宽和高。它们在"inline"的情况下又有"black"的特性,W3C称之为replace元素。

 

最后总结汇总

1、块元素可以包含内联元素或某些块元素(p元素中嵌套Div元素是错误的做法) ,但内联元素却不能包含块元素,它只能包含其他的内联元素

2、p元素中是不能嵌套块级元素的。

3、重点:块状元素的三个级别

4、内联元素的img 与 input比较特殊,他们有内联元素没有的宽高,w3c定义为replace元素,将元素设置为display:inline-block,模拟的就是replace元素。

(资料引自网络,加以修改而成)

posted @ 2017-11-13 17:52  周明杰  阅读(716)  评论(0编辑  收藏  举报