html P嵌套div,HTML里为什么不能在<p>标签中嵌套<div>标签

学习过HTML语言的人都应该知道，在HTML里，有分块级元素和内联元素；例如我们常用到的div，o，ul，dl，table，h1...h6等，这些都是块级元素；而像a，b，i，em，img，span等就是内联元素了。在开发过程中，我们避免不了各种元素的嵌套，但是有时候我们在不知不觉中就错误地嵌套元素了。为什么说是不知不觉呢。因为就算我们错误地嵌套了，但是在浏览器中显示的时候，其实是没有区别的。咱们今天就具体地分析为什么不能再

里嵌套

。希望通过这个例子，大家可以自己去学习探索更多关于元素与元素之间的嵌套问题。

首先咱们先看两段代码：

第一段：

1hello

world

第二段：

2hello

world

在运行之前，大家可以想象得出这两段代码在浏览器上显示的结果吗？咱们来看一下这两段代码在浏览器上显示的结果吧：

没错，其实这两段代码在浏览器上显示的效果是一样的，就是因为这样的结果，所以咱们在做开发的时候就很容易不知不觉就出现bug。让我们用浏览器的开发者工具查看一下代码吧：

看，事实上第一段代码放在浏览器上时就会变成了这个样子，world 被挤了出来，不在p标签里面了，这样子在开发中我们对网站元素的控制就达不到我们想要的效果了。事实上第二段代码才是我们想要的：

《转载需标明出处》

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

问题由来:

中嵌套

标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段

的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

Three&period;js中的div标签跟随&lpar;模型弹框&rpar;

目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

为什么p标签不能嵌套div&quest;&quest;

div中嵌套div中使用margin-top失效问题

div中嵌套div中使用margin-top失效问题

HTML之body标签中的相关标签补充

一 列表标签 列表标签分为三种. 1.无序列表

• ,无序列表中的每一项是
• 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  HTML之body标签中的相关标签

  一 字体标签   字体标签包含:h1~h6.....^.

  前端 ------ 03 body标签中的相关标签

  列表标签

  .

. 表格标签 表单标签 一.列表标签 列表标签分为三种. 1.无序列表&l ...

rails中如何在a标签中添加其他标签

最近在用rails写一个项目练练手,然后遇到了一个问题,就是用  生成一个a标签,之后就在想我怎么在这个a标 ...

03-----body标签中的相关标签

今日主要内容: 列表标签

. . 表格标签 表单标签 一.列表标签 1.无序列表< ...

随机推荐

数据分析和R语言的那点事儿&lowbar;1

最近遇到一些程序员同学向我了解R语言,有些更是想转行做数据分析,故开始学习R或者Python之类的语言.在有其他编程语言的背景下,学习R的语法的确是一件十分简单的事.霸特,如果以为仅仅是这样的话那就图 ...

Objective－C( block的使用)

block block用来保存一段代码 block的标志:^ block跟函数很像:可以保存代码.有返回值.有形参.调用方式跟调用方法一样 block内部可以访问外面的变量 默认情况下,block内部 ...

2016国产恐怖惊悚《诡娃》HD720P&period;国语中字

导演: 蒋国权编剧: 任旭东主演: 李抒航 / 程媛媛 / 孔维类型: 惊悚 / 恐怖制片国家/地区: 中国大陆语言: 汉语普通话上映日期: 2016-02-25(中国大陆)片长: 89分钟诡娃的剧情 ...

JS通过ajax动态读取xml文件内容

http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下

分布式全局不重复ID生成算法

分布式全局不重复ID生成算法 算法全局id唯一id  在分布式系统中经常会使用到生成全局唯一不重复ID的情况.本篇博客介绍生成的一些方法. 常见的一些方式: 1.通过DB做全局自增操作 优点:简单.高 ...

&lbrack;AngularJS &plus; Webpack&rsqb; Production Setup

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configurat ...

给Angularjs配上Requirejs

给Angularjs配上Requirejs 需要考虑的事情: 1.js.css.template都按需加载,js主要就controller: * js和css都可以用requirejs和它的插件解决, ...

二级C考点汇总

1.变量命名的合法性2.数据类型的转换,分为强类型和隐式类型3.字符串:字符串的声明.定义和使用,通常结合数组和指针 4.数组:下标的转换及数组的顺序存储5.函数:声明.定义.调用,递归函数(如菲薄纳 ...