模块 2.1：认识你的电脑

零到全栈
April 11, 2026

Table of Contents

你当然会用电脑，但“会用软件”和“会在电脑里工作”，不是一回事。

很多人第一次学编程时，卡住的并不是代码本身，而是这些问题：

文件到底放在哪
文件夹和路径是什么关系
为什么别人说“路径”，自己脑子里没有画面
代码文件该用什么打开
为什么电脑总是报错说找不到文件

所以这一节我们也只做一件事：

先建立最基本的电脑工作直觉。

如果这一节建立起来了，后面学终端、写网页、用 Git，都会顺很多。

先分清文件和文件夹

最基本的两个词：

文件
文件夹

文件是“具体内容”。

比如：

一张图片是文件
一个视频是文件
一篇文档是文件
一段代码也是文件

文件夹不是内容本身，而是装这些内容的容器。

比如你会看到这样的结构：

我的第一个网站/
├── avatar.png
├── index.html
├── script.js
└── style.css

这里 我的第一个网站 是文件夹，里面那几个都是文件。

后面你会越来越频繁地看到这种结构，因为一个项目本质上就是：

一组放在同一个文件夹里的文件。

什么是扩展名

文件名后面经常会有一个点：

index.html
style.css
script.js
notes.md
photo.png

点后面的那一部分，通常叫扩展名。

入门阶段你可以先把它理解成：

它在提醒你，这大概是什么类型的文件。

例如：

.mp3 是一种音频文件
.png 是一种图片文件
.html 是代码文件，常见于网页结构文件
.css 是代码文件，常见于样式文件
.js 是代码文件，常见于前端脚本文件

这一节不需要死记，但你要开始习惯看扩展名。

因为它会直接帮助你分清：

哪些是代码文件
哪些是图片
哪些是说明文档

请注意，默认情况下，Windows 和 macOS 都可能把常见扩展名隐藏掉。

所以我建议你尽量让系统显示扩展名。这样你看文件时，不容易糊涂。

什么是路径

如果说文件回答的是“这是什么”，那么路径回答的就是：

这东西放在哪里。

比如你有这样一个文件：

课程练习/模块3/第一个网页/index.html

它的意思是：

有一个叫 课程练习 的文件夹
里面有一个叫 模块3 的文件夹
里面又有一个叫 第一个网页 的文件夹
最里面有一个叫 index.html 的文件

这整串位置描述，就是路径。

你可以把路径理解成地址。它不是随便写的一串字，而是在一层一层描述文件的位置。

绝对路径和相对路径

后面你会反复遇到两种路径：

绝对路径
相对路径

绝对路径

绝对路径就是：

从一个固定起点开始，把完整位置说清楚。

在 macOS 或 Linux 上，常见写法像这样：

/Users/libo/Documents/course/index.html

在 Windows 上，常见写法像这样：

C:\Users\libo\Documents\course\index.html

它们长得不一样，但本质一样：

这个文件在整台电脑里的完整位置。

根目录

既然绝对路径要从一个固定起点开始说，那这个起点本身也值得认识一下。

在 macOS 和 Linux 里，这个最外层起点常常写成：

它叫：

根目录。

你可以先把它理解成整套路径系统的最外层。

所以像这样的路径：

/Users/libo/Documents/course/index.html

最前面的 /，就在表示：

我要从整个系统的最外层开始说这个文件的位置。

在 Windows 里，常见写法不是 /，而是从某个盘符的根目录开始，比如：

C:\

也就是说，在不同系统里，绝对路径的写法不完全一样，但它们都在表达同一件事：

从一个固定起点开始，把位置完整说清楚。

相对路径

相对路径就是：

不从整台电脑开始说，而是从“你当前所在的位置”开始说。

比如你已经在 course 这个文件夹里，那你可以直接写：

index.html

或者：

images/avatar.png

相对路径的最前面也可以写 ./，它的意思是“当前路径”，所以上面这两个相对路径还可以写做：

./index.html

或者：

./images/avatar.png

家目录是什么

除了根目录之外，还有一个后面会高频遇到的位置，叫：

家目录。

家目录可以先理解成：

你这个用户自己的默认目录。

在 macOS 上，它常常长这样：

/Users/(你的名字)

假设你叫 libo，那么它就是：

/Users/libo

在 Linux 上，它常常长这样：

/home/libo

后面到了终端里，你还会经常看到一个符号：

它通常就是家目录的简写。

所以你现在先建立一个感觉就够了：

你可以先记一个最够用的判断：

绝对路径：描述完整位置
相对路径：描述相对当前位置的位置

为什么后面你会反复遇到路径

路径不是这一节学完就结束了。后面很多地方都会用到它：

用编辑器打开项目文件夹时，你在处理路径
在终端里进入某个目录时，你在处理路径
网页里引用一张图片时，你在处理路径
Git 管理哪些文件时，你也在处理路径

所以它不是附属知识，而是很多后续操作的共同底层。

文件和软件，不是一回事

这里再分清另一组很容易混在一起的概念：

文件
软件

文件是被保存的内容。

软件是打开、查看、编辑、处理这些内容的工具。

比如：

.docx 是文件，Word 是软件
.mp3 是文件，QuickTime Player、QQ音乐播放器这类是软件
.png 是文件，图片查看器或图片编辑器是软件

不是所有软件都能处理所有文件。

你先记住一句就够了：

软件负责操作，文件负责承载内容，路径负责指路。

那代码文件该用什么打开

后面我们会接触到：

.html
.css
.js

这些也都是文件，它们就是代码文件，而打开和编辑这类代码文件的软件，通常叫：

代码编辑器。

这类软件有很多种，这门课里我们先用最常见、也比较适合入门的一种：

VS Code

VS Code 不是文件，它是软件。

它比较擅长处理：

代码文件
文本文件
配置文件
Markdown 文档

例如：

.html
.css
.js
.ts
.json
.md
.py

这一节你不用研究编辑器的全部功能，只需要先把它当成后面课程的工作台。

开始安装并认识 VS Code

到这里，VS Code 已经出现了。

VS Code 是一个免费的代码编辑器软件，你可以在 VS Code 的官网下载并安装它：https://code.visualstudio.com

入门阶段，你对 VS Code 的要求其实很低。你只需要会：

打开一个文件夹
在左侧文件树里看到文件结构
新建文件
打开一个文件
修改并保存文件
能看懂自己当前正在编辑哪个文件

你可以在 B 站观看我的 VS Code 安装和使用课程。

这一节最容易迷路的地方是什么

初学者在这里最常见的迷路方式，通常有下面几种。

以为自己在改 A 文件，实际上改的是 B 文件

这很常见，因为电脑里可能会有多个名字很像的文件夹：

course
course-new
course-final
course-final-2

结果你以为自己改的是项目文件，实际上改的是另一个副本。

只关注“文件名”，没有关注“文件在哪个文件夹里”

只知道有一个 index.html 不够，因为很多地方都可能有 index.html。

真正重要的是：

这个文件属于哪个项目文件夹。

只会双击打开文件，不会打开整个项目文件夹

开发不是只看单个文件，而是经常要同时理解一组文件之间的关系。

所以比“打开一个文件”更重要的是：

打开整个项目文件夹。

代码之间往往是相互引用和关联的，打开整个项目文件夹才能真正看到项目结构。

这一节最应该建立的工作习惯

从这一节开始，尽量建立几个很简单但很重要的习惯。

给课程练习准备一个固定总文件夹

比如：

zero-to-tech
李勃老师的课程练习
fullstack-learning

名字不重要，重要的是固定。

后面所有练习尽量都放在这个总文件夹下面，这样不容易越学越乱。

每次先确认“我现在在哪个文件夹里/在哪个路径下”

不管你是用编辑器，还是后面用终端，都尽量先问自己一句：

我现在操作的是哪个位置？

这句话后面会非常有用。

少制造很多“最终版”“最终版2”“最终版3”

初学阶段很容易这样保存：

index-final.html
index-final-2.html
index-final-real.html

短期像在保底，长期很容易把自己绕晕。

更稳的方式是：

用清晰的文件夹组织内容
用固定文件名
用 Git 管理版本

这也是为什么模块 3 会专门引入 Git。

这节课结束时，你至少应该做到什么

学完这一节，你至少应该做到下面几件事：

能解释文件和文件夹的区别
能大致理解扩展名在帮助你识别文件类型
能分清“文件”和“软件”不是一回事
能用自己的话解释什么是路径
知道绝对路径和相对路径的基本区别
能用 VS Code 打开一个项目文件夹，并找到里面的文件

如果这些你已经具备了，那下一节进入终端时，你就不会觉得自己是在面对一团完全陌生的黑盒。

← 返回模块 2 | 下一节：模块 2.2 认识终端 →