• 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元素。

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

  • 相关阅读:
    阿里的面试官都喜欢问哪些问题?
    Spring AOP中的JDK和CGLib动态代理哪个效率更高?
    招聘季!送你21套经典面试题!助你一臂之力!
    Spring AOP中的JDK和CGLib动态代理哪个效率更高?
    为什么需要分布式配置中心?
    线上出故障了!我慌得一匹!教大家如何应对在线故障!
    阿里巴巴的26款超神Java开源项目!
    完了!生产事故!几百万消息在消息队列里积压了几个小时!
    十大经典排序算法(动图演示)
    用户画像学习笔记
  • 原文地址:https://www.cnblogs.com/zhoumingjie/p/7827413.html
Copyright © 2020-2023  润新知