幼儿园前端 #03：标签像积木？手把手教你“嵌套”与“父子关系”

前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 3 集！ 上一集我们装好了 VS Code 和 Prettier / Chinese / Live Server / Material Icon Theme 插件，可是为什么代码需要“往右缩进”？为什么有的标签包着另一个标签？ 其实 HTML 写起来就像 “搭积木” 或者 “套娃” 。今天我们就来搞懂 HTML 最核心的逻辑——嵌套。

本期详细的视频教程bilibili：幼儿园前端 #03：标签像积木？手把手教你“嵌套”与“父子关系”

一、标签的“开关”逻辑

<button>点我</button>

<button>点我

绝大多数 HTML 标签都是成对出现的，就像一个盒子的盖子和底。

• 开始标签：<div> —— 告诉浏览器“这里开始了一个盒子”。

• 结束标签：</div> —— 告诉浏览器“盒子到这里结束了”。

  • 注意：结束标签多了一个斜杠 /，你可以把它想象成“切断/结束”的意思。

特例：有极少数标签是“独行侠”（自闭合标签），比如图片 <img> 或换行 <br>，它们不需要结束标签，因为它们肚子里不装东西。但初期你只要记住：大部分都要闭合！

二、 核心概念：嵌套（套娃）

1. 父子关系

<div class="father">
    <div class="son">
        我是儿子
    </div>
</div>

什么叫嵌套？简单说就是：标签里面，还可以放标签。 这就像俄罗斯套娃，或者大箱子装小箱子。

• 外面包着的标签，叫 父元素 (Parent) 。

• 被包在里面的，叫 子元素 (Child) 。

• 如果再往里包一层，那就是 孙子元素...

2. 为什么要有嵌套？

因为网页是复杂的。

• 想象一个“用户卡片”：

  • 整个卡片是一个大盒子（父）。
  • 里面的头像、昵称、简介，就是三个小盒子（子）。
  • 如果不能嵌套，网页上的元素就会散落一地，没法管理。

三、 视觉体现：缩进 (Indentation)

<!-- 没有缩紧的代码 -->
<div><div><span>我是内容</span></div></div>

<!-- 缩紧后的代码,可以一下看出谁是父标签谁是子标签 -->
<div> <!-- 父标签 --> 
    <div> <!-- 子标签 --> 
        <span>我是内容</span> <!-- 孙子标签 --> 
    </div>
</div>

四、 新手最容易犯的错：交叉嵌套

1. ❌ 错误写法（穿插了）： 你试图在“红盒子”没盖上盖子之前，把“蓝盒子”的盖子盖上。

<div>
    <span> 我是内容 </div>
</span>

2. ✅ 正确写法（包裹严实）：

<div>
    <span> 我是内容 </span>
</div>

五、 动手实战：搭一个 3 层积木

打开你的 VS Code，在 index.html 里试着敲出下面的结构（不要直接复制，手敲体验一下 Emmet 的补全）：

目标：做一个“文章模块”。

1. 最外层：用 <article> 标签（文章盒子）。
2. 第二层：里面放一个 <h1> （标题）和一个 <p> （段落）。
3. 第三层：在 <p> 里面，把几个文字用 <strong> （加粗）包起来。

<article>
    <h1>我的第一篇博客</h1>
    <p>
        这是正文内容，其中有两个字非常
        <strong>重要</strong>
        ，所以我要加粗它。
    </p>
</article>