HTML绝对路径与相对路径概念详细解析|新手一看就懂的区别及用法

文章目录▼CloseOpen

• 为什么路径错了，你的资源就“失踪”了？
• 绝对路径vs相对路径：该用的时候别犹豫
• 最后再给你个“避坑小技巧”
  • 绝对路径和相对路径的本质区别到底是什么？
  • 什么时候该用绝对路径，什么时候用相对路径？
  • 相对路径里的../和./总搞反，有什么简单方法记吗？
  • 为什么本地打开HTML图片没问题，传到服务器就失效了？
  • 路径层级深的时候，怎么避免写错？

这篇文章就是给新手的“路径入门指南”：不用专业术语，用“找朋友家”的类比讲透逻辑——绝对路径是“从城市入口开始的完整路线”（比如https://xx.com/images/photo.jpg），相对路径是“从你当前所在房间出发的 shortcut”（比如../images/photo.jpg）；再用实际代码例子演示：本地开发时，用相对路径能跟着文件移动不报错；引用外部图标或字体时，用绝对路径能保证全球都能访问。最后还会 “避坑技巧”：比如别把本地文件的绝对路径（C:/Users/xxx/…）用到线上，不然肯定失效。

读完这篇，你不用再对着路径字符串挠头，下次写HTML时，选对路径只需要3秒—— 解决路径问题，从来不是靠记规则，而是搞懂“怎么让浏览器找到文件”的逻辑。

你有没有过这种情况？刚写了个HTML页面，插了张好看的图片，本地打开时图片清晰得能看清细节，上传到服务器就变成裂开的小图标；或者链接的CSS文件，本地样式排版整整齐齐，线上却变成一堆乱码——我去年帮朋友改他的美食博客时，就撞过一模一样的“路径墙”。他当时把红烧肉的图片路径写成了“C:/Users/小明/Pictures/红烧肉.jpg”，结果服务器压根没有“C盘”这个东西，浏览器找了半天找不到，能不显示裂开的图标吗？

其实啊，浏览器找文件就像快递员送快递——你得给个准确的地址，它才能精准定位。这时候“绝对路径”和“相对路径”这俩“导航工具”就派上用场了，我帮朋友解决问题时，就是靠把这俩概念掰碎了讲，才让他彻底搞明白的。

为什么路径错了，你的资源就“失踪”了？

先给你讲个最直观的类比：假设你要找朋友家，绝对路径就是“XX市XX区XX路XX小区3栋2单元101室”——不管你从哪出发，按这个地址走都能到；相对路径就是“从你现在站的便利店往左走100米，第三个单元门”——得看你当前的位置在哪。

浏览器的逻辑也是一样的：当你写或者时，其实是在给浏览器发“快递地址”。如果地址错了，浏览器自然找不到资源。比如我朋友的问题，他用了本地绝对路径（就是带C盘、D盘的那种），这种路径只在他自己电脑上有用，服务器上没有他的“C盘”，浏览器肯定蒙圈啊。

再比如，你要是写了个相对路径“images/logo.png”，但你的HTML文件在“pages”文件夹里，而“images”文件夹在根目录——这就相当于你站在便利店（pages文件夹），却让快递员去“旁边的超市”（images文件夹）找东西，但其实超市在小区门口（根目录），快递员能找着才怪。

绝对路径vs相对路径：该用的时候别犹豫

我做了5年前端开发， 出一个“永远不会错”的原则：外部资源用绝对路径，同一项目内用相对路径。别急，我给你拆解开讲，保证你看完就会用。

• 绝对路径：适合“外来的”资源

绝对路径的全称是“绝对统一资源定位符（URL）”，它长这样：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js——包含了协议（https）、域名（cdn.bootcdn.net）、具体路径（/ajax/libs/jquery/3.6.0/）和文件名（jquery.min.js）。简单说，就是“无论你在哪，只要输入这个地址，就能找到资源”。

什么时候用它？比如你要引用第三方资源：

• 用BootCDN的jQuery库；
• 用阿里图标库的字体图标；
• 引用其他网站的图片（比如你要嵌一个B站的视频封面）。

我之前做一个企业官网时，用了阿里图标库的图标，直接复制它给的绝对路径，不管我把网站部署到哪个服务器，图标都能正常显示——因为这个路径指向的是阿里的服务器，和我自己的项目位置没关系。

• 相对路径：适合“自己家的”资源

相对路径就像“家里的抽屉”——它不需要写完整地址，只需要说“从你现在的位置，往哪走”。比如你项目的结构是这样的：

根目录/
├─ index.html（首页）
├─ css/
│ └─ style.css（样式表）
└─ images/
 └─ logo.png（logo图片）

这时候：

你看，相对路径的好处是灵活——就算你把整个项目文件夹复制到另一个电脑，或者改成别的域名，路径都不用改。我去年把自己的个人博客从GitHub Pages搬到阿里云服务器时，就是因为全用了相对路径，5分钟就部署完成，连路径都没调过。

为了让你更清楚，我做了个对比表——毕竟看表比看文字直观10倍：

最后再给你个“避坑小技巧”

我刚学的时候，总犯一个错：把相对路径的层级搞反。比如明明要上一级目录，却写成了下一级。后来我发明了个“画结构法”——把项目结构画在纸上，每写一个路径，就用铅笔标一下“当前位置”和“目标位置”，比如：

你要是怕错，也可以试试这个方法——毕竟我用了3年，从来没再搞混过。

对了，再提醒你一句：永远别把本地绝对路径（比如C:/Users/xxx/…）用到线上！我朋友当初就是犯了这个错，结果博客上线后，所有图片都裂了——服务器没有他的C盘，浏览器能找到才怪。

你现在可以打开自己的项目，看看里面的路径是不是符合这些原则。要是还有拿不准的地方，欢迎在评论区留个言，我帮你看看——毕竟我当年踩过的坑，可不想让你再踩一遍～

绝对路径和相对路径的本质区别到底是什么？

其实用找朋友家的类比最清楚——绝对路径就是“XX市XX区XX路XX小区3栋2单元101室”这种完整地址，不管你从哪出发，按这个走都能到；相对路径就是“从你现在站的便利店往左走100米，第三个单元门”，得看你当前在哪。放HTML里，绝对路径是带https、域名的完整URL（比如https://xx.com/images/photo.jpg），相对路径是靠文件位置关系找的（比如../images/photo.jpg），核心区别就是“要不要看当前位置”。

什么时候该用绝对路径，什么时候用相对路径？

我做了5年前端， 的原则是“外部资源用绝对，同一项目内用相对”。比如你要引用BootCDN的jQuery库、阿里图标库的字体图标，这些第三方资源用绝对路径准没错，因为它们在别人的服务器上，不管你项目放哪都能找到；而自己项目里的图片、CSS文件，用相对路径更灵活，就算把项目复制到另一个电脑或者改域名，路径也不用改。

相对路径里的../和./总搞反，有什么简单方法记吗？

其实就记两个符号的意思：../是“回到上一级目录”，./是“当前所在目录”（有时候也能省略不写）。比如你的HTML文件在“pages”文件夹里，要找根目录“images”里的logo.png，就得先从pages回到根目录（用../），再进images文件夹，所以路径是../images/logo.png；如果你的HTML就在根目录，直接写./images/logo.png或者images/logo.png都行，因为./代表当前目录（根目录）。

为什么本地打开HTML图片没问题，传到服务器就失效了？

十有八九是用了“本地绝对路径”——比如你写了C:/Users/小明/Pictures/红烧肉.jpg这种路径，这路径只在你自己电脑上有用，服务器上没有你的“C盘”啊！浏览器在服务器上找这个路径，自然找不到图片。解决办法很简单：把本地绝对路径改成相对路径（比如images/红烧肉.jpg），或者改成线上绝对路径（比如https://你的域名/images/红烧肉.jpg）。

路径层级深的时候，怎么避免写错？

我刚学的时候也总写错，后来发明了个“画结构法”——把项目结构画在纸上，比如根目录下有index.html、css文件夹、images文件夹、pages文件夹，pages里有about.html。每写一个路径，就标一下“当前位置”和“目标位置”：比如当前在pages/about.html，要找css/style.css，就从pages回到根目录（../），再进css文件夹（css/），所以路径是../css/style.css。画出来之后，路径就不会错了，我用了3年从没再搞混过。