手写笔记

---

一、元素包含关系的演变

1.1 旧版规则（基于块级/行级划分）

• 块级元素可以包含行级元素
• 行级元素不可以包含块级元素（<a> 元素是特殊例外）

1.2 新版规则（基于内容类别划分）

元素的包含关系不再由块级/行级区分，而是由元素的内容类别决定。

---

二、新版核心包含规则（重点）

2.1 容器元素

• 容器元素（如 <div>、<header>、<footer>、<section>、<article>、<nav> 等）可以包含任何元素，是布局的通用容器。

2.2 <a> 元素

• <a> 元素几乎可以包含任何元素（除了自身、表单相关元素等少数例外），可包裹图片、段落、列表等实现复杂跳转区域。

2.3 有固定子元素的标签

• 部分元素有严格的子元素约束，必须嵌套指定的子元素：
  • <ul>：只能包含 <li> 作为直接子元素
  • <ol>：只能包含 <li> 作为直接子元素
  • <dl>：只能包含 <dt>（术语标题）和 <dd>（术语描述）作为直接子元素

2.4 标题元素与段落元素

• 标题元素（<h1>~<h6>）和段落元素（<p>）：
  1. 不能相互嵌套（如 <h1> 里不能放 <p>，<p> 里不能放 <h2>）
  2. 不能包含容器元素（如 <div>、<section> 等）
  3. 通常只能包含行内文本、行内元素（如 <span>、<strong>、<em> 等）

---

三、核心总结

1. 容器元素：布局万能容器，可嵌套任意元素。
2. <a> 元素：特殊可嵌套元素，几乎可包裹任何内容。
3. 列表/定义列表：有严格子元素约束，必须嵌套指定 <li>/<dt>/<dd>。
4. 标题/段落：语义独立，不能互相嵌套，也不能包含容器元素。