前端基础资源路径
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础资源路径相关的知识，希望对你有一定的参考价值。
资源路径
学习目标
- 能够知道相对路径和绝对路径的区别
当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:
<img src="images/logo.png">
这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。
1. 相对路径
从当前操作 html 的文档所在目录算起的路径叫做相对路径
示例代码:
<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">
2. 绝对路径
从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/
示例代码:
<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\\demo\\images\\001.jpg">
提示:
一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题
3. 小结
- 相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
- 相对路径是从当前操作的 html 文档所在目录算起的路径
- 绝对路径是从根目录算起的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 资源路径分为绝对路径和相对路径
1. 绝对路径是从根目录算起的路径叫做绝对路径
2. 相对路径是当前目录算起的路径叫做相对路径
-->
<!-- 相对路径的第一种写法 -->
<img src="imgs/logo1.png" alt="">
<!-- 相对路径的第二种写法 -->
<img src="./imgs/logo1.png" alt="">
<!-- 绝对路径的写法 -->
<img src="/Users/apple/Desktop/网页开发/day07/imgs/logo.png" alt="">
<!-- 资源路径一般会使用相对路径，更加通用和方便，绝对路径把工程拷贝给别人以后可能出现资源找不到的问题 -->
</body>
</html>
加油!
感谢!
努力!
以上是关于前端基础资源路径的主要内容，如果未能解决你的问题，请参考以下文章