一、学习前言
本篇为黑马Pink老师2025新版AI+前端零基础教程的个人学习复盘笔记，配套B站视频：黑马Pink老师2025版AI+前端零基础教程https://b23.tv/GC7VweJ。
文中HTML相关知识点均来源于课程内容，我结合自身实操踩坑经历重新梳理改写，补充了代码排版、标签使用等实操问题解决方案，仅作个人学习记录、免费分享交流，课程版权归原讲师与黑马程序员所有，无任何商用用途。
二、博客正文框架
第一章：开发准备工作
1.1 编辑器选择
plain
【传统编辑器】 - VS Code、WebStorm、Sublime、HBuilder 【AI编辑器（推荐新手）】 - Trae AI编辑器（字节跳动出品） - 国内版 vs 国际版区别 - 核心功能：智能问答、代码自动补全、Agent自动编程 - 下载地址：https://www.trae.cn/ - 现阶段主要是AI辅助开发：根据提示自动生成代码、根据错误检查修复代码、代码解读和分析、生成注释和代码优化、AI技术测评 【编辑器配置】 - 字体大小：Ctrl++放大 / Ctrl+-缩小 - 代码字体：文件→首选项→设置→Editor设置→Font Size - Tab缩进：设置为2个字符（与Vue衔接） - 保存自动格式化：文本格式化→格式化→Format on Save1.2 浏览器选择
plain
- 推荐Chrome（截止2025年3月，市场份额66.16%，稳居第一） - 下载地址：https://www.google.cn/chrome/ - 开发者工具打开方式：右键→检查 或 快捷键F121.3 必备插件与技巧
plain
【Live Server插件】 - 作用：代码保存后浏览器自动刷新 - 使用：右键HTML文件→"Open with Live Server" 【分屏技巧】 - Windows：Win键 + 左右箭头 - 效果：左边写代码，右边看效果第二章：HTML初体验
2.1 创建第一个网页
plain
【三步走】 1. 创建项目文件夹（根目录） 2. 快速编写代码（使用Emmet语法） 3. 浏览器预览（通过Live Server） 【什么是HTML？】 - 全称：HyperText Markup Language（超文本标记语言） - 本质：告知浏览器如何组织页面的标记语言 - 核心：学习HTML = 学习标签 【标签语法】 - 双标签：<h1>内容</h1> - 单标签：<br>、<img>、<hr> - 标签也称为"元素" - 大小写都可以，建议小写第三章：HTML文档结构
3.1 标准文档模板
HTML
<!DOCTYPE html> <!-- 文档类型声明：HTML5 --> <html lang="zh-CN"> <!-- 根元素，lang声明语言 --> <head> <meta charset="UTF-8"> <!-- 字符编码 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 --> <title>页面标题</title> <!-- 浏览器标签页显示 --> </head> <body> <!-- 页面可见内容都写在这里 --> </body> </html>3.2 文档结构解析
plain
【文档类型】<!DOCTYPE html>：HTML5文档类型声明 【html元素】 - 包裹页面中所有内容，有时被称为根元素 - lang属性：en代表英语，zh-CN代表中文 - 帮助浏览器、搜索引擎正确处理页面内容 【head元素】 - 头部元素，包含文档的元（meta）数据 - 主要保存供机器处理的信息，而非人类可读信息 【字符集】<meta charset="UTF-8"> - UTF-8包括绝大多数人类书面语言的大多数字符 - 不加这句话可能会引起乱码 【移动端适配】<meta name="viewport" ...> - 确保网页在移动设备上以最佳状态呈现 【title元素】 - 设置页面标题，出现在浏览器标签中 【body元素】 - 包含页面所有显示在页面上的内容 - 包含文本、图片、视频、游戏、可播放音频轨道等 【记忆技巧：小猪佩奇结构图】 - html = 整个佩奇 - head = 佩奇的头部（title是眼睛） - body = 佩奇的身体第四章：标签关系与AI工具排错
4.1 标签关系
plain
【嵌套关系（父子关系）】 - 一个标签包含另一个标签 - 示例：<head>包含<title> 【并列关系（兄弟关系）】 - 两个标签同级别并排 - 示例：<head>和<body>并列4.2 AI工具辅助
plain
【实际开发中的问题】 - 多层嵌套最容易出问题 【解决方案】 - 利用小技巧或AI工具帮助我们理清标签关系第五章：HTML的标题和段落
5.1 标题标签 h1-h6
plain
【语法】 <h1>一级标题</h1> <h2>二级标题</h2> ... <h6>六级标题</h6> 【显示特点】 - 标题文字会加粗显示 - 每行只显示一个（独占一行） 【使用规范】 - h1唯一性：最好只对每个页面使用一次，一般用于文章标题或logo - 层次性：在现有六个标题层次中，除非觉得有必要否则应该争取每页使用不超过三个5.2 段落标签
plain
【语法】<p>里面是段落文本</p> 【特点】 - 每行只显示一个 - 文字显示不开会自动换行 - 段落的相关样式请用CSS设置5.3 语义化
plain
【定义】指根据内容的结构和含义选择恰当的HTML元素 【为什么需要结构化？】 - 没有元素给内容结构，浏览器不知道什么是标题，什么是段落 - 用户在阅读网页时，往往会快速浏览以查找相关内容 - 如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开 【为什么需要语义？】 - 需要确保使用了正确的元素来给予内容正确的含义、作用以及外形 - h1元素也是一个语义元素，它所包裹的文本具有"页面上的顶级标题"的作用 【语义化的好处】 1. 更清晰的代码结构 2. 对搜索引擎更友好 3. 更好的可访问性5.4 更多场景
plain
- 标题h2：板块标题 - 标题h3：商品名称 - 段落p：商品描述、价格等第六章：强调与重要性标签及注释标签
6.1 强调标签
plain
【推荐使用的语义化标签】 <strong></strong> → 加粗（强调重要性） <em></em> → 倾斜（强调语气） <ins></ins> → 下划线（表示插入） <del></del> → 删除线（表示删除） 【不推荐使用的无语义标签】 <b></b> → 加粗（纯样式） <i></i> → 倾斜（纯样式） <u></u> → 下划线（纯样式） <s></s> → 删除线（纯样式） 【原则】 - 优先使用带有语义的标签 - 除非特殊情况，否则不用纯样式标签6.2 注释标签
plain
【语法】<!-- 注释内容 --> 【快捷键】Ctrl + / 【特点】 - 不会在网页上显示 - 可以跨越多行 - 常用于：代码说明、临时禁用代码、给其他开发者留言第七章：元素分类及歌曲彩蛋
7.1 块级元素和内联元素
plain
【块级元素（Block）】 - 独占一行 - 可以嵌套其他元素 - 常见：p、h、div等 【内联元素（Inline）】 - 可以一行放多个，通常与文本一起使用 - 不能嵌套块级元素，可以嵌套其他内联元素 - 常见：strong、em、a等 【注意事项】 - 段落p标签里面不要放其他块级元素 - 段落里面主要放文字相关，比如内联元素 - 元素分类不是一直不可更改的，后面的CSS可以通过display改变显示模式第八章：图像标签以及常见格式
8.1 图像标签 img
plain
【语法】<img src="图片路径" alt="替代文本"> 【核心属性】 ┌─────────┬─────────────────────────────────┐ │ 属性 │ 作用 │ ├─────────┼─────────────────────────────────┤ │ src │ 指向要插入到页面的图像地址 │ │ alt │ 备选文本，图片无法显示时提示 │ │ width │ 设置图片宽度（建议CSS修改） │ │ height │ 设置图片高度（建议CSS修改） │ │ title │ 图像标题，鼠标悬停显示的文本 │ └─────────┴─────────────────────────────────┘ 【属性写法】 - 属性采取键值对形式：属性="值" - 属性之间没有必要的先后顺序 - 但是属性之间必须有空格分隔8.2 常见图片格式
plain
┌──────────┬────────────────────────────────────────┐ │ 格式 │ 特点与适用场景 │ ├──────────┼────────────────────────────────────────┤ │ JPEG/JPG │ 有损压缩，放大缩小会变模糊。适用场景： │ │ │ 摄影照片、网页图片（非透明背景） │ │ PNG │ 无损压缩，支持透明度。适用场景：Logo、 │ │ │ 网页图形、需要透明度的图像 │ │ GIF │ 支持动画，最多256色。适用场景：简单动画、│ │ │ 表情包、低色彩图形 │ │ WebP │ Google开发的现代格式。支持有损/无损压缩、│ │ │ 透明度和动画。适用场景：网页优化（替代 │ │ │ JPEG/PNG/GIF），代表：淘宝等 │ │ AVIF │ 基于AV1视频编码，支持高压缩率和HDR。 │ │ │ 压缩效率优于WebP。适用场景：未来网页优化，│ │ │ 需高性能压缩的场景（B站、京东等） │ └──────────┴────────────────────────────────────────┘ 【选择建议】 - 网页优化：优先WebP/AVIF（兼容时），备选JPEG/PNG - 透明图像：PNG（静态）或WebP（动态） - 动画：WebP/GIF（简单动画） - 其他格式：SVG、HEIC等 - 开发中设计师提供图片，我们直接使用即可第九章：路径分类
9.1 路径概念
plain
【定义】路径用于指定文件（如图像、样式表或其他网页）的位置 【白话】图片相对于html文件的位置，html怎么找到图片 【分类】 1. 相对路径：相对于当前文件位置的路径 2. 绝对路径：从根目录开始的完整路径9.2 相对路径详解
plain
【同一目录】 - 直接使用文件名即可 - ./表示当前文件夹 - 示例：<img src="pig.jpg"> 或 <img src="./pig.jpg"> 【下级子目录（重点）】 - 使用目录名/文件名 - 示例：<img src="img/pig.jpg"> 【上级目录】 - 使用../返回上一级 - 示例：<img src="../pig.jpg">第十章：音视频标签以及下载方式
10.1语法与属性
框架内容：
plain
【音频标签】<audio> 【视频标签】<video> 【常用属性】 - controls：显示播放控件 - autoplay：自动播放 - loop： 循环播放 - muted： 静音 - poster: 预览图像10.2视频标签兼容性写法：
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <p>您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p> </video>- 将 src 属性放在几个单独的
<source>元素当中，这些元素分别指向各自的资源。 - 浏览器会检查
<source>元素，并且播放第一个与其自身相匹配的媒体。 - 每个
<source>元素都含有 type 属性，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。
第十一章：创建超级链接以及锚点链接
11.1超链接写法及属性
框架内容：
plain
<a href=""></a> <a href="https://www.deepseek.com/">DeepSeek官网</a> 【超链接标签】<a> 【核心属性】 - href：href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。链接地址 - target：打开方式（_self 当前窗口打开(默认) _blank 新窗口打开）11.2超链接的种类
在 HTML 中，超链接（Hyperlink）是通过<a>标签实现的，根据链接目标的不同，主要可以分为以下几种类型：
1. 外部链接
指向其他网站或域名的页面。这是最常见的链接类型，用于实现互联网上的跨站点跳转。
- 写法：必须使用完整的绝对路径（URL），通常以
http://或https://开头。 - 示例：html
预览
1<a href="https://www.baidu.com">访问百度</a>
2. 内部链接
指向当前网站内部的其他页面或文件。这种链接用于构建网站自身的导航结构。
- 写法：通常使用相对路径。如果目标文件在同一目录下，直接写文件名；如果在子目录，需加上路径前缀。
- 示例：html
预览
1<!-- 同一目录下的 about.html --> 2<a href="about.html">关于我们</a> 3 4<!-- 上级目录下的 index.html --> 5<a href="../index.html">返回首页</a>
3. 锚点链接
指向当前页面内的特定位置，或者另一个页面的特定位置。常用于长文章的目录导航或“返回顶部”功能。
- 写法：
- 定义锚点：在目标位置设置一个
id属性（旧标准用name属性）。 - 链接锚点：
href属性值以#开头，后跟目标的id值。
- 定义锚点：在目标位置设置一个
- 示例：html
预览
1<!-- 定义目标位置 --> 2<h2 id="chapter1">第一章</h2> 3 4<!-- 点击跳转到该位置 --> 5<a href="#chapter1">跳转到第一章</a>
4. 功能性链接
这类链接不跳转到网页，而是触发浏览器的特定功能或调用本地应用程序。
邮件链接
点击后会自动打开用户默认的邮件客户端（如 Outlook、Mail），并预填收件人地址。
- 写法：
href="mailto:邮箱地址" - 示例：html
预览
1<a href="mailto:support@example.com">联系客服</a>
电话链接
主要在移动端设备上有效，点击后会调起拨号界面。
- 写法：
href="tel:电话号码" - 示例：html
预览
1<a href="tel:10086">拨打 10086</a>
下载链接
当href指向一个浏览器无法直接预览的文件（如.zip,.exe,.pdf等）时，浏览器会触发下载行为。也可以使用download属性强制下载。
- 示例：html
预览
1<a href="files/report.pdf" download>下载报告</a>
5. 空链接与脚本链接
主要用于开发过程中的占位，或者配合 JavaScript 进行交互操作。
空链接
没有实际跳转目标的链接，常用于 CSS 样式调试或作为 JS 事件的载体。
- 写法：
href="#"或href="javascript:void(0);" - 注意：
#会导致页面滚动到顶部，javascript:void(0);则不会有任何动作。
脚本链接
直接在href中执行 JavaScript 代码（现代开发中不推荐这种写法，建议使用事件监听器）。
- 示例：html
预览
1<a href="javascript:alert('Hello!')">点击弹窗</a>
11.3点击超链接后页面滑动效果
html { scroll-behavior: smooth; }第十二章：网页结构标签和无语义标签
12.1 常见布局标签
1.网站结构标签
| 标签 | 作用 |
| <header> | 网页页眉（头部） |
| <main> | 网页内容。每个页面只能有一个 |
| <nav> | 导航栏 |
| <article> | 文章相关 |
| <section> | 分块 |
| <aside> | 侧边栏 |
| <footer> | 页面页脚（底部） |
2.无语义标签
1.<div>(Division)
- 含义：文档划分、区块。
- 特点：它是一个块级元素（Block-level element）。默认情况下，它会独占一行，宽度撑满父容器。
- 用途：常用于网页的整体布局，比如将页面的头部、侧边栏、主体内容区包裹起来，或者作为 CSS 样式和 JavaScript 操作的容器。
- 示例：html
预览
1<div style="background-color: lightblue; padding: 10px;"> 2 这是一个 div 容器 3</div>
2.<span>
- 含义：行内跨度。
- 特点：它是一个行内元素（Inline element）。它不会换行，宽度仅由其内容决定。
- 用途：常用于在一行文本中包裹部分文字，以便单独对这几个字进行样式修改（如改变颜色、字体大小）或绑定 JS 事件。
- 示例：html
预览
1<p>这是一段文字，其中包含 <span style="color: red;">红色高亮</span> 的部分。</p>
💡 补充：其他常见的无语义标签
除了<div>和<span>这两个最常用的布局标签外，以下标签也属于无语义标签：
<b>：仅表示文本加粗（Bold），不强调重要性。<i>：仅表示文本斜体（Italic），不表示专业术语或引用。<u>：仅表示下划线（Underline）。<br>：仅表示换行。<hr>：仅表示水平分割线。
⚠️ 为什么现代开发提倡使用“语义化标签”？
在 HTML5 之前，开发者大量使用<div>和<span>来搭建网页，导致代码像“意大利面条”一样难以阅读。HTML5 引入了语义化标签（如<header>、<nav>、<article>、<footer>）来替代它们。
第十三章：列表标签-有序无序和描述列表
13.1列表标签
列表标签是 HTML 中专门用来将一组相关内容以结构化、条理化方式呈现出来的标签。它们在网页中非常常见，比如导航菜单、文章目录、商品清单等。
框架内容：
plain
【无序列表】<ul> + <li> <ul> <li>猪爸爸</li> <li>猪妈妈</li> <li>佩奇</li> <li>乔治</li> </ul> 运行效果： ● 猪爸爸 ● 猪妈妈 ● 佩奇 ● 乔治 【有序列表】<ol> + <li> <ol> <li>看视频</li> <li>写代码</li> <li>做笔记</li> <li>多复习</li> </ol> 运行结果： 1.看视频 2.写代码 3.做笔记 4.多复习 【描述列表】<dl> + <dt> + <dd> <dl> <dt>家电</dt> <dd>电视</dd> <dd>冰箱</dd> <dd>空调</dd> <dd>烟灶</dd> </dl> 家电 电视 冰箱 空调 烟灶 【使用场景】 - 无序列表：导航菜单、商品列表 - 有序列表：排行榜、步骤说明 - 描述列表：术语解释、问答列表第十四章：表格标签
14.1 表格的作用
表格作用： 以结构化方式展示行列数据，使信息清晰、易读且便于对比。 网页场景： 主要用于数据展示或者后台管理系统的信息展示。
框架内容：
plain
【基础表格】<table> + <tr> + <td> 【表头】<th> 【表格分区】<thead>、<tbody>、<tfoot> 【合并单元格】 - colspan：跨列合并 - rowspan：跨行合并 【AI辅助】 - 利用AI工具帮助合并单元格14.2 表格的基本组成
14.3 表格结构标签：增强表格语义，让表格结构更加清晰
| 标签 | 作用 |
| <thead> | 定义表格头部区域 |
| <tbody> | 定义表格的主体内容 |
第十五章：表单容器以及文本框和密码框属性
15.1. 表单的作用
表单的主要作用是收集、处理和提交用户输入的数据。
通过表单，网页不再是一个单向展示信息的静态页面，而是变成了一个可以双向沟通的平台。用户在表单中填写的内容（如文字、选择的选项、上传的文件等），会被打包发送给服务器，服务器处理后再返回相应的结果。
15.2. 常见的使用场景
表单在互联网上的应用几乎无处不在，主要包括以下几类：
- 账号与身份认证：如网站的“登录”、“注册”、“找回密码”页面。
- 信息搜索与查询：如百度/淘宝顶部的“搜索框”、航班查询、火车票查询等。
- 用户反馈与沟通：如“联系我们”页面、问卷调查、意见反馈、留言板等。
- 电子商务与交易：如购物车结算、填写收货地址、支付页面的信用卡信息输入等。
- 内容发布与创建：如发微博/朋友圈、写博客文章、上传头像或附件、填写个人简历等。
- 系统设置与偏好：如修改个人密码、调整网站主题颜色、订阅/退订邮件通知等。
15.3 表单的组成
15.4 表单容器
1.<form>标签
这是整个表单的“外壳”，所有的表单控件都必须放在<form>和</form>标签之间。它主要负责告诉浏览器数据提交给谁、用什么方式提交。
action属性：指定处理表单数据的服务器端程序的 URL 地址（即数据提交到哪里）。method属性：指定数据的提交方式，最常用的是GET（数据附在 URL 后面，适合搜索）和POST（数据在请求体中，更安全，适合登录、注册等）。
2.表单控件（输入元素）
这是用户实际进行输入和操作的区域。主要包括以下几种：
①<input>标签（最核心、最多变）
<!-- 1. 表单容器：定义数据提交的地址和方法 --> <form action="/register" method="POST"> <!-- ① 单行文本输入框 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <br><br> <!-- ② 密码输入框 --> <label for="pwd">密码：</label> <input type="password" id="pwd" name="password" placeholder="请输入密码"> <br><br> <!-- ③ 单选按钮 (注意：name 属性必须相同，才能实现多选一) --> <p>性别：</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <br><br> <!-- ④ 复选框 (name 属性通常写成数组形式，如 hobby[]) --> <p>兴趣爱好：</p> <input type="checkbox" id="hobby1" name="hobby" value="reading"> <label for="hobby1">阅读</label> <input type="checkbox" id="hobby2" name="hobby" value="gaming"> <label for="hobby2">游戏</label> <input type="checkbox" id="hobby3" name="hobby" value="sports"> <label for="hobby3">运动</label> <br><br> <!-- ⑤ 文件上传控件 --> <label for="avatar">上传头像：</label> <input type="file" id="avatar" name="avatar"> <br><br> <!-- ⑥ 重置按钮 --> <input type="reset" value="清空表单"> <!-- ⑦ 提交按钮 --> <input type="submit" value="立即注册"> </form>- 作用：多行文本输入框。
- 场景：常用于个人简介、长篇留言、意见反馈等需要输入大量文字的地方。
- 特点：它是双标签，默认大小可以通过
cols（列数）和rows（行数）属性控制，但现代开发中更推荐用 CSS 来控制宽高。
②<textarea>标签（多行文本输入）
<!-- 正确写法 --> <textarea name="comment" rows="4" cols="50">这里写默认内容</textarea> <!-- 错误写法（value对textarea无效） --> <textarea value="这里写默认内容"></textarea>- 作用：定义一个多行的文本输入控件。与单行的
<input type="text">不同，它允许用户输入大段的文字内容，并支持换行。 - 常见场景：个人简介、文章内容编辑、留言反馈、地址填写等需要大量文字输入的场景。
- 关键属性：
rows：定义文本框可见的行数（高度）。cols：定义文本框可见的列数（宽度）。注：现代开发中通常使用 CSS 来控制宽高，这两个属性用得较少。readonly：只读属性，用户可以看到内容但无法修改。disabled：禁用属性，文本框变灰且无法交互，数据也不会被提交。
- 特别注意：
<textarea>是双标签（有开始也有结束），默认值（初始内容）应该写在两个标签之间，而不是使用value属性。
③<select>标签（下拉选择菜单）
- 作用：创建一个下拉列表，让用户从预定义的选项中选择一个或多个值。
- 结构解析：
<select>：外层容器，相当于“框”。<option>：具体的选项，相当于框里的“条目”。<optgroup>（进阶）：用于将选项分组（例如按国家分组城市），提升长列表的阅读体验。
- 关键属性：
multiple：允许用户按住 Ctrl (Windows) 或 Command (Mac) 键进行多选。size：定义下拉列表中可见的行数。如果大于1，通常会显示为滚动列表样式而非折叠的下拉框。selected：加在某个<option>上，表示页面加载时默认选中该项。
- 场景：如选择省份、出生年份、支付方式等，能有效节省页面空间。
④ <button> 标签（按钮）
<button type="submit"> <span class="icon">🚀</span> 立即提交 </button>
作用：定义一个可点击的按钮。
与 <input type="button"> 的区别：
内容丰富：<button> 是双标签，内部不仅可以包含纯文本，还可以嵌套 HTML 元素，如图片 (<img>)、图标 (<i> 或 <svg>) 甚至段落。这使得它在制作复杂的UI按钮时非常灵活。
类型明确：<button> 有一个 type 属性，必须注意区分：
type="submit"：默认值。点击后会提交表单数据。
type="reset"：点击后重置表单内容。
type="button"：普通按钮，点击后没有任何默认行为，通常需要配合 JavaScript 使用。
⑤<label>标签（辅助控件/关联标签）
<!-- 点击“用户名”三个字，输入框就会自动获得光标 --> <label for="user_name">用户名：</label> <input type="text" id="user_name" name="username">- 作用：为表单控件（如 input, textarea, select）提供文字说明。它是提升表单可用性和无障碍访问（Accessibility）的关键标签。
- 核心机制（绑定）：通过
for属性与表单控件的id属性建立显式关联。 - 用户体验优势：
- 扩大点击区域：当用户点击
<label>中的文字时，浏览器会自动将焦点转移到对应的输入框上，或者激活对应的单选/复选框。这对于移动端用户或鼠标操作不精准的用户非常友好。 - 屏幕阅读器支持：视障人士使用的屏幕阅读器在读到输入框时，会朗读关联的 label 文字，告诉用户这个框是填什么的。
- 扩大点击区域：当用户点击
## 🎯 写在最后
从打开 Trae 编辑器写下第一个 `<h1>`，到能独立搭建一个包含标题、段落、图片、链接、列表、表格、表单的完整页面——这大概就是 HTML5 入门最扎实的路径了。
回顾这 这些，我觉得最有价值的不是记住了多少标签，而是建立了**"语义化思维"**：
- 看到一段内容，第一反应是"该用什么标签表达它的含义"
- 而不是"怎么让它看起来好看"（那是 CSS 的事）
> 💡 **给初学者的建议**：不要急着背标签，打开任意一个网站，按 F12 看看它的 HTML 结构，你会发现课堂上学的东西都在里面。
**下一步计划**：CSS 基础 → 选择器与盒模型 → Flex 布局 → 实战项目
