模块 2.1

认识你的电脑

文件、路径、编辑器

零到全栈 · 李勃老师 · 2026

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

很多人第一次学编程时卡住的，不是代码本身，而是：文件到底放在哪、路径是什么意思、该用什么软件打开代码。

FUNDAMENTALS

先建立三个基础概念

文件

具体的内容

一张图片、一段代码、一篇文档——这些都是文件。文件是被保存的内容本身。

文件夹

装文件的容器

文件夹不是内容，而是结构。一个项目，本质上就是一组放在同一个文件夹里的文件。

扩展名

文件类型的提示

.html 网页结构 .css 样式 .js 脚本 .png 图片。扩展名帮你分清文件是什么。

建议在系统设置中开启"显示文件扩展名"，避免看文件时产生混乱。

PATH

路径：这个文件放在哪里

一个项目文件夹

结构长这样

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

路径的含义

一层一层描述位置

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

路径就像地址。它不是随便写的一串字，而是在一层一层告诉你这个文件在哪里。

ABSOLUTE VS RELATIVE

两种路径，后面会反复遇到

绝对路径

从固定起点说完整位置

# macOS / Linux（从根目录 / 开始）
/Users/libo/Documents/course/index.html

# Windows（从盘符开始）
C:\Users\libo\Documents\course\index.html

# 家目录的简写：~
~/Documents/course/index.html

相对路径

从当前位置开始说

# 已经在 course/ 目录里，直接写：
index.html
./index.html       # ./ 表示当前目录
images/avatar.png  # 当前目录下的子路径

记住一句：绝对路径描述完整位置，相对路径描述相对当前的位置。

FILE VS SOFTWARE

文件是内容，软件是工具

.docx

文档文件

Word 是打开它的软件。文件存内容，软件做操作。

.mp3

音频文件

音乐播放器是打开它的软件。同一个文件，不同软件打开，体验不同。

.html

代码文件

代码编辑器是打开它的软件。浏览器是运行它的软件。两者都不是文件本身。

记住一句话：软件负责操作，文件负责承载内容，路径负责指路。

EDITOR

这门课用的代码编辑器：VS Code

VS Code

免费、跨平台、适合入门

擅长处理 .html .css .js .py .json .md 等各类代码文件。

入门阶段你只需要会：

打开整个项目文件夹
在左侧文件树里看文件结构
新建文件、修改并保存

code.visualstudio.com

COMMON PITFALLS

初学者最容易迷路的三种方式

以为自己在改 A 文件，实际上改的是 B 文件——因为有好几个名字相似的副本。

只关注文件名，没关注文件在哪个文件夹里。很多地方都可能有 index.html，重要的是它属于哪个项目。

只会双击打开单个文件，不会打开整个项目文件夹。开发需要看一组文件之间的关系，而不是只看单个文件。

HABITS

从这一节开始建立的习惯

给课程练习准备一个固定总文件夹，后面所有练习都放在这里

每次操作前先确认"我现在在哪个路径下"

少制造 final、final-2、final-real，用清晰的文件夹和固定文件名代替

用 VS Code 打开整个项目文件夹，而不只是双击打开单个文件

版本管理最终的答案是 Git——我们会在模块 3 正式引入它。

CHECKPOINT

学完这节，你至少应该能做到

能解释文件和文件夹的区别

能大致理解扩展名在帮助你识别文件类型

能分清"文件"和"软件"不是一回事

能用自己的话解释什么是路径

知道绝对路径和相对路径的基本区别

能用 VS Code 打开一个项目文件夹，并找到里面的文件

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

文件、文件夹、路径、编辑器。
这四件事搞清楚了，后面就顺了。

零到全栈 · 模块 2.1 完