【H5 前端开发笔记】第 04 期：HTML超文本标记语言 相对路径 和 绝对路径 详解

【H5 前端开发笔记】第 04 期：HTML 相对路径 和 绝对路径 详解
（2026 最新版 · 实战导向 · 可直接作为学习笔记）

一、为什么一定要学路径？

在 HTML 中，我们经常需要引用外部文件，比如：

• 插入图片 <img src="...">
• 跳转页面 <a href="...">
• 引入 CSS <link href="...">
• 引入 JS <script src="...">

这些文件的位置就是通过路径来描述的。路径写错是前端新人最常见的错误之一，学好路径能大幅减少调试时间。

二、两种路径的核心概念

三、绝对路径详解

1. 两种写法

<!-- 1. 网络绝对路径（最常见） -->
<img src="https://www.example.com/images/logo.png" alt="logo">
<a href="https://github.com">去 GitHub</a>

<!-- 2. 本地磁盘绝对路径（几乎不用，仅本地测试） -->
<img src="C:/Users/张三/project/images/photo.jpg" alt="照片">

2. 特点

• 优点：不管当前文件在哪里，都能准确找到目标
• 缺点：移植性差（换电脑、部署到服务器后容易失效）
• 生产环境中主要用于引用外部 CDN 或第三方资源

四、相对路径详解（重点掌握）

相对路径以当前 HTML 文件所在位置为起点，使用 . 和 .. 来定位。

1. 相对路径三种核心写法

2. 实战示例（推荐按此结构练习）

假设你的项目文件夹结构如下：

project/
├── index.html
├── about.html
├── images/
│   ├── logo.png
│   └── banner.jpg
├── css/
│   └── style.css
├── js/
│   └── main.js
├── pages/
│   └── news.html
└── assets/
    └── fonts/
        └── icon.ttf

在 index.html 中如何引用文件：

<!-- 1. 当前目录下的文件 -->
<a href="about.html">关于我们</a>

<!-- 2. 当前目录下文件夹中的文件 -->
<img src="images/logo.png" alt="logo">
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>

<!-- 3. 进入子文件夹 -->
<a href="pages/news.html">新闻中心</a>

<!-- 4. 回到上一级目录 -->
<!-- 假如在 pages/news.html 中想回到 index.html -->
<a href="../index.html">返回首页</a>

<!-- 5. 向上两级再进入其他文件夹 -->
<img src="../../images/banner.jpg" alt="横幅">

记忆口诀：

• 同级：直接写文件名 或 ./文件名
• 下一级：文件夹名/文件名
• 上一级：../
• 上两级：../../
• 上N级：../ 重复 N 次

五、路径书写最佳实践（2026 推荐）

1. 项目内部一律使用相对路径（移植性最好）
2. 图片、CSS、JS 等资源尽量使用相对路径
3. 外部资源（如 CDN、图标库）使用绝对路径
4. 路径中不要出现中文（可能导致部分服务器解析失败）
5. 文件名和文件夹名统一使用小写 + 连字符（推荐：my-image.png 而不是 MyImage.PNG）
6. 引用图片时务必写 alt 属性（语义 + 无障碍 + SEO）

正确示例：

<img src="images/product/banner-01.jpg" alt="2026 新款手机宣传图">

六、常见路径错误与调试技巧

常见错误：

• 多写或少写 /（images/logo.png vs /images/logo.png）
• 大小写不一致（Windows 不敏感，Mac/Linux 敏感）
• 路径中出现空格
• 使用了本地绝对路径（C:/...）

调试方法：

1. 在浏览器中按 F12 打开开发者工具
2. 切换到 Network 面板
3. 刷新页面，查看报红的资源，鼠标悬停可看到具体路径错误

七、本期练习（建议全部完成）

练习项目结构（请按此结构创建文件夹）：

html-practice/
├── 04-path/
│   ├── index.html
│   ├── about.html
│   ├── images/
│   │   └── cat.jpg
│   ├── css/
│   │   └── style.css
│   └── pages/
│       └── contact.html

1. 在 index.html 中引入 css/style.css 和 images/cat.jpg
2. 在 index.html 中添加链接跳转到 about.html 和 pages/contact.html
3. 在 pages/contact.html 中写一个链接返回 index.html
4. 故意写错 2 个路径，观察浏览器开发者工具中的报错

八、笔记总结（建议高亮记忆）

• 相对路径：以当前文件为基准，使用 ./、../
• 绝对路径：以 / 或 http 开头
• 项目内部强烈推荐使用相对路径
• 路径写错是新手最常见 Bug，多用浏览器 Network 面板调试
• 记忆口诀：同级直接写，下一级加文件夹名，上一级用 ../

第 05 期预告：《HTML 常用语义化标签详解（上）—— 页面结构标签（header、nav、main、section、article、aside、footer）》

需要我立即补充以下内容吗？

• 本期完整可运行的文件夹结构示例代码（所有文件内容）
• 路径练习的标准答案（含正确与错误对比）
• 包含图片、CSS、JS 的综合实战 Demo
• 把第 01~04 期笔记合并成一份完整文档

随时告诉我，我立刻为你生成！

继续保持节奏，第 04 期笔记到此结束。你的前端路径知识已经非常扎实了！🚀