掌握HTML中元素的嵌套

HTML 元素的嵌套是指将一个 HTML 元素放在另一个元素的内部，形成父子或层级关系。正确的嵌套规则是：后开启的标签必须先关闭，且必须严格遵守标签的层次结构。

---

嵌套的核心规则

1. 子元素必须完整包含在父元素内，不能交叉嵌套。
2. 块级元素（如 <div>、<p>）可以包含其他块级或内联元素，但内联元素（如 <span>、<a>）通常不能直接包含块级元素。
3. 某些标签有明确的嵌套限制（例如 <p> 标签不能包含块级元素）。

---

示例代码

示例 1：正确嵌套

<div>
  <h1>标题</h1>
  <p>这是一个段落，内部包含一个 <span style="color: red;">红色文字</span>。</p>
</div>

• <div> 是父元素，内部嵌套了 <h1> 和 <p>。
• <p> 内部又嵌套了 <span>，形成层级结构。

---

示例 2：错误嵌套（交叉嵌套）

<!-- 错误示例！ -->
<p>这是一个 <strong>错误</p> 的嵌套</strong>

• 错误原因：<strong> 标签未正确闭合，导致 <p> 和 <strong> 交叉嵌套。
• 浏览器会尝试自动纠错，但结果可能不符合预期。

---

示例 3：列表的嵌套

<ul>
  <li>苹果
    <ul>
      <li>红富士</li>
      <li>青苹果</li>
    </ul>
  </li>
  <li>香蕉</li>
</ul>

• 外层 <ul> 包含多个 <li>。
• 第一个 <li> 内部又嵌套了一个新的 <ul>，形成多级列表。

---

示例 4：语义化标签嵌套（HTML5）

<article>
  <header>
    <h2>文章标题</h2>
    <p>作者：张三</p>
  </header>
  <section>
    <p>正文内容...</p>
    <figure>
      <img src="image.jpg" alt="示例图片">
      <figcaption>图片说明</figcaption>
    </figure>
  </section>
</article>

• <article> 包含 <header> 和 <section>。
• <figure> 嵌套了 <img> 和 <figcaption>，表示图文关联。

---

示例 5：表单元素的嵌套

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <fieldset>
    <legend>选择性别</legend>
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>
  </fieldset>
</form>

• <form> 包含 <label>、<input> 和 <fieldset>。
• <fieldset> 内嵌套了 <legend> 和多个 <label>+<input>。

---

常见错误与注意事项

1. 交叉嵌套

   <!-- 错误！ -->
   <div><p>这是<div>错误</p></div>

• 正确写法：<div><p>这是<span>正确</span></p></div>

1. 块级元素在内联元素内

   <!-- 错误！ -->
   <a href="#"><div>点击区域</div></a>

• 正确写法：用 CSS 将 <a> 设置为块级元素。

1. 自闭合标签的误用

   <!-- 错误！ -->
   <input type="text"></input>

• 正确写法：<input type="text">（自闭合标签无需 </input>）。