02.Web开发基础

发表于 2025-09-26 更新于 2025-10-28

1. Web的发展

1.1 什么是Web？

Web = 万维网（World Wide Web）
它不是互联网（Internet），而是互联网上的一种服务，就像微信、QQ一样。

互联网：像高速公路，连接全球计算机
Web：像高速公路上的"信息专列"，专门运送网页内容

生活类比：

你用手机刷抖音 → 抖音App是"客户端"
你用浏览器看网页 → 浏览器是"客户端"，Web是背后的信息系统

1.2 Web的三个发展阶段

阶段	时间	特点	例子
Web 1.0	1990s-2000s	只读网页用户只能看，不能互动	早期新浪、搜狐
Web 2.0	2000s-现在	人人可参与用户能发评论、发视频	微信公众号、抖音、微博
Web 3.0	未来趋势	智能化 AI理解你的需求，主动推荐内容	智能助手、个性化推荐

学生视角：
- Web 1.0：老师讲课，你只能听
- Web 2.0：课堂讨论，你可以发言
- Web 3.0：AI助教，知道你哪里不会，主动帮你

1.3 Web如何工作？（简单版）

当你在浏览器输入 www.baidu.com 时，发生了什么？

你：输入网址 → 回车
浏览器：向百度的服务器"喊一嗓子"："把网页给我！"
服务器：打包网页文件（HTML+CSS+JS）→ 发送回来
浏览器：收到文件 → 拆包 → 显示网页

💡 关键概念：
- 客户端：你的浏览器（发起请求） - 服务器：百度的电脑（响应请求） - HTTP：它们之间的"通话协议"

1.4 为什么学Web开发？

理由	说明
应用广泛	所有公司都需要网站/系统
入门简单	用浏览器就能看到效果
就业机会多	企业数字化转型需求大
适合创新	自己做个小网站，就能上线

大一学生优势：
- 你每天都在用Web（微信、抖音、B站）
- 你比老师更懂"好用的网站"是什么样
- 把"用户思维"变成"开发思维"，你就赢了！

2. Web开发技术发展

2.1 最初时代：纯HTML（1990s）

特点： - 网页 = 静态文件（.html） - 修改内容 → 直接改代码 - 没有"交互"，只能看

例子：

1 2	<h1>我的第一个网页</h1> <p>欢迎来到我的网站！</p>

💡 问题：
想改标题？必须改代码！
想加新页面？必须新建文件！

2.2 动态时代：MVC架构（2000s）

MVC = 模型(Model)-视图(View)-控制器(Controller)

部分	作用	类比
Model	管理数据（数据库）	厨房的食材
View	显示界面（网页）	餐厅的菜单
Controller	处理逻辑（接收请求）	厨师

经典框架：
- ThinkPHP（PHP） - Ruby on Rails（Ruby） - Django（Python） - Spring MVC（Java）

进步：
✅ 内容可以动态生成
✅ 修改数据不用改代码

2.3 前后端分离时代：MVVM（2010s-现在）

MVVM = 模型(Model)-视图(View)-视图模型(ViewModel)

核心思想： - 前端（View）和后端（Model）分开开发 - 通过API（接口）通信 - 前端可以独立更新，不用动后端

经典框架： - 前端：Vue.js、React、Angular - 后端：FastAPI、Spring Boot、Express

2.4 为什么MVVM是现在的主流？

优势	说明
开发效率高	前后端可以并行开发
维护方便	改前端不影响后端
适合团队	分工明确，各司其职
跨平台	一套后端，支持网页、App、小程序

3. 现代Web技术栈组成

3.1 Web开发的四大核心

部分	作用	常见技术
前端	用户看到的界面（网页的"脸"）	HTML、CSS、JavaScript、Vue、React
后端	处理数据和逻辑（网页的"大脑"）	Python、Java、Go、Node.js
数据库	存储和管理数据（网页的"记忆"）	MySQL、PostgreSQL、MongoDB
部署	让网站上线运行（网页的"家"）	Docker、Nginx、云服务器

💡 生活类比：
开餐馆 = 做网站
- 前端 = 餐厅装修 + 菜单设计
- 后端 = 厨房做菜 + 库存管理
- 数据库 = 冰箱 + 账本（存食材、记账）
- 部署 = 租店面 + 办营业执照

3.2 开发流程（简单版）

基本流程：

1	写代码 → 测试功能 → 用Docker打包 → 部署上线

CI/CD简介（了解即可）： - CI/CD：自动化测试和部署（企业级功能） - 对你的意义：先专注"把功能做出来"，CI/CD后续再学

3.3 本课程技术栈选择

我们为什么选这些技术？

技术	为什么选它	对你的好处
FastAPI（后端）	Python写的，语法简单适合初学者快速上手	✅ 用Python，你学过 ✅ 未来可做数据分析、AI
Vue 3（前端）	中文文档全国人尤雨溪开发，社区活跃	✅ 上手快，教程多 ✅ 国产技术，有亲切感
MySQL（数据库）	免费开源、语法简单全球最流行的关系型数据库	✅ 学会SQL基础 ✅ 企业广泛使用，求职加分
Docker（部署）	解决"在我电脑能跑" 一键部署，避免环境问题	✅ 学完就能上线项目 ✅ 企业真实用的技术

3.4 技术栈全景图

1
2
3

用户浏览器 ←→ Vue 3（前端） ←→ FastAPI（后端） ←→ 数据库
                             ↑
                         Docker（打包部署）

各部分职责： - Vue 3：显示页面，处理用户点击 - FastAPI：接收请求，查数据库，返回数据 - MySQL：存储用户信息、文章、订单等结构化数据 - Docker：把前后端和数据库打包，一键运行

3.5 为什么这样设计？

✅ 对初学者友好

Python + FastAPI：Python 能做的事很多，不用每件事学新语言
Vue 3：对新手更友好，中文资料多
MySQL：语法直观，SELECT * FROM users 一看就懂
Docker：避免"环境配置"的噩梦

✅ 未来可扩展

后端：学懂FastAPI，未来可学Go（Gin）、Java（Spring）
前端：掌握Vue，再学React很容易
数据库：PostgreSQL/MySQL是行业标准，企业都在用

🌟 记住：
99%的Web项目不会遇到性能瓶颈
先学会"怎么做"，再考虑"怎么更快" 技术会变，但开发逻辑不变。
先掌握一套"能跑通"的技术栈，比纠结"哪个最好"更重要！

4. 开发环境配置（极简版）

4.1 你需要安装什么？

只需三步，全部搞定：

✅ 第一步：安装 VS Code

下载地址：https://code.visualstudio.com/
安装方式：像安装QQ一样，双击→下一步→完成
为什么用它：免费、轻量、适合初学者

✅ 第二步：安装 Python 和 Node.js（开发基础）

软件	下载地址	安装提示
Python 3.11	https://www.python.org/downloads/	勾选 ✅ "Add to PATH"
Node.js	https://nodejs.org/	直接下载 LTS 版本，安装即可

💡 验证是否安装成功： 1. 打开命令行（Windows：Win+R → 输入 cmd） 2. 分别输入：
1
2
python --version
node --version
3. 如果显示版本号（如 Python 3.11.0），说明成功！

4.2 安装项目依赖（一行命令）

打开 VS Code，进入你的项目文件夹，在终端中运行：

# 安装后端（FastAPI）所需库
pip install fastapi "uvicorn[standard]"

# 安装前端（Vue 3）所需工具
npm install -g @vue/cli

✅ 说明： - pip 是 Python 的"应用商店" - npm 是 Node.js 的"应用商店" - 这两行命令会自动下载 FastAPI 和 Vue 3

4.3 安装 VS Code 必备插件

在 VS Code 左侧点击"扩展"（四个方块图标），搜索并安装：

插件	作用	搜索关键词
Python	运行和调试 Python 代码	`python`
Volar	支持 Vue 3 语法高亮	`volar`
ESLint	自动检查 JavaScript 错误	`eslint`
MySQL	直接在 VS Code 里操作数据库	`mysql`
GitHub Copilot	AI辅助编程，自动生成代码	`github copilot`

✅ 安装后重启 VS Code

4.4 创建你的第一个 FastAPI 项目

在 VS Code 中新建文件 main.py，输入：

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

运行它： 1. 打开终端（Terminal → New Terminal） 2. 输入：

1	uvicorn main:app --reload

3. 浏览器打开 http://127.0.0.1:8000，看到 {"Hello":"World"} 就成功了！

4.5 创建你的第一个 Vue 3 项目

在终端运行：

1 2	# 创建名为 my-vue-app 的项目 vue create my-vue-app

- 选择：Vue 3（按方向键选择，回车确认） - 等待安装完成

运行前端：

1 2	cd my-vue-app npm run serve

浏览器打开 http://localhost:8080，看到 Vue 欢迎页面就成功了！

4.6 连接 MySQL（简单配置）

下载并安装 MySQL Community Server：https://dev.mysql.com/downloads/mysql/
安装时记住你设置的密码
在 VS Code 中用 MySQL 插件连接：
- 主机：localhost
- 用户名：root
- 密码：你设置的密码

💡 提示：先不用深究数据库细节，后续课程会一步步教你！

您说得对，作为“开发环境配置”这一节下的子部分，“扩展：新手常见问题与求助指南”应该使用 ### 级别标题。以下是修正后的完整第四节内容：

4. 开发环境配置（极简版）

4.1 你需要安装什么？

只需三步，全部搞定：

✅ 第一步：安装 VS Code

下载地址：https://code.visualstudio.com/
安装方式：像安装QQ一样，双击→下一步→完成
为什么用它：免费、轻量、适合初学者

✅ 第二步：安装 Python 和 Node.js（开发基础）

软件	下载地址	安装提示
Python 3.11	https://www.python.org/downloads/	勾选 ✅ "Add to PATH"
Node.js	https://nodejs.org/	直接下载 LTS 版本，安装即可

💡 验证是否安装成功： 1. 打开命令行（Windows：Win+R → 输入 cmd） 2. 分别输入：
1
2
python --version
node --version
3. 如果显示版本号（如 Python 3.11.0），说明成功！

4.2 安装项目依赖（一行命令）

打开 VS Code，进入你的项目文件夹，在终端中运行：

# 安装后端（FastAPI）所需库
pip install fastapi "uvicorn[standard]"

# 安装前端（Vue 3）所需工具
npm install -g @vue/cli

✅ 说明： - pip 是 Python 的"应用商店" - npm 是 Node.js 的"应用商店" - 这两行命令会自动下载 FastAPI 和 Vue 3

4.3 安装 VS Code 必备插件

在 VS Code 左侧点击"扩展"（四个方块图标），搜索并安装：

插件	作用	搜索关键词
Python	运行和调试 Python 代码	`python`
Volar	支持 Vue 3 语法高亮	`volar`
ESLint	自动检查 JavaScript 错误	`eslint`
MySQL	直接在 VS Code 里操作数据库	`mysql`

✅ 安装后重启 VS Code

4.4 创建你的第一个 FastAPI 项目

在 VS Code 中新建文件 main.py，输入：

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

运行它： 1. 打开终端（Terminal → New Terminal） 2. 输入：

1	uvicorn main:app --reload

3. 浏览器打开 http://127.0.0.1:8000，看到 {"Hello":"World"} 就成功了！

4.5 创建你的第一个 Vue 3 项目

在终端运行：

1 2	# 创建名为 my-vue-app 的项目 vue create my-vue-app

- 选择：Vue 3（按方向键选择，回车确认） - 等待安装完成

运行前端：

1 2	cd my-vue-app npm run serve

浏览器打开 http://localhost:8080，看到 Vue 欢迎页面就成功了！

4.6 连接 MySQL（简单配置）

下载并安装 MySQL Community Server：https://dev.mysql.com/downloads/mysql/
安装时记住你设置的密码
在 VS Code 中用 MySQL 插件连接：
- 主机：localhost
- 用户名：root
- 密码：你设置的密码

💡 提示：先不用深究数据库细节，后续课程会一步步教你！

4.7 扩展：新手常见问题与求助指南

4.7.1 网速太慢？配置国内镜像源（必做！）

Python 包下载慢？ → 配置 pip 国内源
在命令行运行（只需一次）：

1	pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

Node.js 包下载慢？ → 配置 npm 国内源
在命令行运行：

1	npm config set registry https://registry.npmmirror.com

✅ 推荐镜像网站：
- 清华大学：https://pypi.tuna.tsinghua.edu.cn - 阿里云：https://npm.aliyun.com - 网易：http://mirrors.163.com

4.7.2 遇到问题？这样问 AI 最有效

错误不会查？复制错误信息 + 问 AI
✅ 好问题： > "VS Code 运行 uvicorn main:app 报错：command not found，怎么办？"

❌ 坏问题： > "我的代码跑不了"

配置不会？让 AI 一步步教你
✅ 可以问： > "如何在 Windows 上安装 MySQL 并用 VS Code 连接？请给详细步骤"

想学更多？让 AI 推荐资源
✅ 可以问： > "推荐几个适合大一学生的 Python + FastAPI 学习网站"

4.7.3 其他注意事项

问题	解决方案
命令行报错 `拒绝访问`	Windows：右键 VS Code → "以管理员身份运行"
端口被占用	换端口，如 `uvicorn main:app --port 8081`
插件装不上	检查网络，或重启 VS Code
MySQL 连不上	确认服务是否启动（Windows：服务管理器 → MySQL → 启动）

💡 重要提醒：
- 不要怕报错，报错是学习的一部分 - 每次解决一个问题，你就进步一点 - 保存好你的配置笔记，以后重装系统不慌

4.7.4 推荐学习资源

类型	推荐
Python 入门	廖雪峰Python教程
Vue 3 官方文档	https://cn.vuejs.org
FastAPI 官方文档	https://fastapi.tiangolo.com
VS Code 使用	B站搜索"VS Code 入门"

🌟 记住：
环境配置不是"考试"，而是"工具准备"。
花1小时解决问题，换来的是未来100小时的高效开发！

5. HTML5语义化标签

5.1 什么是HTML？

HTML = 超文本标记语言（HyperText Markup Language）
它是网页的"骨架"，决定了页面的结构和内容。

类比：写作文时的"提纲"
作用：告诉浏览器"这里是一段文字"、"那里是一个标题"、"这是一个图片"

最简单的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我的第一段文字。</p>
</body>
</html>

5.2 HTML5 是什么？

版本	时间	特点
HTML 4	1997	使用 `<div>` 万能标签
HTML5	2014	新增语义化标签，让结构更清晰

为什么升级？
以前：

<div id="header">...</div>
<div class="nav">...</div>
<div class="article">...</div>
<div id="footer">...</div>

→ 全是<div>，看不出结构

现在（HTML5）：

<header>...</header>
<nav>...</nav>
<article>...</article>
<footer>...</footer>

→ 标签本身就有意义，一目了然！

5.3 常用HTML5语义化标签

标签	含义	作用
`<header>`	页眉	放网站标题、logo
`<nav>`	导航栏	放菜单、链接
`<main>`	主要内容	页面核心内容
`<article>`	独立文章	博客、新闻等
`<section>`	内容区块	划分不同区域
`<aside>`	侧边栏	放广告、推荐
`<footer>`	页脚	版权信息、联系方式

生活类比：
就像写一篇公众号文章：

<header>文章标题 + 作者</header>
<nav>目录导航</nav>
<main>
    <article>正文内容</article>
    <aside>相关推荐</aside>
</main>
<footer>版权声明</footer>

5.4 为什么要用语义化标签？

好处	说明
✅ 结构清晰	开发者一看就懂页面布局
✅ SEO友好	搜索引擎更容易理解内容
✅ 无障碍访问	屏幕阅读器能更好识别
✅ 维护方便	改样式时定位更快

💡 对初学者的意义：
用语义化标签，就像用正确的词语写作文。
不仅让别人看懂，也让自己未来更容易修改！

5.5 实战：搭建一个简单页面结构

<!DOCTYPE html>
<html>
<head>
    <title>我的博客</title>
</head>
<body>
    <header>
        <h1>我的技术博客</h1>
        <p>记录学习点滴</p>
    </header>

    <nav>
        <a href="#">首页</a> |
        <a href="#">文章</a> |
        <a href="#">关于</a>
    </nav>

    <main>
        <article>
            <h2>第一篇文章</h2>
            <p>这是文章内容...</p>
        </article>

        <aside>
            <h3>推荐阅读</h3>
            <p>Vue入门指南</p>
        </aside>
    </main>

    <footer>
        <p>© 2025 我的博客</p>
    </footer>
</body>
</html>

🌟 记住：
语义化不是"炫技"，而是写给人看的代码。
养成好习惯，从第一个页面开始！

好的，以下是调整后的第六节内容，完全聚焦于纯前端，不涉及后端、API、跨域等复杂概念，更适合大一新生入门。

6. AI实战：使用AI搭建一个极简网页

6.1 本节目标

我们将通过向AI提问（Prompt），让AI帮我们： - ✅ 用 HTML + CSS + Vue 3（CDN）做一个“今日心情”小页面 - ✅ 实现“点击按钮切换心情”的交互 - ✅ 不用安装任何构建工具，直接在浏览器打开就能运行

💡 为什么这样设计？
避免“环境配置”和“前后端交互”的干扰，让你专注理解“代码如何变成网页”。

6.2 第一步：让AI生成一个带Vue的HTML页面

📌 Prompt 1：创建一个简单的Vue页面

"写一个HTML页面，使用Vue 3 CDN，显示一句话：'今天的心情：开心'，并有一个按钮，点击后变成'不开心'，再点变回来。"

✅ AI生成代码（保存为 `mood.html`）：

<!DOCTYPE html>
<html>
<head>
    <title>我的心情</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: '微软雅黑', Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
            background-color: #f0f8ff;
        }
        h1 {
            color: #333;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <div id="app">
        <h1>今天的心情：{{ mood }}</h1>
        <button @click="toggleMood">切换心情</button>
    </div>

    <!-- Vue 逻辑 -->
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    mood: '开心'  // 初始心情
                }
            },
            methods: {
                toggleMood() {
                    // 如果当前是“开心”，就变成“不开心”，反之亦然
                    this.mood = this.mood === '开心' ? '不开心' : '开心'
                }
            }
        }).mount('#app')  // 把Vue应用挂载到 id="app" 的元素上
    </script>
</body>
</html>

🔧 运行方法：
1. 把代码保存为 mood.html
2. 双击文件，用浏览器打开
3. 点击按钮，看看心情会不会变！

6.3 第二步：让AI给页面加个表情符号

📌 Prompt 2：添加表情符号

"在心情文字后面加一个emoji表情，开心时显示 😊，不开心时显示 😞"

✅ AI修改后的代码（更新 `<h1>` 行）：

1	<h1>今天的心情：{{ mood }} {{ mood === '开心' ? '😊' : '😞' }}</h1>

✅ 效果：
- 开心 → 😊
- 不开心 → 😞

6.4 第三步：让AI加个计数器

📌 Prompt 3：记录点击次数

"加一个功能：显示一共切换了多少次心情"

✅ AI补充代码：

在 data() 里加一个计数器：

data() {
    return {
        mood: '开心',
        clickCount: 0  // 点击次数
    }
}

在 toggleMood 方法里增加计数：

toggleMood() {
    this.mood = this.mood === '开心' ? '不开心' : '开心'
    this.clickCount++  // 每次点击 +1
}

在页面上显示计数：

1	<p>你已经切换了 {{ clickCount }} 次心情</p>

6.5 最终效果

你的页面现在有： - ✅ 显示当前心情（开心/不开心） - ✅ 点击按钮切换心情 - ✅ 显示对应表情 😊 / 😞 - ✅ 记录并显示点击次数

6.6 本节收获

你已经学会了： - ✅ 如何用 Prompt 让AI帮你写代码 - ✅ 如何用 CDN 引入 Vue，不用安装复杂工具 - ✅ 如何通过 data 和 methods 实现页面交互 - ✅ 如何一步步迭代功能，像搭积木一样开发

🌟 记住：
编程不是“一次性写出完美代码”，而是：
想法 → 写Prompt → AI生成 → 测试 → 调整 → 再提问
这就是现代开发者的“超能力”！

7.*浏览器调试技巧（F12的三大法宝）

🔧 怎么打开F12？

快捷键：在网页上按 F12 或 Ctrl + Shift + I
右键菜单：在网页空白处 → 右键 → “检查”或“审查元素”

🌟 打开后你会看到一个新面板，这就是“开发者工具”。

1. 【元素】标签页 —— 查看和修改网页结构

作用：
👉 看到网页的HTML代码是怎样的
👉 实时修改文字、颜色、样式，马上看到效果

小实验： 1. 打开前面做的 mood.html 2. 按 F12 → 点击【元素】（Elements） 3. 在代码中找到 <h1>今天的心情：...</h1> 4. 双击文字，改成“今天超开心！” 5. 看看页面是不是立刻变了？

✅ 用途：
- 调试页面布局
- 学习别人网页是怎么做的
- 临时改内容“假装”成功（别干坏事哦 😄）

2. 【控制台】标签页 —— 和JavaScript对话

作用：
👉 显示代码错误（红色提示）
👉 直接运行JavaScript代码
👉 输出调试信息（比如 console.log()）

小实验： 1. 在 mood.html 的 Vue 代码里加一句：

1	console.log("页面加载了！当前心情：" + this.mood)

2. 刷新页面 3. 打开F12 → 点【控制台】（Console） 4. 你会看到输出：页面加载了！当前心情：开心

✅ 用途：
- 查看哪里出错了（红字警告）
- 测试JS代码（比如在控制台输入 2+3 回车试试）
- 调试变量值

3. 【网络】标签页 —— 看网页“下载了什么”

作用：
👉 显示网页加载时请求了哪些文件（HTML、CSS、JS、图片等）
👉 查看加载速度
👉 发现“加载失败”的资源（比如404）

小实验： 1. 打开 mood.html 2. 按 F12 → 点【网络】（Network） 3. 刷新页面 4. 你会看到一堆文件被加载，比如： - mood.html（你的页面） - vue.global.js（Vue库） 5. 点某个文件，能看到它的大小、加载时间

✅ 用途：
- 网页打不开？看是不是某个文件“红色”了（失败）
- 页面慢？看哪个文件加载最久
- 验证CDN是否生效

🌟 总结：F12三剑客

标签页	一句话用途	新手怎么用
元素	看和改HTML	改文字、学结构
控制台	看错误、运行JS	查错、打印信息
网络	看加载了啥	查404、看速度

💡 记住：
F12不是“高级功能”，而是每个前端开发者的日常工具。
遇到问题，先按F12，90%的bug都能找到线索！

1. Web的发展

1.1 什么是Web？

1.2 Web的三个发展阶段

1.3 Web如何工作？（简单版）

1.4 为什么学Web开发？

2. Web开发技术发展

2.1 最初时代：纯HTML（1990s）

2.2 动态时代：MVC架构（2000s）

2.3 前后端分离时代：MVVM（2010s-现在）

2.4 为什么MVVM是现在的主流？

3. 现代Web技术栈组成

3.1 Web开发的四大核心

3.2 开发流程（简单版）

3.3 本课程技术栈选择

我们为什么选这些技术？

3.4 技术栈全景图

3.5 为什么这样设计？

✅ 对初学者友好

✅ 未来可扩展

4. 开发环境配置（极简版）

4.1 你需要安装什么？

✅ 第一步：安装 VS Code

✅ 第二步：安装 Python 和 Node.js（开发基础）

4.2 安装项目依赖（一行命令）

4.3 安装 VS Code 必备插件

4.4 创建你的第一个 FastAPI 项目

4.5 创建你的第一个 Vue 3 项目

4.6 连接 MySQL（简单配置）

4. 开发环境配置（极简版）

4.1 你需要安装什么？

✅ 第一步：安装 VS Code

✅ 第二步：安装 Python 和 Node.js（开发基础）

4.2 安装项目依赖（一行命令）

4.3 安装 VS Code 必备插件

4.4 创建你的第一个 FastAPI 项目

4.5 创建你的第一个 Vue 3 项目

4.6 连接 MySQL（简单配置）

4.7 扩展：新手常见问题与求助指南

4.7.1 网速太慢？配置国内镜像源（必做！）

4.7.2 遇到问题？这样问 AI 最有效

4.7.3 其他注意事项

4.7.4 推荐学习资源

5. HTML5语义化标签

5.1 什么是HTML？

5.2 HTML5 是什么？

5.3 常用HTML5语义化标签

5.4 为什么要用语义化标签？

5.5 实战：搭建一个简单页面结构

6. AI实战：使用AI搭建一个极简网页

6.1 本节目标

6.2 第一步：让AI生成一个带Vue的HTML页面

📌 Prompt 1：创建一个简单的Vue页面

✅ AI生成代码（保存为 mood.html）：

6.3 第二步：让AI给页面加个表情符号

📌 Prompt 2：添加表情符号

✅ AI修改后的代码（更新 <h1> 行）：

6.4 第三步：让AI加个计数器

📌 Prompt 3：记录点击次数

✅ AI补充代码：

6.5 最终效果

6.6 本节收获

7.*浏览器调试技巧（F12的三大法宝）

🔧 怎么打开F12？

1. 【元素】标签页 —— 查看和修改网页结构

2. 【控制台】标签页 —— 和JavaScript对话

3. 【网络】标签页 —— 看网页“下载了什么”

🌟 总结：F12三剑客

✅ AI生成代码（保存为 `mood.html`）：

✅ AI修改后的代码（更新 `<h1>` 行）：