文件路径
绝对路径 vs 相对路径、根目录/上级/同级路径写法
文件路径
引用图片、CSS、JS、其他页面时——路径写错就找不到文件。理解路径是基本功。
学完本章你将： 掌握绝对路径 vs 相对路径、根目录/上级/同级路径。
绝对路径
html
<!-- 完整 URL（指向外部资源） -->
<img src="https://example.com/images/photo.jpg" alt="照片">
<a href="https://www.baidu.com">百度</a>
<!-- 本地绝对路径（不推荐，部署后失效） -->
<img src="C:/Users/name/Desktop/photo.jpg" alt="照片">相对路径
假设当前页面：https://example.com/pages/about.html
引用目标 相对路径写法
────────────────────────────────────
同级文件 href="contact.html"
同级文件夹内 href="images/photo.jpg"
上一级目录 href="../index.html"
上两级 href="../../file.html"
根目录 href="/images/photo.jpg"示例
html
<!-- 当前页面在 /blog/post.html -->
<!-- 引用同目录的 CSS -->
<link rel="stylesheet" href="style.css">
<!-- 引用上级目录的图片 -->
<img src="../images/banner.jpg" alt="横幅">
<!-- 引用根目录的 JS（推荐——不受页面位置影响） -->
<script src="/js/main.js"></script>路径总结
| 写法 | 含义 |
|---|---|
| `file.html` | 同目录 |
| `./file.html` | 同目录（明确写法） |
| `folder/file.html` | 子目录 |
| `../file.html` | 上级目录 |
| `/file.html` | 网站根目录 |
| `https://...` | 绝对 URL |