相关知识:

内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素。块级元素为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元素。

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

p标签内不能嵌套div(注解)的更多相关文章

  1. p标签内不能嵌套块级标签

    今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...

  2. HTML中为何P标签内不可包含DIV标签?

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  3. p标签里面不能嵌套div

    先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...

  4. HTML中为何P标签内不可包含DIV标签? (转)

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  5. HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?

    先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...

  6. <c:choose>标签内出错。不能写注解,否则就会报错

    org.apache.jasper.JasperException: Validation error messages from TagLibraryValidator for c in /WEB- ...

  7. 为什么p标签不能嵌套div??

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. HTML里为什么不能在<p>标签中嵌套<div>标签

    学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...

  9. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

随机推荐

  1. MySQL的表空间管理

    表空间: MySQL没有真正意义上的表空间管理. MySQL的Innodb包含两种表空间文件模式,默认的共享表空间和每个表分离的独立表空间. 一般来说,当数据量很小的时候建议使用共享表空间的管理方式. ...

  2. Qt 通过绘画设置边框阴影

    首先widget设置 setWindowFlags(Qt::FramelessWindowHint); setAttribute(Qt::WA_TranslucentBackground, true) ...

  3. C++ 与 Java 语言对比

    1 . Java 是完全封装的,而 C++ 的函数是可以定义在 Class 的外部的.从这里就可以看出 C++ 的 OO 思想不够彻底,至少在封装这一点上. 2. C++ 中有拷贝构造函数,可以把一个 ...

  4. Archive for the ‘Erlang’ Category 《Erlang编程指南》读后感

    http://timyang.net/category/erlang/ 在云时代,我们需要有更好的能利用多核功能及分布式能力的编程语言,Erlang在这方面具有天生的优势,因此我们始终对它保持强烈关注 ...

  5. vscode 如何格式化vue(template)html代码 , 保持标签属性不换行

    微软的vscode 真心强大 , electron 框架写的 , 用js写的桌面应用 , 有能力的话大家可以分析一下人家的源码 , 反正我是看不了 , 太牛掰了 在一次跟新后我发现莫名奇妙的些在组件( ...

  6. 「两」创建一个带 ssh 镜座服务(修订版)--采用 Dockerfile 创

    创建目录 首先,创建一个叫做 sshd_ubuntu 的目录,用于存放我们的 Dockerfile .脚本文件.以及其它文件. $ mkdir sshd_ubuntu $ ls sshd_ubuntu ...

  7. WPF 控制程序只能启动一次

    原文:WPF 控制程序只能启动一次 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/jsyhello/article/details/7411898 ...

  8. 对XAML进行编辑的辅助类(XamlHelper)

    原文:对XAML进行编辑的辅助类(XamlHelper) // XamlHelper.cs// --------------------------------------------// 对XAML ...

  9. requireJS简单的学习门户网站

    总结 requireJS.这翻译成中国"必须js".说白了就是装js文件与.如何装好了?.这是继AMD标准化的模块化装.除了AMD另一种规范称为CMD规范.跟随CMD兼容模块加载. ...

  10. js调查server

    <script type="text/javascript"> function showUnreadNews() { $(document).ready(functi ...