问题由来:<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标签引发的标签嵌套问题总结的更多相关文章

  1. p标签里面不能嵌套div

    先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...

  2. 为什么p标签不能嵌套div??

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

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

    学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...

  4. p标签内不能嵌套div(注解)

    相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“b ...

  5. img标签src=""和background-image:url();引发两次请求页面bug

      img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时 ...

  6. 告别div,可以代替div的几个标签

    几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...

  7. Html - a标签如何包裹Div

    a标签如何包裹Div? 其实应该将思路转变为将a标签作为一个遮罩来覆盖div. 做法是将a标签放置在该div下,通过将div进行相对定位[position:relative] 将a标签进行绝对定位[p ...

  8. html之块级标签h系列,div

    两个名词含义: 块级标签:内容再少也会占满整行 内联标签:有多少内容点多少地方 注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签 请仅仅把标题标签用作标题文本,如 ...

  9. 解决embed标签显示在div上层【转藏】

    解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...

随机推荐

  1. C语言学习书籍推荐《学通C语言的24堂课》下载

    下载地址:点我 编辑推荐 <学通C语言的24堂课>:用持续激励培养良好习惯以良好习惯铸就伟大梦想——致亲爱的读者朋友在开始学习<学通C语言的24堂课>的同时,强烈建议读者朋友同 ...

  2. (ps2019)Photoshop 2019 最新破解版下载

    Photoshop CC 2019新增功能: 下载地址 点我 新功能介绍:https://helpx.adobe.com/cn/photoshop/using/whats-new.html 经过改良设 ...

  3. 关系型数据库MySql 数据类型与约束

    MySql数据库 :数据类型与约束 注意 :  在创建数据表的时候,需要对数据表中的字段设置 数据类型和约束, 便于检测用户输入的数据是否正确有效. 1 数据类型 数据类型的选用原则 : 够用就行,尽 ...

  4. mybatis的example类

    1. 场景描述 idea下使用mybatis_generator自动生成mapper文件,默认生成了一大堆的example文件及方法,使用规则类似于Hibernate,给了一大堆参数,感觉没必要,只所 ...

  5. json字符串转换成java对象

  6. 远程调试出现DEP0600: 部署失败。无法通过新部署管道进行部署错误解决

    昨天我连接树莓派调试没问题,今天来的时候却总是出现DEP0600: 部署失败.无法通过新部署管道进行部署.错误 我怀疑是环境问题,然后发现蓝莓派上面没有远程调试监视器(MSVSMON.EXE)进程,怀 ...

  7. xx.exe 中的 0x014180bd 处有未经处理的异常: 0xC0000005: 读取位置 0xfeeefeee 时发生访问冲突(当指针访问异常时,应考虑是不是对象未创建)。

    xx.exe 中的 0x014180bd 处有未经处理的异常: 0xC0000005: 读取位置 0xfeeefeee 时发生访问冲突

  8. vue使用问题总结(长期更新)

    循环中绑定标签的属性 <div class="imgdiv" v-for="template of templateArr"> <img :s ...

  9. Sting和Long类型转换

    java String 转 Long 两种方法区别Long.ValueOf("String")返回Long包装类型包装类型: Byte,Integer,Short,Long,Boo ...

  10. 爬虫之解析库pyquery

    初始化 安装: pip install pyquery 字符串的形式初始化 html = """ <html lang="en"> < ...