HTML 文件路径
理解绝对路径和相对路径 · 难度：入门 · +10XP
HTML 文件路径
理解绝对路径和相对路径是正确引用图片、样式、链接的基础。
绝对路径
完整的URL地址，从协议开始：
<img src="https://www.wmdxc.com/images/logo.png">
<a href="https://www.wmdxc.com/learning/">学习中心</a>优点：明确无误。缺点：换域名时需要全部修改。
相对路径
相对于当前文件的位置：
| 路径写法 | 含义 |
|---|---|
images/pic.jpg | 当前目录下的images文件夹 |
./images/pic.jpg | 同上（显式当前目录） |
../images/pic.jpg | 上一级目录的images文件夹 |
../../pic.jpg | 上两级目录 |
/images/pic.jpg | 网站根目录的images文件夹 |
使用建议
| 场景 | 推荐 |
|---|---|
| 站内资源 | 根路径：/images/logo.png |
| 外部资源 | 绝对路径：https://cdn.example.com/lib.js |
| 同级文件 | 相对：./style.css |
???? 练习
- 用相对路径引用同目录下的图片
- 用根路径引用站点Logo
- 用绝对路径引用外部CDN资源