相关知识：

内联元素可以嵌套内联元素，块级元素可以嵌套部分块级元素并也能嵌套内联元素，但内联元素不能嵌套块级元素。块级元素为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. Android 升级到Android Studio2.2 后打不开以前版本的项目

    1.找到 build.gradle 用记事本打开,修改如下: // Top-level build file where you can add configuration options commo ...

  2. 【u012】数字游戏

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小W发明了一个游戏,他在黑板上写出了一行数字a1,a2,-an,然后给你m个回合的机会,每回合你可以从 ...

  3. 【LeetCode-面试算法经典-Java实现】【107-Binary Tree Level Order Traversal II（二叉树层序遍历II）】

    [107-Binary Tree Level Order Traversal II(二叉树层序遍历II)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a ...

  4. python 爬取36kr 7x24h快讯

    url为https://36kr.com/newsflashes,抓包后发现第一次的新闻内容就是包含在<script>var props={}></script>标签中, ...

  5. Cordova热更新和App升级 - 简书

    原文:Cordova热更新和App升级 - 简书 公司的cordova项目前段时间增加了热更新功能,自己第一次做的时候在网上查找了很多资料,有的资料写的并不全面遇到了很多坑.因此总结一些在开发过程中遇 ...

  6. postman VS restlet client基本使用

    postman与restlet都是使用的google浏览器的插件(出不去自行解决,you get!),此两款软件的强大这里就不在赘述了,postman的网上说明很多,restlet的中文配置很少了.这 ...

  7. 一次解决React+TypeScript+Webpack 别名（alias）找不到问题的过程「转载」

    链接 引言 在组件开发中,业务功能和基础组件一般分开放,比如在我们的项目中,components为基础组件, container为业务组件,但是在container中调用components中的组件时 ...

  8. .NET开发人员的瓶颈和职业发展

    现在社会比前几年浮躁了,越来越多的人抱怨薪水低,高薪工作不好找; 诚然这有CPI的压力,可是也有很多人没有认清自己的职业发展. 很多.net程序员个各种纠结,想拿高薪又拿不到,想提高又不知道怎么能提高 ...

  9. Matlab Tricks（二十八）—— 笛卡尔积的实现

    笛卡尔积在数学上是一种二元关系,笛卡尔积作用的双方是两个集合,作用的结果是一个新的集合. A×B={(a,b)|a∈Aandb∈B} 现有两向量: >> p = [1, 5, 10]; & ...

  10. Asp.net固定功能位充满了零（解决，演示样本）！

    Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123 ...