HTML 文件路径
你已经能写出带标题、段落和注释的页面了。真正的网站很少只活在单个文件里。图片、其他页面、样式表和脚本放在 HTML 旁边的文件夹中——而 HTML 必须正确指向它们。这些指针就是文件路径。如果路径写错，文件可能确实在磁盘上，浏览器却仍显示裂图或失效链接。掌握路径是早期 HTML 最实用的技能之一：没有它，“看起来正确”的标记会无缘无故地失效。
什么是文件路径？
文件路径是浏览器用来获取另一个文件的地址。你通常把它写在 src（图片、脚本、媒体）和 href（链接、样式表及许多相关资源）这类属性里。路径不是装饰。它是一条指令：“到这里找。”指令错了，即使标记标签看起来完全正确，请求也会失败。把路径想成地图：它告诉浏览器要穿过哪些文件夹，并在路线末端打开哪个文件名。
直接回答
当目标文件与项目文件夹一起移动时，使用相对路径——例如从同一父文件夹中的页面写 images/logo.png，或从更深一层的页面写 ../images/logo.png。当站点已托管、且每个页面都应共享从站点根目录出发的同一稳定路径时，使用以 / 开头的根绝对路径。当文件位于另一主机或 CDN 上时，使用完整 URL（https://…）。初学者应先掌握相对路径，因为本地练习文件夹依赖它们。等文件夹树清晰后，根路径与 URL 会变成有意识的选择，而不是令人困惑的捷径。
相对与绝对一览
📊 路径类型对比
| 类型 | 起点 | 示例 | 最适合何时 |
|---|---|---|---|
| 相对 | 当前 HTML 文件的文件夹 | images/photo.jpg | 项目文件在文件夹中一起移动 |
| 根绝对 | 网站根目录 | /images/photo.jpg | 同一托管站点上的许多页面需要一条稳定路径 |
| 完整 URL | 协议 + 域名 | https://cdn.example.com/a.png | 文件在另一主机或 CDN 上 |
一个小型项目地图
想象一个名为 project 的文件夹。里面有：
index.html（首页）about.html（与首页同一文件夹）- 含有
logo.png的images文件夹 - 含有
contact.html的pages文件夹
重要习惯是：在写src或href之前，始终先问自己正在编辑哪个 HTML 文件。 同一张图片从不同页面出发需要不同的相对路径。若先改index.html再改contact.html却不重新想起点，很容易复制别处曾有效的路径并弄坏图片。始终从当前文件在树中的位置出发。
从项目文件夹出发的相对路径
从 index.html 或 about.html 看，images 和 pages 是子文件夹。到达它们不需要 ../。浏览器从当前 HTML 所在文件夹开始，按你写下的每一段名称逐级进入。
从 index.html 出发的相对路径
html<img src="images/logo.png" alt="网站徽标">
<a href="pages/contact.html">联系</a>
<a href="about.html">关于</a>为什么这些值有效
images/logo.png表示“进入此 HTML 文件旁的images文件夹，然后打开logo.png”pages/contact.html表示“进入pages，然后打开contact.html”about.html表示“与当前页面同一文件夹中的另一个文件”alt文本不是路径；它是图片无法显示时的无访问文本
若浏览器中看不到徽标，请检查拼写、真实文件夹名，以及你是否把 HTML 保存在自己以为的那个文件夹里。多余空格、大小写不一致，或保存到真实项目旁的“副本”文件夹，都是常见原因。也请确认图片文件扩展名与属性中所写完全一致。
从子文件夹出发的相对路径
contact.html 位于 pages/ 内。从那里看，images/ 不是 pages/ 的子文件夹。它与 pages/ 并列，同在 project/ 下。你必须用 ../ 上移一层，再进入 images/。没有这一步上移，浏览器会在 pages 内寻找 images 文件夹，而这张地图里并不存在。
从 pages/contact.html 出发的相对路径
html<img src="../images/logo.png" alt="网站徽标">
<a href="../index.html">首页</a>
<a href="../about.html">关于</a>如何阅读 ../
../表示“上移到父文件夹”../images/logo.png表示“上移到project/，再进入images/logo.png”../index.html表示“上移到project/，再打开index.html”- 从
contact.html写images/logo.png会去找pages/images/logo.png，而这张地图里没有它
单单这一个错误——从子文件夹忘记../——造成了初学者项目中很大一部分“裂图”报告。你可以写../../上移两层，但只有文件夹树真正需要时才这样做。每一个多余的../都会改变目标；../太多同样会弄坏路径。
根绝对路径与完整 URL
根绝对路径以 / 开头，在真实 Web 服务器上从站点根目录解析，而不是从当前文件夹。完整 URL 包含协议和域名。完整 URL 对第三方文件很常见。当托管站点上的许多页面需要共享一条稳定路径（与各页面所在文件夹深度无关）时，根绝对路径很有用。
根路径与完整 URL
html<img src="/images/logo.png" alt="网站徽标">
<img src="https://example.com/images/logo.png" alt="网站徽标">
<link rel="stylesheet" href="/styles/main.css">本地文件与托管根目录
当你直接从磁盘打开 HTML（file://…）时，往往没有真正的网站根。像 /images/logo.png 这样的路径，可能不会像在服务器上那样与你电脑上的文件夹对应。对初学者的本地练习，请优先使用与实际文件夹匹配的相对路径。站点托管之后，根绝对路径在页面之间会更可靠。简言之：磁盘上的练习文件夹用相对路径；托管模型需要时再用根路径或 URL。
练习：根据文件夹地图写路径
文件夹 shop 包含：
home.html- 含有
hero.jpg的assets文件夹 - 含有
faq.html的help文件夹
在编辑器中完成：
- 在
home.html中添加一个用相对路径加载hero.jpg的img。 - 在
help/faq.html中添加一个用../加载同一文件的img。 - 从
faq.html添加一条回到home.html的相对链接。 - 在浏览器中打开两个页面，确认图片与链接都正常。
- 故意弄坏一条路径，刷新，观察失败，再修好——这种反馈比只读文字更快训练你的眼力。
此地图期望的相对答案：从home.html为assets/hero.jpg；从faq.html为../assets/hero.jpg与../home.html。若图片在一页出现、在另一页失败，问题几乎肯定是相对起点，而不是hero.jpg文件本身。
会弄坏页面的路径错误
- 从子文件夹写
images/logo.png，而正确路径需要../images/logo.png - 拼错文件或文件夹名，或在把
Logo.PNG与logo.png视为不同文件的主机上大小写不一致 - 在 Web 路径中使用 Windows 的
\——HTML 属性中请优先用/ - 在普通网页的
src或href中放入C:\site\img.png这类磁盘路径 - 把根路径
/images/...复制到仅以本地文件方式打开的项目中，却假定它会像托管站点一样工作 - 链接到
contact.html，而文件实际在pages/contact.html - 在资源管理器/Finder 中移动文件夹后，忘记更新所有指向旧布局的路径
这些错误每一种都产生相同的外部症状：请求失败。修复总是从定位你正在编辑的 HTML 文件、并从该文件夹重新数清路径开始。
小结
- 文件路径告诉浏览器，
src、href及类似属性所链接的文件在哪里 - 相对路径从当前 HTML 文件所在文件夹解析
../在相对路径中上移一层；当目标在当前文件之上时使用它- 根绝对路径以
/开头；完整 URL 包含协议与域名 - 让路径风格匹配你的布局：本地项目练习用相对路径，托管模型需要时用根路径/URL
- 错误路径是图片与链接“莫名”失败的最常见原因之一
- 始终根据你正在编辑的文件决定路径，而不是凭另一页的记忆
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部