1.5.1- HTML之相对路径

网页需要图片，首先需要找到它。实际工作中，通常新建一个文件夹专门用于存放图像文件，这时插入图像，就需要采用“路径”的方式来制定图像文件的位置。路径可以分为相对路径与绝对路径。

相对路径

1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif">

2.图像文件位于HTML文件下一届文件夹，输入文件夹名和文件名，之间用“/”隔开，如<img src = "img/img01/logo.gif">。

3.图像文件位于HTML的上一级文件夹：在文件名之前加入“../”,如果是上两级，则需要使用“../../” ，依次类推，如<img src = "../logo.gif">。

同一级文件夹：

同一文件夹，存放HTML文件与图片可以直接调用，如图所示。

输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="God father.jpg" alt="测试图片" />
    
</body>
</html>

在浏览器打开：

所以我们可以看出，HTML文件与图片在同一文件夹只需要输出文件名即可。

下一级文件夹

现在把刚才的那个文件放在同级文件夹images下。

这个时候如果HTML代码想找到插入这个图片需要输入这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="images/God father.jpg" alt="测试图片" />
    
</body>
</html>

在浏览器打开：

我们可以同样找到这个图片，并在浏览器中显示。它是先找到了images文件架，然后再去找文件下面图片。 / 表示下一级。

上一级文件夹

我们这个时候把test.HTML放到与图片同级的HTML文件夹内：

这个时候我们的HTML文件怎么找到这个上一级的图片呢？输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="../God father.jpg" alt="测试图片" />
    
</body>
</html>

在浏览器打开：

../代表上一级。

绝对路径

绝对路径：C:\Users\Administrator\Desktop\logo.gif。或完整的网络地址，例如：https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=e11bef328a44ebf86971633de9f9d736/2fdda3cc7cd98d108b92da002c3fb80e7bec90b9.jpg

不管图片在什么地方，只需要右键点击图片，然后点击属性，找到他的位置，然后复制下来就行，如图所示：

把这个图片路径复制下来，后面加上你的图名名称，然后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\Administrator\Desktop\God father.jpg" alt="测试图片" />
    
</body>
</html>

浏览器复制图片链接

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=13264123,4092704128&fm=85&app=63&f=JPEG?w=121&h=75&s=0F64DA039CD205FDDE3CBD060100E091" alt="测试图片" />
    
</body>
</html>

浏览器打开如下：

1.5.1- HTML之相对路径

推荐阅读