【疑点】标签为何不能包含块级标签?还有哪些特殊的HTML标签？

时间 2019-12-11

标签疑点标签为何不能包含还有哪些特殊 html 栏目 HTML 繁體版

原文原文链接

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

<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>标签。java

它涉及到了块级元素和内联元素的嵌套问题。这是一个特别容易被咱们遗忘的知识点！！！如今就来让我给大家补一下课也给我本身加深一下印象~jquery

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

二、各种具体包含明细架构

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

定义和区别ide

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 - 客户端脚本

嵌套规则和某些特殊标签

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

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

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

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

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

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

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

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

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

【疑点】 标签为何不能包含块级标签?还有哪些特殊的HTML标签？

【疑点】标签为何不能包含块级标签?还有哪些特殊的HTML标签？