p标签里面不能嵌套div
先申明本人代码水平为零起点,刚开始学习前端,所以就是小白。不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~
今天练习了段代码,发现效果和自己想象的不一样:
想了一下估计是<p>和<div>嵌套的问题,但是两个不都是块级元素,难道不能嵌套么,而且最后的结果居然是多出来一段<p>的效果,感觉HTML包容心好强,代码码错了也能显示出来。所以就在网上找了点资料,涉及到块级元素和内联元素的嵌套问题。
1.块级元素(block)与内联元素(inline)的区别:
简单地说,块级元素用来搭建网站架构、布局、承载内容,负责整体的大的方面。块级元素总是会另起一行开始,其高度、行高和边距都是可控的。内联元素负责局部和细节,在同一行显示,其高度、行高和边距不可控。
通过display:block;或者display:inline两者可以相互转化。
至于可变元素是可以根据上下文语境决定是块级元素还是内联元素,好吧,它最灵活了=。=
2.分类明细:(照搬来的)
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 (只能用来容纳其它块元素)
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
3.块级元素和内联元素的嵌套规则:
- 最基本:内联不能嵌套块级,块级可以嵌套内联元素
<div><h1></h1><p></p></div> 正确(块级并列)
<a href="#"><span></span></a> 正确(内联嵌套内联)
<span><div></div></span> 错误(内联嵌套块级)
有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
- 特殊的<li>里面可以嵌套div(<li>可以但<p>不行)
- 块级元素与块级元素并列、内联元素与内联元素并列
<div><h2></h2><p></p></div> 正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div> 错误(块级和内联并列了)
再跳出来看,p标签内嵌div的结果是p标签被div切成两个标签了~估计脑补的过程是这样的:
<p>sample</p><div>inline</div><p></P>
转载于:https://www.cnblogs.com/lovelvxia/p/5726316.html
p标签里面不能嵌套div相关推荐
- [html] html中p标签内为何不能嵌套div标签?
[html] html中p标签内为何不能嵌套div标签? p 是行内 div 是块级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一 ...
- [html] a标签可以再嵌套a标签吗?为什么?如果不行,那又想要嵌套效果怎么解决呢?
[html] a标签可以再嵌套a标签吗?为什么?如果不行,那又想要嵌套效果怎么解决呢? a标签不能嵌套a标签<a href="https://www.baidu.com/" ...
- js正则匹配闭合标签_正则匹配闭合HTML标签(支持嵌套)
OK,先确定我们要解决的问题--从一段Html文本中找出特定id的标签的innerHTML. 这里面最大的难点就是,Html标签是支持嵌套的,怎么能够找到指定标签相对应的闭合标签呢? 我们可以这样想, ...
- 正则匹配承兑的html,正则匹配闭合HTML标签(支持嵌套)
原标题:正则匹配闭合HTML标签(支持嵌套) 任何复杂的正则表达式都是由简单的子表达式组成的,要想写出复杂的正则来,一方面需要有化繁为简的功底,另外一方面,我们需要从正则引擎的角度去思考问题.关于正则 ...
- 为什么p元素内不能嵌套Div元素(随笔)
在说明这个问题之前,我们先来回顾一个块级元素与内联:我们知道 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为in ...
- html中div标签圈套,HTML中div标签和span标签的应用
HTML中div标签和span标签的应用 发布时间:2020-06-16 18:09:16 来源:亿速云 阅读:217 作者:元一 一.div标签 DIV标签,称为区隔标记.作用是设定字.画.表格等的 ...
- JS实现标签页效果(配合css)不同标签下对应不同div
显示页面tab.jsp <%@ page language = "java" import = "java.util.*" pageEnc ...
- div嵌套div的居中问题
2019独角兽企业重金招聘Python工程师标准>>> div嵌套div,我们经常都用.布局是基础,扎实的基础会让你在解决问题的时候更柔韵有余.这是我出来工作之后深深的领悟.下面是我 ...
- [html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div?
[html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div? 页面的的整体布局使用<header> <main> <aside> < ...
最新文章
- UESTC-1057 秋实大哥与花(线段树+成段加减+区间求和)
- 基于IPv6数据包分析
- android 获取和设置屏幕亮度
- tensorflow3 非线性回归、mnist、简单神经网络
- MTK 2G芯片使用联通卡在深圳无法拨打112原因
- SpringBoot2.0 最简单的 idea 快速创建项目
- 电脑管家pc版离线包_王国统治电脑版下载_王国统治游戏pc版下载[策略经营]
- 数据库设计是否应该允许空值的存在
- Caffe神经网络结构汇总
- led灯条串联图_10个LED灯并联再串联
- Blender学习笔记(3)建模|blender
- [摘]广义企业级PDM系统下的PPM(工艺规划管理)
- 论文分享 CFUN: Combining Faster R-CNN and U-net Network for Efficient Whole Heart Segmentation
- 易基因 | 精准医学:DNA甲基化图谱在发现和精确诊断神经肿瘤领域的应用
- 画板数据保存成文件的两种方法小结
- 树莓派4B(ubuntu)无线网络配置
- 直播软件app开发:如何开发一个可以免费打扑克的直播应用?
- 如何解决HTML网页中文显示乱码
- SEO并不难学,我是如何学习好SEO的
- 计算机等级考试四级网络工程师真题,全国计算机等级考试四级网络工程师笔试真题...
热门文章
- flume采集最简demo
- 服务器版的mysql怎么装_WIN7服务器配置之MySQL数据库安装图解(适用于5.1,5.5的版本)...
- 边缘检测robert原理_机器视觉边缘模式检测应用
- 如何将SmartDraw中的图形导出LATEX可用的EPS格式?
- 文本分类入门(九)文本分类问题的分类
- 个人常用word技巧----平时编辑word能快不少~
- Batch Normalization的作用及原理
- C语言——球体体积判断素数用递归计算Fibonacci数列
- 在C语言中是怎么存储的,在C语言中,串的存储方式是()。
- python watchdog 同时检测到多个事件_python中watchdog文件监控与检测上传功能