02.Web开发基础

发表于 2025-09-26 更新于 2025-11-04

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	正在发展	语义网：机器能理解网页内容 Web3：去中心化，用户拥有数据	语义网：智能搜索、数据自动整合 Web3：区块链应用、NFT、去中心化社交

💡 说明：
Web 3.0 有两种主流定义：
1. 语义网（Semantic Web）：由万维网之父提出，让机器能理解网页内容的含义，实现更智能的数据整合
2. Web3：强调去中心化，用户拥有自己的数据，不依赖大公司平台

注意：AI推荐、个性化内容属于Web 2.0的增强功能，不是Web 3.0的核心特征。

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

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

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

示意图：

           Web工作流程示意图
═══════════════════════════════════════════════════════════
    [你]                    [百度服务器]
     │                              │
     │  ① 输入网址 + 回车            │
     ▼                              │
  [浏览器]                          │
     │                              │
     │  ② HTTP请求 "把网页给我！"    │
     │─────────────────────────────>│
     │                              │ ③ 查找文件
     │                              │    (HTML+CSS+JS)
     │                              ▼
     │                        [服务器处理]
     │                              │ ④ 打包文件
     │                              │
     │  ⑤ HTTP响应                 │
     │     <HTML/CSS/JS>            │
     │<─────────────────────────────│
     ▼                              │
  [浏览器]                          │
     │  ⑥ 解析并显示网页            │
     ▼                              │
    [你看到网页]                    │
═══════════════════════════════════════════════════════════

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

1.4 为什么学Web开发？（AI时代新机遇）

理由	说明	AI时代的加持
应用广泛	所有公司都需要网站/系统	AI生成代码，快速实现需求
入门简单	用浏览器就能看到效果	AI辅助，减少调试时间
就业机会多	企业数字化转型需求大	AI工具成为标配，掌握者更有优势
适合创新	自己做个小网站，就能上线	不再需要学到大三大四，大一就能做出完整产品

AI时代：大一学生的新优势：

✅ 技术门槛降低，产品思维提前

以前：需要花2-3年学语法、框架、调试，才能做出像样的应用
现在：AI帮你写代码，你可以从大一开始就思考产品设计：
- 用户需要什么？
- 功能怎么设计？
- 体验如何优化？

✅ 不用等到大三，现在就能做出好应用

传统路径：大一大二学基础 → 大三做项目 → 大四找实习
AI驱动路径：大一开始就做项目 → 用AI实现想法 → 边做边学理论

✅ 你比老师更懂"好用的网站"是什么样

你每天都在用Web（微信、抖音、B站）
你有"用户思维"，知道什么是好体验
AI帮你把"想法"变成"代码"，你负责思考和设计

💡 重要提醒（参考第一章）：
AI降低了实现难度，但不能替代理论基础。
- 必须学好：数据结构、算法、系统设计原理
- 必须理解：代码为什么这样写，而不是"能用就行"
- 只有理解原理，才能让AI生成真正优秀的代码

记住：AI是工具，产品思维和理论基础才是核心竞争力！

2. Web开发技术发展

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

特点：

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

例子：

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

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

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

MVC架构：把网站分成三部分

MVC把网站开发分成三个部分，就像餐厅的三个角色：

部分	作用	餐厅类比
Model（模型）	存储数据的地方	厨房的食材仓库
View（视图）	用户看到的网页界面	餐厅的菜单
Controller（控制器）	处理用户的操作请求	厨师（接单、做菜）

MVC的工作流程：

用户在网页上点击"提交"（View接收操作）
Controller处理请求（厨师接单）
Controller从Model获取数据（厨师去仓库拿食材）
Controller处理后将结果返回View（厨师做好菜，更新菜单）

经典框架：

Ruby on Rails（2004年，Ruby语言）
Django（2005年，Python语言）
ThinkPHP（2006年，PHP语言）
Spring MVC（2003年，Java语言）

技术优势：
✅ 网页内容可以自动变化，无需修改代码
✅ 例如：今天有100个用户，明天有200个用户，页面会自动显示正确的数字

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

前后端分离：两个独立的"厨房"

传统开发方式：所有代码混在一起，就像在一个厨房里完成所有工作。

现代开发方式：前端和后端分离，就像餐厅有两个独立区域：

前端：用户看到的网页界面，负责展示和交互（类似餐厅的装修和菜单）
后端：处理数据存储和业务逻辑的服务器（类似厨房，负责数据处理）

核心思想：

前端和后端独立开发，互不干扰
通过API接口（Application Programming Interface）进行通信，类似服务员在餐厅和厨房之间传递订单
修改前端界面不影响后端逻辑，修改后端逻辑不影响前端界面

💡 类比理解：
类似手机App更新：你更新了界面外观（图标、颜色），但后台的数据处理逻辑（账号密码存储）保持不变。

📚 MVC vs MVVM：架构对比

MVC与MVVM的区别

MVC和MVVM是两种不同的架构模式，可以用纸质菜单和Pad点菜来类比：

对比项	MVC架构（纸质菜单）	MVVM架构（Pad点菜）
组成部分	Model = 厨房的食材库存 View = 纸质菜单 Controller = 服务员/厨师（处理订单）	Model = Pad上显示的数据（从后端获取） View = Pad上的菜单界面 ViewModel = Pad菜单和数据的绑定关系注意：后端仍然有Controller处理业务逻辑
工作流程	纸质菜单流程： 1. 顾客看纸质菜单点"番茄炒蛋" 2. 服务员（Controller）记下订单 3. 厨师去厨房拿食材 4. 如果食材卖完了，需要手动在纸质菜单上划掉或贴标签	Pad点菜流程： 1. 顾客在Pad上点"番茄炒蛋" 2. Pad（前端MVVM）发送请求到后端 3. 后端Controller处理订单 4. 如果后台库存显示食材没了，Pad上的这道菜自动变灰或消失（因为Pad菜单和库存数据是绑定的）
数据更新方式	手动更新：库存变了 → 需要服务员或厨师手动去改纸质菜单（比如划掉、贴标签、换新菜单）	自动绑定：库存变了 → Pad上的菜单自动跟着更新（就像Pad点菜系统，后台数据变了，界面自动变）
代码实现	手动管理数据流向 `javascript<br>// 数据变化时，需要手动更新界面<br>model.name = "李四";<br>view.innerHTML = model.name; // 手动更新<br>`	代码更简洁数据和界面自动绑定 `javascript<br>// 数据和界面绑定，数据变，界面自动变<br>data: { name: "李四" }<br>// 界面自动显示，无需手动更新代码<br>`
适用场景	后端开发（数据处理、存储）	前端开发（用户界面）
学习难度	逻辑清晰，但需要编写较多代码	需要理解数据绑定概念，但代码量更少

💡 核心区别：
- MVC：数据和界面分开，需要手动写代码更新界面（就像纸质菜单，库存变了需要手动划掉）
- MVVM：数据和界面绑定，数据变化时界面自动更新（就像Pad点菜，库存变了菜单自动更新）

MVVM的本质：
就像Pad点菜系统，后台库存数据变了，Pad上的菜单自动跟着变。MVVM让网页的显示内容和数据自动绑定，数据变了，显示自动跟着变，不需要手动写代码更新界面。

在完整的前后端分离架构中：

前端（MVVM）：负责界面展示和用户交互
- Model = 前端的数据（从后端API获取）
- View = 网页界面
- ViewModel = 数据绑定逻辑
后端（仍然使用MVC或类似架构）：负责处理业务逻辑和数据存储
- Model = 数据库
- View = 数据接口（返回JSON数据，不再是HTML页面）
- Controller = 处理业务逻辑（接收请求、处理数据、返回结果）

💡 说明：在前后端分离架构中，后端的View层不再是生成HTML页面，而是提供数据接口供前端调用。这些接口通常设计为RESTful风格（使用GET、POST等HTTP方法），但RESTful是API设计规范，不是MVC架构的一部分。

完整架构示例：

1	用户点击Pad → 前端MVVM处理交互 → 调用后端API → 后端Controller处理业务逻辑 → 返回数据 → 前端ViewModel更新显示

所以，MVVM是前端架构，后端仍然需要Controller来处理业务逻辑和数据操作。

经典框架：

前端框架：Vue.js（2014年）、React（2013年）、Angular（2010年）
后端框架：Express（Node.js，2010年）、Spring Boot（Java，2014年）、FastAPI（Python，2018年）

2.4 为什么前后端分离是现在的主流？

优势	说明
开发效率高	前后端可以并行开发
维护方便	改前端不影响后端
适合团队	分工明确，各司其职
跨平台	一套后端，支持网页、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 = Continuous Integration（持续集成）
CD = Continuous Delivery（持续交付）或 Continuous Deployment（持续部署）
CI/CD：自动化测试和部署（企业级功能）
对你的意义：先专注"把功能做出来"，CI/CD后续再学

3.3 本课程技术栈选择

我们为什么选这些技术？

技术	为什么选它	对你的好处
FastAPI（后端）	基于Python^① 自动生成API文档^②、类型提示、高性能^③ 适合初学者快速上手	✅ 大部分学校大一会有Python课 ✅ 学习资源丰富^① ✅ 自动生成文档，开发效率高^② ✅ 未来可做数据分析、AI
Vue 3（前端）	中文文档全^④ 国人尤雨溪开发^⑤，社区活跃	✅ 上手快，教程多^④ ✅ 国产技术，有亲切感^⑤
Ant Design Vue（UI框架）	企业级组件库^⑨ 中文文档完善^⑩，组件丰富	✅ 不用从零写UI，开发效率高^⑨ ✅ 中文文档，学习友好^⑩
MySQL（数据库）	免费开源^⑥、语法简单全球最流行的关系型数据库^⑦	✅ 学会SQL基础 ✅ 企业广泛使用，求职加分^⑦
Docker（部署）	解决"在我电脑能跑，在别人电脑就能跑"^⑧ 一键部署，避免环境问题	✅ 学完就能上线项目 ✅ 企业真实用的技术

详细说明：

① Python流行度：根据TIOBE编程语言排行榜（2025年10月），Python在该指数中排名第一（24.45%），自2023年底以来持续位居榜首。Python的流行度意味着：丰富的学习资源（教程、书籍、视频）、活跃的开发者社区（遇到问题容易找到答案）、广泛的就业机会（很多公司都用Python）。

② 自动生成API文档：FastAPI会根据你的代码自动生成交互式API文档（类似说明书），访问特定网址就能看到所有接口的说明，还能直接测试。这样你就不用花时间手写文档了，而且写出来的代码就是文档，减少出错。

③ 高性能：FastAPI基于Starlette和Pydantic构建，性能接近Node.js和Go等高性能语言，是Python中最快的Web框架之一。这意味着即使你的网站访问量很大，也能快速响应，不会卡顿。

④ Vue 3中文文档：Vue 3有完整的中文官方文档，这意味着你不需要看英文就能学会。而且国内有很多Vue的教程和视频，学习资源丰富，遇到问题容易找到中文解答。

⑤ 尤雨溪（Evan You）：Vue的创始人，中国人，曾就职于Google。Vue是中国人主导的开源项目，在全球广泛使用，作为国产技术更容易获得社区支持，也更有亲切感。

⑥ MySQL免费开源：MySQL是完全免费的，不需要花钱就能使用。开源意味着你可以看源代码，理解底层原理。对于学生来说，免费是最重要的，不用担心版权问题。

⑦ MySQL流行度：MySQL是全球最流行的关系型数据库之一，被大量企业使用（包括阿里巴巴、腾讯、Facebook等）。学会MySQL意味着你掌握了企业实际使用的技术，求职时更有竞争力。很多公司的招聘要求都会提到MySQL。

⑧ Docker解决环境问题：这是所有开发者都会遇到的经典问题："在我电脑上能跑，为什么在你电脑上不行？"Docker把应用和运行环境打包在一起，就像把整个"房间"一起搬走，这样在任何电脑上都能运行，避免了"环境配置"这个让人头疼的问题。

⑨ Ant Design Vue企业级组件库：Ant Design Vue提供了大量现成的UI组件（按钮、表格、表单、菜单等），你不需要从零开始写样式和布局。这意味着你可以把更多时间花在业务逻辑上，而不是写CSS样式。而且这些组件都经过精心设计，做出来的页面看起来专业、统一。

⑩ Ant Design Vue中文文档：Ant Design Vue是蚂蚁集团（支付宝的母公司）开源的企业级UI框架，有完整的中文官方文档。对于大一学生来说，这意味着你可以直接用中文学习，不需要看英文文档，遇到问题也容易找到中文解答。

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

4. 开发环境配置（从零开始）

4.1 第一步：选择并安装代码编辑器

你需要一个代码编辑器来写代码。选一个：

编辑器	特点	下载地址
VS Code	免费、轻量级、功能强大微软官方出品	code.visualstudio.com
Cursor	专注AI编程的编辑器轻量级、内置AI编程助手需要付费（学生可申请免费）	cursor.sh
Trae	字节跳动出品，完全免费轻量级、支持GPT-4o和Claude模型目前仅支持macOS	trae.com
PyCharm 社区版	JetBrains出品，功能强大重量级、专为Python设计现在也支持AI助手（AI Assistant）适合未来深入学习Python	jetbrains.com/pycharm

💡 轻量级 vs 重量级：
- 轻量级（VS Code、Cursor、Trae）：启动快、占用资源少、适合初学者 - 重量级（PyCharm）：功能更强大、集成更多工具、但启动慢、占用资源多

建议：如果你是第一次学编程，推荐从VS Code开始，它最简单、免费、教程最多。如果未来要深入学习Python，可以考虑PyCharm社区版。

4.2 第二步：插件（可选，不装也可以）

好消息：VS Code本身已经支持HTML、CSS、JavaScript的基础功能（语法高亮、代码提示），不装任何插件也能写代码！

如果你想安装插件提升体验，可以安装：

插件	作用	搜索关键词
Prettier	自动格式化代码，让代码更整齐（可选，但很实用）	`Prettier`

💡 说明：不装插件也能写代码。写HTML文件后，直接用浏览器打开文件就能看到效果，不需要Live Server。

4.3 第三步：写你的第一个网页（Hello World）

不用任何框架，从最基础的HTML开始！

打开VS Code，点击"文件" → "新建文件夹" → 创建一个名为 my-first-web 的文件夹
在文件夹里新建一个文件，命名为 index.html（注意：文件名必须是 .html 结尾）
在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>这是我的第一个网页！</p>
</body>
</html>

代码说明（每个标签的作用）：

<!DOCTYPE html>：告诉浏览器这是HTML5格式的网页（必须放在第一行）
<html>：网页的"容器"，所有内容都包在里面
<head>：网页的"头部"，放一些不显示的内容（如标题、样式）
<title>：网页标题，显示在浏览器标签页上
<body>：网页的"身体"，放所有要显示的内容
<h1>：一级标题（最大号的标题）
<p>：段落（普通文字）

运行网页：
- 找到 index.html 文件（在文件夹里）
- 双击文件，浏览器会自动打开，显示你的网页！
- 或者右键文件 → "打开方式" → 选择浏览器
修改试试：
- 把 <h1>Hello World!</h1> 改成 <h1>你好，世界！</h1>
- 保存文件（Ctrl+S）
- 在浏览器中按F5刷新，就能看到新内容！

🌟 恭喜！ 你已经成功创建了第一个网页！
这就是最基础的Web开发，不需要任何框架，不需要安装数据库，不需要运行服务器，就是这么简单！

5. HTML5语义化标签

5.1 什么是HTML？

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

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

小实验：不写<html>、<head>、<body>也能显示？

试试这个极简版本（新建一个文件 simple.html）：

1 2	<h1>Hello World!</h1> <p>这样也能显示！</p>

为什么没有<html>、<head>、<body>也能正常显示？

浏览器的容错性：现代浏览器非常"聪明"，即使你没有写完整的HTML结构，它也会自动补全。

那为什么还要写规范的标签？

代码更清晰：别人看你的代码时，一眼就知道结构
避免错误：有些功能（如CSS样式、JavaScript）需要正确的结构才能正常工作
专业习惯：养成好习惯，以后写复杂项目不会出错

反例：不规范标签确实会导致的问题

问题场景：JavaScript无法访问body元素

虽然我们还没学JavaScript，但可以先看看这个例子。看这个错误示例：

<!-- 错误示例：没有<html>和<body>标签，且脚本在内容之前 -->
<script>
    // 尝试动态创建元素并添加到body中
    const div = document.createElement('div');
    div.textContent = '动态创建的内容';
    document.body.appendChild(div);  // 会报错！
</script>

<h1>测试页面</h1>
<p>这里会报错</p>

测试步骤：

把上面的代码保存为HTML文件并打开
在浏览器中按F12打开开发者工具
点击"控制台"（Console）标签
结果：你会看到错误：Cannot read properties of null (reading 'appendChild')

原因：没有<body>标签时，document.body是null（空值）。当脚本在内容之前执行时，浏览器还没有创建body元素，所以无法访问document.body，导致报错。

正确的写法：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script>
        // 现在可以正常访问body了
        const div = document.createElement('div');
        div.textContent = '动态创建的内容';
        document.body.appendChild(div);  // 成功！
    </script>

    <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>

6. AI实战：使用AI搭建一个有趣的心情打卡页面

6.1 本节目标

我们将通过向AI提问（Prompt），让AI帮我们：

✅ 用HTML5做一个"今日心情打卡"页面
✅ 使用emoji表情选择心情
✅ 用HTML5的元素做有趣的交互（details折叠、progress进度条）
✅ 只需要非常少量的CSS和JavaScript，主要依赖HTML5！

💡 为什么这样设计？
让学习更有趣！用emoji和交互让页面"活起来"，同时学习HTML5的强大功能。

6.2 第一步：让AI生成一个心情打卡页面

📌 Prompt 1：创建一个心情打卡页面

"写一个HTML5页面，标题是'今日心情打卡'，包含：用radio按钮选择心情（开心😊、一般😐、不开心😞），一个文本框记录今天想说的话，一个提交按钮。使用HTML5语义化标签，用少量CSS让页面居中，emoji表情大一点。"

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>今日心情打卡</title>
    <style>
        body {
            text-align: center;
            font-family: '微软雅黑', Arial, sans-serif;
            margin-top: 50px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .mood-option {
            font-size: 40px;
            margin: 0 20px;
            cursor: pointer;
            display: inline-block;
        }
        input[type="radio"] {
            display: none;
        }
        input[type="radio"]:checked + label {
            transform: scale(1.3);
            transition: transform 0.3s;
        }
    </style>
</head>
<body>
    <header>
        <h1>📝 今日心情打卡</h1>
    </header>

    <main>
        <form>
            <section>
                <h2>今天的心情是？</h2>
                <div>
                    <input type="radio" id="happy" name="mood" value="happy">
                    <label for="happy" class="mood-option">😊</label>
                    
                    <input type="radio" id="neutral" name="mood" value="neutral">
                    <label for="neutral" class="mood-option">😐</label>
                    
                    <input type="radio" id="sad" name="mood" value="sad">
                    <label for="sad" class="mood-option">😞</label>
                </div>
            </section>

            <section>
                <label for="thoughts">今天想说的话：</label><br>
                <textarea id="thoughts" name="thoughts" rows="4" cols="40" 
                          placeholder="记录一下今天的心情吧..."></textarea>
            </section>

            <button type="submit">💾 保存</button>
        </form>
    </main>
</body>
</html>

🔧 运行方法：
1. 把代码保存为 mood.html
2. 双击文件，用浏览器打开
3. 点击emoji选择心情，看看效果！

HTML5特性说明：

type="radio"：单选按钮，选择心情
<textarea>：多行文本输入
少量CSS：让emoji点击时有放大效果（选中时变大）

6.3 第二步：让AI添加更多有趣的交互

📌 Prompt 2：添加进度条和折叠区域

"在页面中添加：一个progress进度条显示本月打卡天数（比如15/30天），一个details折叠区域显示'打卡记录'，里面列出最近几天的打卡记录。用emoji美化一下。"

✅ AI补充代码：

在表单后添加：

<section>
    <h2>📊 本月打卡进度</h2>
    <p>已打卡 <strong>15</strong> / <strong>30</strong> 天</p>
    <progress value="15" max="30">50%</progress>
</section>

<details>
    <summary>📋 查看打卡记录</summary>
    <ul style="text-align: left; max-width: 400px; margin: 0 auto;">
        <li>2025-01-15 😊 今天学习很充实！</li>
        <li>2025-01-14 😐 平平无奇的一天</li>
        <li>2025-01-13 😊 完成了项目很开心</li>
    </ul>
</details>

✅ HTML5新特性：
- <progress>：进度条（纯HTML，显示打卡进度）
- <details>和<summary>：可折叠的内容区域（点击展开/收起记录）

6.4 第三步：让AI添加简单的交互效果

📌 Prompt 3：添加简单的JavaScript交互

"添加一个简单的JavaScript，当选择不同心情时，在页面上显示对应的提示文字（比如选择开心显示'今天要加油哦！'）。用最少量的代码实现。"

✅ AI补充代码：

在</body>前添加：

<script>
    const radios = document.querySelectorAll('input[name="mood"]');
    const form = document.querySelector('form');
    
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            const messages = {
                'happy': '😊 今天要加油哦！',
                'neutral': '😐 放轻松，慢慢来',
                'sad': '😞 一切都会好起来的！'
            };
            
            // 移除旧的提示
            const oldMsg = document.querySelector('.mood-message');
            if (oldMsg) oldMsg.remove();
            
            // 添加新提示
            const msg = document.createElement('p');
            msg.className = 'mood-message';
            msg.textContent = messages[this.value];
            msg.style.fontSize = '20px';
            msg.style.color = '#333';
            form.insertBefore(msg, form.lastElementChild);
        });
    });
</script>

✅ 交互效果：
- 选择不同心情时，会自动显示对应的鼓励文字
- 用最少的JavaScript代码实现简单的交互

6.5 最终效果

你的页面现在有：

✅ emoji心情选择（点击有放大效果）
✅ 文本记录区域
✅ 打卡进度条（progress标签）
✅ 可折叠的打卡记录（details/summary）
✅ 选择心情时的自动提示（少量JavaScript）

测试方法：

点击不同的emoji → 选中的emoji会放大，同时显示鼓励文字
点击"查看打卡记录" → 内容会展开/收起
输入文字，点击保存 → 表单会提交（虽然只是演示）

6.6 本节收获

你已经学会了：

✅ 如何用 Prompt 让AI帮你写HTML代码
✅ HTML5的表单元素（radio、textarea）
✅ HTML5的特殊元素（progress、details/summary）
✅ 如何用少量CSS和JavaScript让页面更有趣
✅ 如何一步步迭代功能，像搭积木一样开发

🌟 记住：
HTML5本身就很强大，加上一点点CSS和JavaScript，就能做出有趣又实用的页面！
想法 → 写Prompt → AI生成 → 测试 → 调整 → 再提问
这就是现代开发者的"超能力"！

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

🔧 怎么打开F12？

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

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

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

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

小实验：

打开前面做的 mood.html
按 F12 → 点击【元素】（Elements）
在代码中找到 <h1>📝 今日心情打卡</h1>
双击文字，改成"📝 我的心情日记"
看看页面是不是立刻变了？

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

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

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

小实验：

打开 mood.html
按 F12 → 点【控制台】（Console）
在控制台输入：console.log("Hello World!")，按回车
你会看到输出：Hello World!
再试试：输入 2 + 3，按回车，会显示 5

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

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

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

小实验：

打开 mood.html
按 F12 → 点【网络】（Network）
刷新页面
你会看到文件被加载：
- mood.html（你的页面）
点这个文件，能看到它的大小、加载时间

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

4. 【应用】标签页 —— 查看网页存储的数据

作用：
👉 查看网页存储的各种数据（Cookie、本地存储等）
👉 清除存储的数据
👉 调试数据存储问题

4.1 Cookie（小饼干）

什么是Cookie？

Cookie就像网站的"小纸条"，服务器给你一个小纸条，你下次访问时带着这个纸条，服务器就知道你是谁了。

常见用途：

记住你的登录状态（比如"记住我"功能）
保存你的偏好设置（比如语言、主题）

在F12中查看Cookie：

按 F12 → 点击【应用】（Application）
左侧找到"Cookie" → 展开
点击网站地址，右侧会显示所有Cookie

小实验：

打开任意网站（如百度、淘宝）
按 F12 → 【应用】→ 【Cookie】
你会看到很多Cookie，比如用户名、登录token等

💡 通俗理解：Cookie就像餐厅的会员卡，你每次来，服务员（服务器）看到卡就知道你是谁。

4.2 LocalStorage（本地存储）

什么是LocalStorage？

LocalStorage是浏览器提供的"本地仓库"，网页可以把数据存在这里，即使关闭浏览器，数据也不会丢失。

常见用途：

保存用户的设置（比如深色模式开关）
保存草稿内容（比如写了一半的评论）

在F12中查看LocalStorage：

按 F12 → 【应用】→ 【本地存储】（Local Storage）
点击网站地址，右侧显示存储的键值对

小实验：

在控制台输入：localStorage.setItem('test', 'Hello')
按 F12 → 【应用】→ 【本地存储】
你会看到 test: Hello
在控制台输入：localStorage.getItem('test')，会显示 Hello

💡 通俗理解：LocalStorage就像你的"抽屉"，网页可以把东西放进去，下次打开还能拿出来。

4.3 IndexedDB（数据库）

什么是IndexedDB？

IndexedDB是浏览器提供的"数据库"，可以存储大量复杂数据（比LocalStorage强大）。

常见用途：

存储离线数据（比如离线地图）
存储大量用户数据（比如聊天记录）

在F12中查看IndexedDB：

按 F12 → 【应用】→ 【IndexedDB】
展开可以看到数据库和表结构

💡 通俗理解：IndexedDB就像"图书馆"，可以存储大量、复杂的数据，而且可以快速查找。

对比三种存储方式：

存储方式	容量	用途	类比
Cookie	很小（4KB）	登录状态、用户偏好	小纸条
LocalStorage	较大（5-10MB）	用户设置、草稿	抽屉
IndexedDB	很大（几百MB）	大量复杂数据	图书馆

5. 【网络】标签页高级用法 —— 监控网络请求

作用（补充）：
👉 监控网页发送的所有请求（不限于加载文件）
👉 查看请求的详细信息（请求头、响应内容等）
👉 调试API接口问题

查看API请求：

按 F12 → 点【网络】（Network）
在网页上操作（比如提交表单、点击按钮）
你会看到新的请求出现在列表中
点击某个请求，可以看到：
- 请求头：发送了什么信息
- 响应：服务器返回了什么数据
- 状态码：200（成功）、404（未找到）、500（服务器错误）等

状态码说明（常见）：

200：成功 ✅
404：找不到（比如文件不存在）❌
500：服务器出错了 ❌

小实验：

打开任意网站（如微博、知乎）
按 F12 → 【网络】
在网页上滚动、点击，观察网络请求
点击某个请求，查看详细信息

💡 通俗理解：网络标签页就像"监控摄像头"，记录网页和服务器之间的所有"对话"。

🌟 总结：F12五大功能

标签页	一句话用途	新手怎么用
元素	看和改HTML	改文字、学结构
控制台	看错误、运行JS	查错、打印信息
网络	看加载了啥、监控请求	查404、看速度、调试API
应用	查看存储的数据	看Cookie、LocalStorage

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

1. Web的发展

1.1 什么是Web？

1.2 Web的三个发展阶段

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

1.4 为什么学Web开发？（AI时代新机遇）

✅ 技术门槛降低，产品思维提前

✅ 不用等到大三，现在就能做出好应用

✅ 你比老师更懂"好用的网站"是什么样

2. Web开发技术发展

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

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

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

📚 MVC vs MVVM：架构对比

2.4 为什么前后端分离是现在的主流？

3. 现代Web技术栈组成

3.1 Web开发的四大核心

3.2 开发流程（简单版）

3.3 本课程技术栈选择

我们为什么选这些技术？

4. 开发环境配置（从零开始）

4.1 第一步：选择并安装代码编辑器

4.2 第二步：插件（可选，不装也可以）

4.3 第三步：写你的第一个网页（Hello World）

5. HTML5语义化标签

5.1 什么是HTML？

> 💡 记住：浏览器能容错，但好习惯更重要！

5.2 HTML5 是什么？

5.3 常用HTML5语义化标签

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

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

6. AI实战：使用AI搭建一个有趣的心情打卡页面

6.1 本节目标

6.2 第一步：让AI生成一个心情打卡页面

📌 Prompt 1：创建一个心情打卡页面

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

6.3 第二步：让AI添加更多有趣的交互

📌 Prompt 2：添加进度条和折叠区域

✅ AI补充代码：

6.4 第三步：让AI添加简单的交互效果

📌 Prompt 3：添加简单的JavaScript交互

✅ AI补充代码：

6.5 最终效果

6.6 本节收获

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

🔧 怎么打开F12？

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

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

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

4. 【应用】标签页 —— 查看网页存储的数据

4.1 Cookie（小饼干）

4.2 LocalStorage（本地存储）

4.3 IndexedDB（数据库）

5. 【网络】标签页高级用法 —— 监控网络请求

🌟 总结：F12五大功能

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