本文是《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 当大号字"会被搜索引擎和读屏软件同时当外行。
参考资料