HTML里为什么不能在

标签中嵌套

标签

时间:2022-12-08 16:23:51

学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素;例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素;而像a,b,i,em,img,span等就是内联元素了。在开发过程中,我们避免不了各种元素的嵌套,但是有时候我们在不知不觉中就错误地嵌套元素了。为什么说是不知不觉呢。因为就算我们错误地嵌套了,但是在浏览器中显示的时候,其实是没有区别的。咱们今天就具体地分析为什么不能再<p>里嵌套<div>。希望通过这个例子,大家可以自己去学习探索更多关于元素与元素之间的嵌套问题。

首先咱们先看两段代码:

第一段:

 <p>
1hello
<div></div>
world
</p>
第二段:
 <p>
2hello
</p>
<div></div>
<p>
world
</p>
在运行之前,大家可以想象得出这两段代码在浏览器上显示的结果吗?咱们来看一下这两段代码在浏览器上显示的结果吧:
HTML里为什么不能在<p>标签中嵌套<div>标签

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

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

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

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

 《转载需标明出处》

HTML里为什么不能在<p>标签中嵌套<div>标签的更多相关文章

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

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

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

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

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

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

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

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

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

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  6. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

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

    列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...

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

    最近在用rails写一个项目练练手,然后遇到了一个问题,就是用 <% link_to("首页", root_path) %> 生成一个a标签,之后就在想我怎么在这个a标 ...

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

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...

随机推荐

  1. JQuery 常用

    1.同一name分组的多个radio,获取选中radio的value值: var check_val=$("input[name='属性名']:checked").val(); 2 ...

  2. 将spring管理的bean使用注解的方式注入到servlet中

    Filter和Servlet中不能直接注解使用spring的bean,因为这两个都是servlet容器维护管理的,当然也有实现方法,如下: 1.创建一个AbstractServlet 抽象类,让你的所 ...

  3. STM32 使用 printf 发送数据配置方法 -- 串口 UART&comma; JTAG SWO&comma; JLINK RTT

    STM32串口通信中使用printf发送数据配置方法(开发环境 Keil RVMDK) http://home.eeworld.com.cn/my/space-uid-338727-blogid-47 ...

  4. &lbrack;LeetCode&rsqb; Maximum Gap 解题思路

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  5. Oracle EBS-SQL &lpar;OM-6&rpar;&colon;打开订单&period;sql

    /*打开头*/ update oe_order_headers_all t set t.flow_status_code = 'BOOKED', t.open_flag = 'Y' where t.o ...

  6. Codeforces Round&num;344

    A题意思是,给出两个数列,求一个区间,使第一个数列的区间或和第二个数列的区间或的和最大,输出最大和 很显然,或运算会使得答案越运算越大.所以,直接全部或起来,相加就是答案. = =打cf的时候自动脑补 ...

  7. 配置Sublime Text 2 的Python运行环境

    Sublime Text 2作为一款轻量级的编辑器,特点鲜明,方便使用,愈发受到普罗大众的喜爱,我个人最近也开始用了起来.同时,我近段时间还在学习Python的相关东西,所以开始用ST2来写Pytho ...

  8. hdu&lowbar;5883&lowbar;The Best Path&lpar;欧拉路&rpar;

    题目链接:hdu_5883_The Best Path 题意: n 个点 m 条无向边的图,找一个欧拉通路/回路使得这个路径所有结点的异或值最大. 题解: 节点 i 的贡献为((du[i] +1/ 2 ...

  9. log4net引用了Mysql&period;Data&period;dll&comma;但是就是不能写到mysql数据库的解决办法

    这两天遇到log4net写日志到mysql数据库中,有时候在A项目中可以,有时候B项目就有问题,有时候测试环境没问题,到正式部署环境又出问题,经过两天的煎熬,终于理清楚了其中的头绪. 1.配置现状 c ...

  10. javaweb的web&period;xml配置说明,初始化过程

    [重点]初始化过程可知容器对于web.xml的加载过程是context-param >> listener  >> fileter  >> servlet 首先了解 ...