Day 10 | 工欲善其事:VS Code 配置与项目归档

本文是《100天精通HTML基础入门》专栏第 10 篇,订阅专栏不迷路。

本文目录

今天你会得到什么
项目结构:一个根文件夹管全部
四步归档:从散文件到规范项目
路径找不到,差一个文件夹名

今天你会得到什么

今天结束时,你会装好 VS Code 和 Live Server 插件(保存即刷新),并把前 9 天的文件归档成规范的项目结构------从此告别"桌面上 20 个 html 文件"的混乱状态。

项目结构:一个根文件夹管全部

前 9 天我们一直用记事本加双击打开,那是让你看清本质的"手动挡"。从今天起换"自动挡":VS Code + Live Server。

Live Server 做的事只有一件:你按 Ctrl+S,浏览器自动刷新。不用切窗口、不用按 F5,写一行看一行,反馈速度提升十倍。

项目结构也需要归档。九天下来你大概有好几个 html 文件散落在各处,加上 Day 09 的 images 文件夹,该整理了:

四步归档:从散文件到规范项目

第一步:装 VS Code 和 Live Server

去 code.visualstudio.com 下载安装,打开后点左侧第五个图标(四个方块),搜 Live Server,点 Install。装完底部状态栏会出现 "Go Live" 字样。

第二步:归档项目结构

在 D:\ 下建 我的网页 文件夹(如果已有就整理),把前 9 天的 html 文件全挪进去,建一个 images 子文件夹放图片。首页改名为 index.html。

第三步:用 Live Server 跑起来

在 VS Code 里打开 我的网页 文件夹(文件 → 打开文件夹),右键 index.html → Open with Live Server。浏览器自动打开。现在改一行代码按 Ctrl+S,浏览器 0.5 秒内自动刷新。

第四步:写一个规范的 about 页面

Plaintext 复制代码

<!-- 《100天精通HTML基础入门》Day 10 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我</title>
  <style>
    body { max-width: 640px; margin: 40px auto; padding: 0 20px;
      font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef; color: #24292f; line-height: 1.75; }
    h1 { color: #2563eb; border-bottom: 3px solid #ffd166; padding-bottom: 8px; }
    .avatar { width: 96px; height: 96px; border-radius: 50%;
      object-fit: cover; border: 3px solid #ffd166; }
    nav { margin-top: 20px; }
    nav a { color: #2563eb; text-decoration: none; margin-right: 14px; }
    nav a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <img src="images/avatar.jpg" alt="平头哥的头像" class="avatar">
  <h1>关于我</h1>
  <p>正在用 100 天从零学前端,这是第 10 天。项目文件夹终于归档了。</p>
  <nav>
    <a href="index.html">← 回首页</a>
  </nav>
</body>
</html>

注意 nav a 里的 href="index.html" ------ 相对路径,同目录直接写文件名。Day 09 讲的路径规则在这里用上了。

路径找不到,差一个文件夹名

最容易犯的:把图片放在和 html 不同级的位置,然后用拍脑袋的路径去找。

Plaintext 复制代码

<!-- 《100天精通HTML基础入门》Day 10 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>路径找不到</title>
  <style>
    body { max-width: 640px; margin: 40px auto; padding: 0 20px;
      font-family: "Microsoft YaHei", sans-serif; background: #fff; color: #24292f; }
    .bar { background: #fff3e0; border: 1px solid #e3e0d8; border-radius: 6px;
      padding: 8px 14px; font-size: 14px; color: #8a3a28; margin-bottom: 22px; }
    .card { background: #fff; border: 2px dashed #d9480f; border-radius: 12px;
      padding: 20px; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    .note { font-size: 13px; color: #8a3a28; margin-top: 14px; }
  </style>
</head>
<body>
  <div class="bar">html 在根文件夹,图片在 images 文件夹 ------ 但 src 写的是同目录</div>
  <div class="card">
    <!-- 错:图片在 images/avatar.jpg,但 src 写的没有 images/ 前缀 -->
    <img src="avatar.jpg" alt="头像" style="width:96px;border-radius:50%;">
    <p class="note">碎图标。浏览器在 html 同级找 avatar.jpg,找不到 ------
      图片在 images/avatar.jpg,差一个文件夹名。</p>
  </div>
</body>
</html>

修复:src 改为 images/avatar.jpg。排查动作不变:碎图标右键 → 新标签页打开 → 看地址栏差在哪。

留个作业

把你的项目文件夹按今天的结构归档:首页改名 index.html、图片全进 images/。然后用 Live Server 打开,做三个实验。第一,改一行文字按 Ctrl+S,看浏览器自动刷新。第二,故意把一张图片改名,看碎图标和 alt 兜底。第三,在 about.html 里加一个 img 标签,src 用 images/avatar.jpg,确认跨页面共用同一张图没问题。

明天讲什么

Day 11 讲标题层级:h1 到 h6 不是字号,是内容的从属关系。一个页面只放一个 h1、h1 到 h3 不能跳级、以及"把 h1 当大号字"会被搜索引擎和读屏软件同时当外行。

参考资料