HTML路径

最新推荐文章于 2024-04-15 13:32:37 发布

lhrdlp

最新推荐文章于 2024-04-15 13:32:37 发布

阅读量728

点赞数 6

分类专栏： HTML

本文链接：https://blog.csdn.net/lhrdlp/article/details/100762440

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、路径的分类

相对路径
绝对路径

二、路径的具体用法

- 相对路径

HTML和图片文件位于同一文件夹：
具体情况如下图所示：
在这种情况下，只需输入图像名称即可

<img src="彭彭.jpg"  />

图片位于HTML文件的下一级文件夹
具体情况如下图所示：

在这种情况下，即图片位于HTML文件的下一级文件夹，输入文件夹和文件名，之间用“/”隔开。

      即<ing src="img\1.jpg"  />

图片位于HTML的上一级文件夹：
具体情况如下图所示：

在这种情况下，即图片位于HTML文件的上一级文件夹，在文件名之前输入"…/",如果是上两级文件夹，则输入“…/…/”,以此类推。

          <img src=“../2.jpg"  />

绝对路径

直接写出在HTML中引用图片的完整地址（但一般情况不会使用，只需了解这种方法即可）

       <img src="C:\Users\wuhon\Pictures\Saved Pictures\2.jpg"  />

在联网情况下可直接使用其他网页上的绝对地址，具体操作如下所示：

         <img src="直接将刚才复制的地址粘贴在此处"  />

在sublime中写一段代码来实现以上几种方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路径</title>
</head>
<body>
	<!--同一级文件夹-->
    <img src="彭彭.jpg" width="234"/>
    <!--上一级文件夹-->
    <img src="../6.jpg" width="234" />
    <!--下一级文件夹-->
    <img src="picture\1.jpg" width="234"/>
    <!--绝对路径1-->
    <img src="C:\Users\wuhon\Pictures\Saved Pictures\2.jpg" width="234" />
    <!--绝对路径2-->
    <img src="https://www.baidu.com/img/bd_logo1.png" width="234" />
</body>
</html>

结果如下：
在这里插入图片描述

-----------------------------------------我是分割线-----------------------------------------------

lhrdlp

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML路径

一、路径的分类相对路径绝对路径二、路径的具体用法- 相对路径 HTML和图片文件位于同一文件夹：具体情况如下图所示：在这种情况下，只需输入图像名称即可<img src="彭彭.jpg" /> 图片位于HTML文件的下一级文件夹具体情况如下图所示：在这种情况下，即图片位于HTML文件的下一级文件夹，输入文件夹和文件名，之间用“/”隔开。 ...
复制链接

扫一扫