Skip to content

本地网页和线上网站有什么区别?

09-01 本地网页和线上网站有什么区别?

Section titled “09-01 本地网页和线上网站有什么区别?”

这一课进入「本地与线上发布」。前面学员已经做出了一个本地页面,也知道怎么修改、验收、写 README。现在要补上一个关键认知:电脑里能打开,和别人能打开,是两件事。

本课只解决一个问题:让学员看懂本地文件、本地服务、线上网站、公开链接之间的关系。讲清这个关系,后面的发布检查才有意义。

这一课的成果是一张「本地与线上对照卡」。

  • 能说清本地文件在自己电脑上。
  • 能说清线上网站在互联网服务上。
  • 能理解公开链接是别人访问作品的入口。
  • 能区分 file://、localhost 和 https:// 三类地址。
  • 能完成一张本地与线上对照卡。
  • 建议时长:18 到 25 分钟。
  • 开场直接展示两个窗口:一个本地 HTML 文件,一个公开网页链接。
  • 全程用“工坊样品”和“橱窗展品”的比喻。
  • 技术名词出现后,马上让学员看到浏览器地址栏。
  • 本课只讲认知和对比,发布动作留到 9.3。
  • 一个已经能打开的本地 HTML 页面。
  • 一个任意公开网站链接,用来对比地址栏。
  • 浏览器。
  • 项目 README 或工作日志。

可以这样开场:

“到这一课,你已经在自己的电脑里做出了一个小作品。这个作品就像放在工坊桌面上的木头小摆件,你看得到,摸得到,也能继续打磨。接下来会出现一个新问题:我怎么把它摆到窗前,让别人也能看到?”

先打开本地 HTML 文件,让学员看浏览器地址栏。

如果地址栏里是 file:// 开头,说明浏览器正在读取电脑里的某个文件。这个页面只在自己的电脑上存在。你把这个地址发给朋友,朋友打开时会找他电脑里的同一个路径,通常会打不开。

接着打开本地服务页面。很多工作台项目会出现 localhost:3000、127.0.0.1:5173 这样的地址。这里的 localhost 可以理解为“我这台电脑自己”。它适合调试,适合自己检查,适合让 AI 根据运行反馈继续修改。

最后打开一个公开链接,比如 https://example.com。https:// 后面接域名,这类地址通常可以发给别人。别人打开时,浏览器会去互联网服务上拿页面。

这一节要把三种地址讲清:

  • file://:直接打开电脑里的文件。
  • localhost:自己电脑上临时跑起来的服务。
  • https://:互联网公开入口。

可以用这个比喻帮助学员记住:

本地文件像工坊里的样品,只有你在工坊里能看到。localhost 像你把样品放在工坊门口试摆,方便自己来回调试。线上网站像你把作品摆进临街橱窗,有门牌号,别人按门牌号就能找到。

这里要安抚学员:

“电脑里能打开,已经是很大的进步。发布只是给作品加一个公开门牌号。先把本地作品做好,再考虑摆到窗前。”

最后带出本课成果:

“我们今天先完成一张对照卡。以后看到地址栏,你就能判断:这个作品现在是在自己电脑里,还是已经站到了互联网的街边。”

  1. 打开项目文件夹里的 index.html。
  2. 让学员看浏览器地址栏里的 file://。
  3. 说明这个地址只指向本机文件。
  4. 打开一个本地服务地址,例如 localhost:3000。
  5. 说明这是自己电脑临时运行的服务。
  6. 打开一个公开网站,观察 https:// 和域名。
  7. 在工作日志里写下三类地址的区别。
  8. 保存「本地与线上对照卡」。
我正在学习本地网页和线上网站的区别。
请根据我提供的浏览器地址,帮我判断它属于哪一类:
1. 本地文件
2. 本地服务
3. 公开网站
请用大白话解释这个地址意味着什么,并告诉我它能不能直接发给别人访问。
  • 我当前打开的地址:
  • 它属于:本地文件 / 本地服务 / 公开网站
  • 这个地址能否直接发给别人:
  • 原因:
  • 下一步需要做什么:

让学员分别找三个地址:

  • 一个自己电脑里的文件地址。
  • 一个本地项目运行地址。
  • 一个互联网上的公开链接。

每个地址填一张对照卡。

  • 学员把浏览器能打开等同于别人也能打开:让他看地址栏开头。
  • 学员看到 localhost 以为已经发布:说明 localhost 指向自己的电脑。
  • 学员发本地文件路径给别人:让 AI 判断这个路径为什么只在本机有效。
  • 学员分不清文件和项目:用“单张纸”和“一整个文件夹”来讲。

打开自己的第一个本地页面,填写一张本地与线上对照卡。

提交内容:

  • 浏览器地址栏截图。
  • 对照卡。
  • 一句话总结:我的作品现在处在哪个位置。
  • 第 1 页:本地能打开,别人还需要入口
  • 第 2 页:三种地址:file://、localhost、https://
  • 第 3 页:工坊样品、试摆门口、临街橱窗
  • 第 4 页:地址栏判断练习
  • 第 5 页:本地与线上对照卡