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

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

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

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

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

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

二、两种路径的核心概念

三、绝对路径详解

1. 两种写法

<!-- 1. 网络绝对路径（最常见） --><imgsrc="https://www.example.com/images/logo.png"alt="logo"><ahref="https://github.com">去 GitHub</a><!-- 2. 本地磁盘绝对路径（几乎不用，仅本地测试） --><imgsrc="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. 当前目录下的文件 --><ahref="about.html">关于我们</a><!-- 2. 当前目录下文件夹中的文件 --><imgsrc="images/logo.png"alt="logo"><linkrel="stylesheet"href="css/style.css"><scriptsrc="js/main.js"></script><!-- 3. 进入子文件夹 --><ahref="pages/news.html">新闻中心</a><!-- 4. 回到上一级目录 --><!-- 假如在 pages/news.html 中想回到 index.html --><ahref="../index.html">返回首页</a><!-- 5. 向上两级再进入其他文件夹 --><imgsrc="../../images/banner.jpg"alt="横幅">

记忆口诀：

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

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

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

正确示例：

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

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

常见错误：

• 多写或少写/（images/logo.pngvs/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 期笔记到此结束。你的前端路径知识已经非常扎实了！🚀