简单介绍一下,在 HTML 和 CSS 中,元素大体分为 块级元素、内联元素(行内元素)、块级内联元素(行内块元素)。它们有着不同的嵌套规则和特殊之处。
1. 行内元素
行内元素特点:不独占一行、不可设置宽高、内容决定元素所占位置、不会打断上下文流畅。
包括<span>、<a>、<img>、<strong>、<em>等。
嵌套规则:只能嵌套行级元素,即行级元素内部只能包含其他行级元素,不能包含块级元素。
举个 🌰
正常的渲染:
非正常的渲染:
按道理来说,浏览器应该将 div 元素从 span 元素中移除,但实际没有。
虽然将 div 放在 span 中违反了 HTML 的规范,,但现代浏览器的错误处理机制,不会强制移除或改变这种结构,而是尽力按照嵌套结构正常渲染页面。这是因为:
1、浏览器宽容度高:为了尽可能显示开发者意图,浏览器会尽量渲染不符合标准的 HTML。
2、没有特定语义冲突,只是嵌套不符合规范。
2. 块级元素
块级元素特点:独占一行、可以设置宽高。
包括:<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li>等。
嵌套规则:可以嵌套任何元素。块级元素内部既可以包含其他块级元素,也可以包含行级元素。
举个 🌰
3. 特殊规则
3.1 p 标签内不能嵌套 div 元素
当我们在 p 标签内嵌套一个 div 元素时,浏览器会自动将 div 元素移出 p 标签,并将 p 元素拆分为两个独立的段落。
举个 🌰
<p>这是段落的开始部分。<div>这是一个块级元素。</div>这是段落的剩余部分。
</p>
渲染结果:
3.2 a 标签不能嵌套 a 标签
在 HTML5 规范中,<a> 标签不允许嵌套另一个 <a> 标签。
举个 🌰
<body><a href="#">外层 a 标签的内容<a href="#"> 内层 a 标签的内容</a></a>
</body>
浏览器解析:a 标签内部不允许嵌套另一个 a 标签。这是因为 a 标签定义的是一个超链接区域,嵌套的 a 标签会导致 HTML 语法和功能上的混乱。浏览器遇到这种情况,会将内部的 a 标签自动移到外部。
3.3 table 标签内的结构
table 标签只能包含特定的子元素,如 thead、tbody、tr、td 等。如果不合法的元素直接在 table 中,浏览器会自动将其移出 table,指定元素保留。
举个 🌰
<table><tr>第一行</tr><div>不合法的元素</div><tr>第二行</tr>
</table>
渲染如下:
3.4 head 标签内的非元数据元素
head 标签通过包含页面的元数据(如 meta、title 等)。如果在 head 内插入非元数据元素(如 div、p 等),浏览器会将其移动 body 中,保证文档结构的正确性。
举个 🌰
<head><title>页面标题</title><div>不合法的内容</div>
</head>
渲染如下: