关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料,下面做一个个人总结。
1.块级元素(block)与内联元素(inline)的区别:
1.1块元素,独占一行,宽高起作用:如:div , p , ul , ol ,table , menu ,h1~h6,li等
1.2内联元素,可与其他内联元素同一行,宽高不起作用:如:span , q , input , img ,i等
通过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.块级元素和内联元素的嵌套规则:
1,内联元素,可以嵌套内联元素,不可以嵌套块状元素
2,块元素,可以嵌套块元素,或者是内联元素
3,部分块元素,不能嵌套块元素,只能嵌套内联元素,如:p、h1-h6
4, 块元素中嵌套的元素,块元素和块元素一级,内联元素和内联元素一级
- 内联标签可以嵌套内联元素,不可以嵌套块状元素
<a><a></a></a> 正确 (内联嵌套内联)
<a><span></span></a> 正确 (内联嵌套内联)
<span><div></div></span> 错误 (内联嵌套块级)
- 块元素可以嵌套块元素(不是所有块级都可以嵌套块级),或者是内联元素
<div><div></div></div> 正确 (块级嵌套块级)
<div><span></span></div> 正确 (块级嵌套内联)
- 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1~h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。
<p><ol><li></li></ol></p> 错误 (特殊块级标签只能嵌套内联标签)
<p><div></div></p> 错误 (特殊块级标签只能嵌套内联标签)
- 块元素中嵌套的元素,块元素和块元素并列一级,内联元素和内联元素并列一级
<div><h2></h2><p></p></div> 正确(块级和块级并列一级)
<div><a href="#"></a><span></span></div> 正确(内联与内联并列一级)
<div><h2></h2><span></span></div> 错误(块级和内联并列一级了)
关于p标签不能嵌套div标签引发的标签嵌套问题总结的更多相关文章
- p标签里面不能嵌套div
先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- HTML里为什么不能在<p>标签中嵌套<div>标签
学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...
- p标签内不能嵌套div(注解)
相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“b ...
- img标签src=""和background-image:url();引发两次请求页面bug
img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时 ...
- 告别div,可以代替div的几个标签
几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...
- Html - a标签如何包裹Div
a标签如何包裹Div? 其实应该将思路转变为将a标签作为一个遮罩来覆盖div. 做法是将a标签放置在该div下,通过将div进行相对定位[position:relative] 将a标签进行绝对定位[p ...
- html之块级标签h系列,div
两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...
- 解决embed标签显示在div上层【转藏】
解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...
随机推荐
- Python入门基础(2)
如果你是博客园团队,,看到不符合您们要求的地方可否指出来?不要你不符合要求,然后我不符合哪项要求?是要我自己去找么? python条件语句 首先介绍的是if语句,python中的if语句格式如下: i ...
- 实现socket的服务和客户端通信
对学习过程中自己敲的一些关于socket有关的代码做了个简单总结,在这分享一下,给有需要的同学借鉴一下. 什么是socket? 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为 ...
- getpass.getpass 无法在pycharm上run显示的 workaround
getpass.getpass 只能通过交互式终端运行.py文件来密文输入密码,想在pycharm里运行,好不容易找到一个小窍门,记录如下 from easygui import passwordbo ...
- Dom4J的基本使用
初始化数据 <?xml version="1.0" encoding="UTF-8"?> <RESULT> <VALUE> ...
- 【带着canvas去流浪(12)】用Three.js制作简易的MARVEL片头动画(上)
目录 一. 大作业说明 二.基本思路 三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码 四.小结 示例代码托管在:http://www.g ...
- RabbitMQ(一):RabbitMQ快速入门
RabbitMQ是目前非常热门的一款消息中间件,不管是互联网大厂还是中小企业都在大量使用.作为一名合格的开发者,有必要对RabbitMQ有所了解,本文是RabbitMQ快速入门文章. RabbitMQ ...
- docker学习笔记-简介
零.什么是Docker 是一个基于GO语言开发的开源 应用容器: 开发者可以打包应用和相关包,到一个 轻量级 . 可移植 的 容器 中,并且可以发布到 任何机器 ,实现 虚拟化: 完全使用 沙箱机制, ...
- Git介绍以及安装
Git的作者是大名鼎鼎的Linux之父Linus Torvalds. Git是一个分布式的版本控制系统,Git三个字母的含义可以理解为"Global Information Tracker& ...
- 使用Kubeadm创建k8s集群之部署规划(三十)
前言 上一篇我们讲述了使用Kubectl管理k8s集群,那么接下来,我们将使用kubeadm来启动k8s集群. 部署k8s集群存在一定的挑战,尤其是部署高可用的k8s集群更是颇为复杂(后续会讲).因此 ...
- sql format 格式化数字(前面补0)
将一个数字例如33,或1使用t-sql语句转换成033或001 以下是详细分析: 1.select power(10,3)得到1000 2.select cast(1000+33 as varchar ...