认识 Web 前端与浏览器

我们每天使用的网页都运行在浏览器中。页面显示什么、按钮点击后怎样变化、表单如何收集数据，主要由前端代码负责。

本课程从零开始学习浏览器这一端：使用 HTML 编写页面结构，使用 CSS 调整页面样式，使用 JavaScript 处理数据和交互。页面需要业务数据时，再向 Web API 发请求。

一个管理后台是怎样工作的

以学员信息管理页面为例：

1. 浏览器加载 HTML、CSS 和 JavaScript 文件。
2. JavaScript 请求 /api/students。
3. Web API 返回 JSON 数据。
4. JavaScript 将数据转换成页面内容。
5. 用户可以继续搜索、编辑或删除学员。

这个流程中，各部分负责不同工作：

• HTML：页面有哪些内容，例如标题、表格、输入框和按钮。
• CSS：内容怎样排列和显示，例如侧边栏宽度、表单间距和颜色。
• JavaScript：数据怎样处理、用户操作后做什么。
• Web API：向页面提供业务数据。

本课程使用的技术

技术	用途
HTML	编写页面结构和表单
CSS	编写布局和基础样式
JavaScript	操作页面、处理事件、调用接口
浏览器 Web API	使用 DOM、存储和网络请求能力
代码类 AI	辅助拆需求、生成局部代码、解释错误和检查结果

浏览器负责运行本课程的最终页面。课程提供一个由 FastAPI 实现的测试 API，学员只需要启动和调用，不要求掌握 Python 或后端代码。完成本课后，可以继续学习 FastAPI，也可以衔接其他后端或前端方向。

学习路线

HTML 页面结构
  ↓
CSS 样式与布局
  ↓
JavaScript 数据处理
  ↓
DOM、事件与 Web API
  ↓
借助 AI 完成原生前端任务

课程不会要求脱离 AI 默写所有语法。学习重点是能说明需求、读懂关键代码、运行页面、观察错误并判断结果是否符合验收标准。

开发工具

准备 Chrome 或 Edge 浏览器，以及 VS Code、PyCharm 等代码编辑器。下一节会从项目目录、文件扩展名、终端和 AI 提问方式开始，不要求已有编程经验。

浏览器开发者工具会频繁使用：

• Elements：查看页面结构和样式。
• Console：查看 JavaScript 输出和错误。
• Network：查看资源和 API 请求。

小结

1. 前端代码运行在浏览器中，负责页面结构、视觉和交互。
2. Web API 为页面提供数据，后端实现不属于本课程主线。
3. 学习路线从 HTML 逐步进入 JavaScript 与浏览器 API。
4. AI 可以参与所有任务，但每次输出都要经过本地运行和验收。