黑马程序员Pink老师2025版HTML部分学习笔记
·
一、学习前言
本篇为黑马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 布局 → 实战项目
AtomGit AI 社区提供模型库、数据集、Agent、Token等资源
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)