最近，在码代码的时候，就是下面的这段代码，我犯了一个很不起眼，但犯了就致命的BUG。

<body>

    <p>

       <ol>

          <li>Hello</li>

       </ol>

    </p>

    <div>How are you?</div>

</body>

<script src="jquery-3.1.1.js"></script>

<script>

    var result= $("p").filter(function(index) {

        console.log($("ol", this).length== 0)

        return $("ol", this).length == 0;

    });

</script>

因为只要你犯了，估计检查半天都找不出。我可是费了老劲，才发现是<p>和<ol>嵌套的问题。但是两个不都是块级元素，难道不能嵌套么？而且最后的结果居然是自动补全了两个</p>标签。

它涉及到了块级元素和内联元素的嵌套问题。这是一个特别容易被我们遗忘的知识点！！！现在就来让我给你们补一下课也给我自己加深一下印象~

1、块级元素（block）、内联元素（inline）和可变元素（inline-block）的定义和区别

2、各类具体包含明细

3、嵌套规则和某些特殊标签 

定义和区别

  • display:block
  1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • display:inline
  1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  4. 可以通过display:block来将它变成为块元素之后，就可以用css其他样式应用了。
  • display:inline-block
  1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。
  2. 元素展现inline元素的属性，但是可以设置自己的宽和高了。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
  • 区别
  1. 块级元素一般用来搭建网站架构、布局、承载内容。

  2. 内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。

  3. 它们可以互相转换。display:inline|block

  • 注意
  1. 一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
  2. IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

各类具体包含明细

  • 块元素(block element) HTML标签分类明细
  1. address - 地址
  2. blockquote - 块引用
  3. center - 举中对齐块
  4. dir - 目录列表
  5. div - 常用块级容易，也是css layout的主要标签
  6. dl - 定义列表
  7. fieldset - form控制组
  8. form - 交互表单 （只能用来容纳其它块元素）
  9. h1-h6 - 标题
  10. hr - 水平分隔线
  11. isindex - input prompt
  12. menu - 菜单列表
  13. noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  14. noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
  15. ol - 排序表单
  16. p - 段落
  17. pre - 格式化文本
  18. table - 表格
  19. ul - 非排序列表
  • 内联元素(inline element) HTML标签分类明细（黄色高光标明的是特殊的内联元素，可以设置高宽度，为可变元素）
  1. a - 锚点
  2. abbr - 缩写
  3. acronym - 首字
  4. b - 粗体(不推荐)
  5. bdo - bidi override
  6. big - 大字体
  7. br - 换行
  8. cite - 引用
  9. code - 计算机代码(在引用源码的时候需要)
  10. dfn - 定义字段
  11. em - 强调
  12. font - 字体设定(不推荐)
  13. i - 斜体
  14. img - 图片
  15. input - 输入框
  16. kbd - 定义键盘文本
  17. label - 表格标签
  18. q - 短引用
  19. s - 中划线(不推荐)
  20. samp - 定义范例计算机代码
  21. select - 项目选择
  22. small - 小字体文本
  23. span - 常用内联容器，定义文本内区块
  24. strike - 中划线
  25. strong - 粗体强调
  26. sub - 下标
  27. sup - 上标
  28. textarea - 多行文本输入框
  29. tt - 电传文本
  30. u - 下划线
  31. var - 定义变量
  • 可变元素(inline-block element) HTML标签分类明细
  1. applet - java applet　　
  2. button - 按钮　　
  3. del - 删除文本　　
  4. iframe - inline frame　　
  5. ins - 插入的文本　　
  6. map - 图片区块(map)　　
  7. object - object对象　　
  8. script - 客户端脚本

嵌套规则和某些特殊标签 

1、块状元素可包含内联元素或某些块元素，但内联元素不可包含块元素，只能包含内联元素。

  • 　　　　<div><h1></h1><p></p></div>     正确
  • 　　　　<a href="#"><span></span></a>    正确
  • 　　　　<span><div></div></span>     错误

　

2、块级元素不能放在<p>里面

  • 　　　　<p><ol><li></li></ol></p>    错误
  • 　　　　<p><div></div></p>　　错误

　

3、有几个特殊块级元素只能包含内联元素或者可变元素，不能包含块级元素。这几个特殊标签是 h1~h6、p、dt

　

4、特殊的 li 内可包含 div 标签

  • 　　　　<li><div></div></li>

　

5、块级元素与块级元素并列、内联元素与内联元素并列

  • 　　　　<div><h2></h2><p></p></div>　　正确
  • 　　　　<div><a href="#"></a><span></span></div>　　正确
  • 　　　　<div><h2></h2><span></span></div>　　错误

<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？的更多相关文章

  1. 【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

    最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...

  2. a标签包含块级元素问题

    a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...

  3. html标签的显示模式（块级标签，行内标签，行内块标签）（转）

    html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

  4. p标签内不能嵌套块级标签

    今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...

  5. HTML中为何P标签内不可包含块元素？

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  6. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  8. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  9. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

随机推荐

  1. 【Windows 10 应用开发】细说文本资源文件（resw）

    最近,小戏骨版<红楼梦>很是火热,老周一口气看完了9集,一直看到 Surface 的风扇呼呼响.林黛玉和薛宝钗这两个角色都演得不怎么样,倒是演史湘云的娃娃演得不错,老周甚是喜欢. 于是,昨 ...

  2. ASP.NET没有魔法——ASP.NET MVC 与数据库之EF实体类与数据库结构

    大家都知道在关系型数据库中每张表的每个字段都会有自己的属性,如:数据类型.长度.是否为空.主外键.索引以及表与表之间的关系.但对于C#编写的类来说,它的属性只有一个数据类型和类与类之间的关系,但是在M ...

  3. Java集合源码分析（二）Linkedlist

    前言 前面一篇我们分析了ArrayList的源码,这一篇分享的是LinkedList.我们都知道它的底层是由链表实现的,所以我们要明白什么是链表? 一.LinkedList简介 1.1.LinkedL ...

  4. Windows 10 快捷键汇总表格

    Windows 10 快捷键汇总表格 Windows 10 快捷键汇总 Win键 + Tab 激活任务视图 Win键 + A 激活操作中心 Win键 + C 通过语音激活Cortana Win键 + ...

  5. （10.20）Java小作业！

    今天想要和大家分享一道我最近遇到的题,里面既包括了嵌套循环的运用,还有函数的定义与调用,我个人觉得挺有价值的. 打印一个由*号构成的等腰三角形: 具体的解题方法如下: public class get ...

  6. IDEA启动后页面没有tomcat server选项，显示灰色问号和红叉不能使用

    说明:自己好几次硬盘莫名其妙读不出来导致电脑重启后idea没有了tomcat选项,原来的tomcat上显示灰色的问号和红色小叉子,网上搜了好久加上自己摸索,终于解决了.现在记一下也分享一下,省的下回又 ...

  7. Python列表的增删改查排嵌套特殊输出格式

    Python列表的增删改查排嵌套特殊输出格式 一.列表的样子: a = ['q' , 'w' , 'e ', 'r','t'] a为列表名,[ ]为列表内容,' '为列表内的元素,'q'为a[0] 二 ...

  8. (原创)（三）机器学习笔记之Scikit Learn的线性回归模型初探

    一.Scikit Learn中使用estimator三部曲 1. 构造estimator 2. 训练模型:fit 3. 利用模型进行预测:predict 二.模型评价 模型训练好后,度量模型拟合效果的 ...

  9. Java随机数和UUID

    Java随机数和UUID Java随机数 在Java项目中通常是通过Math.random方法和Random类来获得随机数,前者通过生成一个Random类的实例来实现. 此类产生的是一组伪随机数流,通 ...

  10. Nodejs.热部署方法

    在开发中我们修改了一点代码后要去重启服务器才能看到结果,为了省去这个过程我们以往经常使用热部署代码的方法 下面是使用"supervisor"来达到热部署能力的方法: sudo np ...