第3课：电脑、互联网和网站最基础的工作方式

学习目标

• 理解本地电脑、服务器、域名、IP、DNS的基本关系
• 知道浏览器访问网站时发生了什么
• 理解HTTP与HTTPS的基本差别

正文

1. 一个网站到底放在哪里？

你现在打开一个网页，看起来只是浏览器里的一张页面。

但它背后通常至少有三部分：

你的设备 → 手机或电脑

互联网 → 把你的请求送出去

服务器 → 接收请求并返回内容

如果网站只运行在你的电脑上，而你的电脑关机，其他人通常就不能继续访问。

所以正式网站一般会部署在持续联网的服务器上。

2. 什么是服务器？

Server = 服务器。

它本质上仍然是计算机。

区别是：

它通常长期运行、长期联网，并专门向其他计算机提供服务。

例如：

• 返回网页；
• 接收用户登录；
• 保存项目；
• 调用AI模型；
• 提供API；

-处理文件。

你自己电脑也可以临时当服务器。

但正式业务通常会使用云服务器。

3. 本地开发和正式上线有什么区别？

开发网站时，程序员经常在自己的电脑上运行：

localhost

这里的意思相当于：

“就在我这台电脑上。”

这种环境适合开发和调试。

但外部用户不能把你的电脑当成稳定网站使用。

正式上线时，通常会把程序放到云服务器：

开发电脑 → Git代码 → 云服务器 → 互联网用户访问

所以：

本地能打开 不等于 网站已经正式上线。

4. IP地址是什么？

网络上的设备需要能够互相找到。

可以把 IP 地址理解成：

网络中的地址。

类似现实世界里的门牌号。

但纯数字地址不方便记。

所以才有域名。

5. 域名是什么？

例如：

example.com

这种更容易记的名字就是域名。

域名本身不是网站内容，也不是服务器。

它更像一个“容易记的名称”。

真正访问时，还需要知道：

这个名称对应哪台服务器？

这就是DNS的工作。

6. DNS 是什么？

DNS = Domain Name System = 域名系统

可以把DNS理解成互联网里的地址簿。

用户输入：

www.example.com

DNS帮助找到对应的IP地址。

然后浏览器才知道应该连接哪台服务器。

流程：

输入域名 → DNS解析 → 找到IP → 连接服务器

7. 浏览器连接服务器后发生什么？

假设用户打开超飞越AI网站。

可以简单理解成：

浏览器说：

“请把首页给我。”

服务器收到请求后：

“这是首页。”

然后返回网页内容。

浏览器再把HTML、CSS、JavaScript等内容组合起来显示。

所以你看到的是页面。

背后发生的是一次网络请求和响应。

8. HTTP 是什么？

HTTP = HyperText Transfer Protocol

它是一套通信规则。

可以把它理解成：

浏览器和服务器之间约定好的“说话格式”。

例如浏览器会告诉服务器：

• 我要哪个页面；
• 我要提交什么数据；
• 我是谁；
• 我接受什么格式。

服务器也按照规则返回：

• 成功；

-失败； -数据； -网页； -错误信息。

9. HTTPS为什么更重要？

HTTPS = HTTP + 安全传输机制

它主要增加两件事情：

加密

别人更难直接看到传输内容。

身份验证

浏览器可以验证正在访问的网站证书是否匹配。

正式网站一般应该使用HTTPS。

因此你会看到网址常常以：

https://

开头。

10. HTML、CSS、JavaScript分别做什么？

可以用“房子”来比喻。

HTML = 房子的结构

决定：

• 有几个房间；

-哪里有门； -哪里有窗。

在网页里对应： -标题； -段落； -按钮； -图片； -表格。

CSS = 装修

决定： -颜色； -字体； -间距； -布局； -动画效果。

JavaScript = 电器和控制系统

决定： -点击按钮发生什么； -搜索怎么筛选； -表单怎么提交； -课程小测怎么判断答案。

三者组合起来，才形成你看到和使用的网页。

11. 静态网站和动态网站

静态网站

页面内容提前准备好。

用户访问时直接返回文件。

适合： -公司介绍； -课程内容； -帮助文档； -产品说明。

你目前看到的超飞越AI原型，主要就是静态网站。

动态网站

不同用户看到的内容可能不同。

例如： -登录后显示你的账户； -显示你的学习进度； -保存你的项目； -显示你的订单； -运行CampusAI工作区。

这通常需要后端和数据库。

12. 前端和后端在网站里怎样配合？

前端负责：

用户看到和操作的内容。

后端负责：

真正处理业务。

例如用户点击：

“申请CampusAI内测”

前端收集： 姓名、联系方式、身份、用途。

然后通过API发送给后端。

后端： -检查数据； -保存申请； -返回结果。

前端再显示：

“提交成功。”

所以一次简单点击，背后可能经过很多步骤。

13. 一个AI网站比普通网站多了什么？

普通网站流程：

用户 → 前端 → 后端 → 数据库

AI网站可能变成：

用户 → 前端 → 后端 → 知识库 → 模型API → AI模型 → 后端保存结果 → 前端显示

如果加入Agent，还可能继续：

任务分析 → Research Agent → Writing Agent → Review Agent → 项目结果

这就是为什么AI产品的结构比“一个聊天框”复杂。

14. 域名、服务器、程序是三件不同的东西

这是初学者非常容易混淆的地方。

域名

“叫什么名字”

服务器

“程序运行在哪里”

网站程序

“网站本身做什么”

比如：

域名： chaofeiyue.cn

服务器： 腾讯云上的一台机器

程序： 超飞越AI网站

三者可以分别购买、配置和更换。

15. 从你按回车开始，完整走一遍

假设你输入一个网址：

第一步 浏览器读取域名。

第二步 DNS找到IP地址。

第三步 浏览器通过HTTPS连接服务器。

第四步 服务器返回网页。

第五步 浏览器解析HTML。

第六步 加载CSS。

第七步 运行JavaScript。

第八步 页面显示。

如果你再点击：

“进入AI学习中心”

浏览器又会发起新的访问。

16. 本课总结

学完这一课，你应该能画出：

用户 → 域名 → DNS → IP → 服务器 → HTML/CSS/JS → 浏览器显示页面

并且能够解释：

为什么“买了域名”不等于“网站已经做好”。

如果这个流程你已经能用自己的话讲出来，后面学习服务器部署、前后端和API时就会容易很多。

示例

常见误区

• “买了域名就等于有网站。”——还需要服务器、程序、解析和部署。
• “服务器一定是一台摆在办公室里的机器。”——云服务器也属于服务器。
• “HTTPS只是网址前多了个s。”——它增加了加密与身份验证。

小测验

点击题目查看答案。

实践任务