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> 在运行之前,大家可以想象得出这两段代码在浏览器上显示的结果吗?咱们来看一下这两段代码在浏览器上显示的结果吧: 没错,其实这两段代码在浏览器上显示的效果是一样的,就是因为这样的结果,所以咱们在做开发的时候就很容易不知不觉就出现bug。让我们用浏览器的开发者工具查看一下代码吧: 看,事实上第一段代码放在浏览器上时就会变成了这个样子,world 被挤了出来,不在p标签里面了,这样子在开发中我们对网站元素的控制就达不到我们想要的效果了。事实上第二段代码才是我们想要的: 《转载需标明出处》 HTML里为什么不能在<p>标签中嵌套<div>标签的更多相关文章 关于p标签不能嵌套div标签引发的标签嵌套问题总结 问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ... Three.js中的div标签跟随(模型弹框) 目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ... 为什么p标签不能嵌套div?? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ... div中嵌套div中使用margin-top失效问题 div中嵌套div中使用margin-top失效问题 HTML之body标签中的相关标签补充 一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ... HTML之body标签中的相关标签 一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ... 前端 ------ 03 body标签中的相关标签 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ... rails中如何在a标签中添加其他标签 最近在用rails写一个项目练练手,然后遇到了一个问题,就是用 <% link_to("首页", root_path) %> 生成一个a标签,之后就在想我怎么在这个a标 ... 03-----body标签中的相关标签 今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ... 随机推荐 JQuery 常用 1.同一name分组的多个radio,获取选中radio的value值: var check_val=$("input[name='属性名']:checked").val(); 2 ... 将spring管理的bean使用注解的方式注入到servlet中 Filter和Servlet中不能直接注解使用spring的bean,因为这两个都是servlet容器维护管理的,当然也有实现方法,如下: 1.创建一个AbstractServlet 抽象类,让你的所 ... STM32 使用 printf 发送数据配置方法 -- 串口 UART, JTAG SWO, JLINK RTT STM32串口通信中使用printf发送数据配置方法(开发环境 Keil RVMDK) http://home.eeworld.com.cn/my/space-uid-338727-blogid-47 ... [LeetCode] Maximum Gap 解题思路 Given an unsorted array, find the maximum difference between the successive elements in its sorted f ... Oracle EBS-SQL (OM-6):打开订单.sql /*打开头*/ update oe_order_headers_all t set t.flow_status_code = 'BOOKED', t.open_flag = 'Y' where t.o ... Codeforces Round#344 A题意思是,给出两个数列,求一个区间,使第一个数列的区间或和第二个数列的区间或的和最大,输出最大和 很显然,或运算会使得答案越运算越大.所以,直接全部或起来,相加就是答案. = =打cf的时候自动脑补 ... 配置Sublime Text 2 的Python运行环境 Sublime Text 2作为一款轻量级的编辑器,特点鲜明,方便使用,愈发受到普罗大众的喜爱,我个人最近也开始用了起来.同时,我近段时间还在学习Python的相关东西,所以开始用ST2来写Pytho ... hdu_5883_The Best Path(欧拉路) 题目链接:hdu_5883_The Best Path 题意: n 个点 m 条无向边的图,找一个欧拉通路/回路使得这个路径所有结点的异或值最大. 题解: 节点 i 的贡献为((du[i] +1/ 2 ... log4net引用了Mysql.Data.dll,但是就是不能写到mysql数据库的解决办法 这两天遇到log4net写日志到mysql数据库中,有时候在A项目中可以,有时候B项目就有问题,有时候测试环境没问题,到正式部署环境又出问题,经过两天的煎熬,终于理清楚了其中的头绪. 1.配置现状 c ... javaweb的web.xml配置说明,初始化过程 [重点]初始化过程可知容器对于web.xml的加载过程是context-param >> listener >> fileter >> servlet 首先了解 ... 相关文章HTML里为什么不能在标签中嵌套标签Jquery html()方法如果我们在p标签中放置一个div,它将不起作用?HTML里为什么不能在标签中嵌套标签 本文转载自 afeihome 查看原文 2017-03-17 344 div/ 嵌套/ 上一篇:C/C++ 程序中调用命令行命令并获取命令行输出结果下一篇:JavaScript——以简单的方式理解闭包