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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近，在码代码的时候，就是下面的这段代码，我犯了一个很不起眼，但犯了就致命的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

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
可以通过display:block来将它变成为块元素之后，就可以用css其他样式应用了。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。
元素展现inline元素的属性，但是可以设置自己的宽和高了。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

区别

块级元素一般用来搭建网站架构、布局、承载内容。
内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。
它们可以互相转换。display:inline|block

注意

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

各类具体包含明细

块元素(block element) HTML标签分类明细

address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单（只能用来容纳其它块元素）
h1-h6 - 标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联元素(inline element) HTML标签分类明细（黄色高光标明的是特殊的内联元素，可以设置高宽度，为可变元素）

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 - 定义变量

可变元素(inline-block element) HTML标签分类明细

applet - java applet
button - 按钮
del - 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
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标签？的更多相关文章

&lt&semi;p&gt&semi;&lt&semi;/p&gt&semi;标签为什么不能包含块级标签&quest;还有哪些特殊的HTML标签？
最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li& ...
a标签包含块级元素问题
a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...
html标签的显示模式（块级标签，行内标签，行内块标签）（转）
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...
p标签内不能嵌套块级标签
今天突然发现一个问题,那就是p标签内不能嵌套块级标签例如: <p><p></p></p> 会被浏览器解析成我又把 div 嵌套在里面,发现还是这样 ...
HTML中为何P标签内不可包含块元素？
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>&lt ...
HTML开发之（块级标签，行内标签，行内块标签）
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
HTML基础知识（块级标签，行内标签，行内块标签）
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

随机推荐

国庆第六日（2014年10月6日11&colon;51&colon;15），node-webkit，理财产品
(1)node-webkit:一篇很好的入门文章.入门.系列. 在window下的打包和运行.大漠的一篇讲解文章 . (2)lighttable: 官网. (3)现在的理财产品,雨后春笋般冒出:宝点网 ...
转：你真的懂得JS吗？
题目1 if (!("a" in window)) { var a = 1; } alert(a); // undefined, ~~~所有全局变量都是window的属性,声明语句 ...
Deflater与Inflater的压缩与解压缩
原文:Deflater与Inflater的压缩与解压缩 package util; import java.util.Arrays; import java.util.zip.Deflater; im ...
MySql创建一个存储过程
MySQL 存储过程是从 MySQL 5.0 新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装. 特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库时(比如 ...
Go语言for循环语句
for循环语句解释与使用首先我们定义sum:=0 格式:for i:=1;i<=100;i++{ sum+=i } for 循环100次,首先执行i=1,然后判断i<100,再执行sum ...
yii框架通过IP地址来使用gii
这里使用的YII框架的版本是2.0.13 详情请参考官方文档:用Gii生成代码使用gii的主要步骤 1.生成模型(Model Generator) 2.生成CRUD代码注意点 1.在生成CURD代 ...
matlab学习笔记函数bsxfun repmat
一.举例 a=rand(3,1);b=rand(1,3); c=bsxfun(@plus,a,b); d=a*b; c和d的运算类似,只不过c是外加,d是外乘. 作用:速度快>for循环> ...
Java 和 JSP 实现网站访问量统计 (刷新过滤)
java 和 JSP 实现的统计网站访问量,不需要数据库,将数据存储在指定位置的 txt 文件中,代码块分为两部分首先, java 部分: import java.io.File; import ...
Mybatis基础及入门案例
这几天正在对SSM框架的知识进行一个回顾加深,有很多东西学的囫囵吞枣,所以利用一些时间进一步的学习.首先大概了解一下mybatis的使用,再通过一个案例来学习它. 什么是MyBatis Mybatis ...
170420、maven内置常量
Maven工程插件配置中通常会用到一些Maven变量,因此需要找个地方对这些变量进行统一定义,下面介绍如何定义自定义变量. 在根节点project下增加properties节点,所有自定义变量均可以定 ...