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

相对路径

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="data: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之相对路径的更多相关文章

  1. mapreduce中一个map多个输入路径

    package duogemap; import java.io.IOException; import java.util.ArrayList; import java.util.List; imp ...

  2. Akka.net路径里的user

    因为经常买双色球,嫌每次对彩票号麻烦,于是休息的时候做了个双色球兑奖的小程序,做完了发现业务还挺复杂的,于是改DDD重做设计,拆分服务,各种折腾...,不过这和本随笔没多大关系,等差不多了再总结一下, ...

  3. java中servlet的各种路径

    1. web.xml中<url-pattern>路径,(叫它Servlet路径!) > 要么以“*”开关,要么为“/”开头 2. 转发和包含路径 > *****以“/”开头:相 ...

  4. 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法

    若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...

  5. 使用JavaScript为一张图片设置备选路径

    在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...

  6. iOS之开发中一些相关的路径以及获取路径的方法

    模拟器的位置: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs ...

  7. Android中访问sdcard路径的几种方式

    以前的Android(4.1之前的版本)中,SDcard路径通过"/sdcard"或者"/mnt/sdcard"来表示,而在JellyBean(安卓4.1)系统 ...

  8. 【每日一linux命令1】linux命令路径

    一.路径: 执行命令前必须要考虑的一步是命令的路径,若是路径错误或是没有正确的指定,可能导致错误 的执行或是找不到该命令.要知道设置的路径,可执行以下命令: echo $PATH 显示结果: 这时我们 ...

  9. hibernate-mapping-3.0.dtd；hibernate-configuration-3.0.dtd；hibernate.properties所在路径

    hibernate-mapping-3.0.dtd 所在路径:hibernate-release-5.2.5.Final\project\hibernate-core\src\main\resourc ...

  10. .NET全栈开发工程师学习路径

    PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...

随机推荐

  1. Markdown（3）Typora快捷键

    Typora(3)快捷键 一.快捷键列表 操作内容 快捷键 助记词 1. 标题 Ctrl + 数字 1-6 2. 段落 Ctrl + 数字 0 3. 粗体 Ctrl + B (B) Bold 4. 斜 ...

  2. Linux速通06 系统的初始化服务和监控

    Linux系统引导的顺序 # 掌握 Linux系统引导的顺序 * BIOS的工作是检查计算机的硬件设备,如CPU.内存和风扇速度等 * MBR会在启动盘的第一个块中,大小为512B,其中前446B是引 ...

  3. ThinkAdmin v6 未授权列目录/任意文件读取复现

    大佬的审计文章:https://github.com/zoujingli/ThinkAdmin/issues/244 任意文件读取 POC curl http://127.0.0.1/admin.ht ...

  4. ThinVnc-身份验证绕过(CVE-2019-17662)

    ThinVnc-身份验证绕过(CVE-2019-17662) 简介 ThinVNC是一款以网页浏览器为基础设计的远端桌面连接工具,不局限用户端使用那种作业平台,都可以通过采用HTML5为标准的浏览器来 ...

  5. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  6. Go Module实战：基于私有化仓库的GO模块使用实践

    新年开工近一月,2021 年第一期 Open Talk 定档 3 月 18 日晚 8 点,本期我们邀请到了又拍云资深后端开发工程师刘云鹏和我们一起聊聊 Go 最新特性 Go Module 实战. 刘云 ...

  7. MySql多表查询_事务_DCL(资料三)

    今日内容 1. 多表查询 2. 事务 3. DCL 多表查询: * 查询语法: select 列名列表 from 表名列表 where.... * 准备sql # 创建部门表 CREATE TABLE ...

  8. 20184307 实验三 Socket编程技术

    实验三 Socket编程技术 学号 20184307 2019-2020-2 <Python程序设计>实验三报告 课程:<Python程序设计> 班级:1843 姓名:章森洋 ...

  9. (十四--十五)数据库查询优化Part I

    (十四--十五)数据库查询优化Part I 如果理解的有问题.欢迎大家指出.这也是我在看课记得笔记..可能会有很多问题 查询优化的重要性 请记住用户只会告诉DMBS他们想要什么样的结果,而不会告诉他们 ...

  10. java例题_13 加上100再加上168的完全平方数问题

    1 /*13 [程序 13 根据条件求数字] 2 题目:一个整数,它加上 100 后是一个完全平方数,再加上 268 又是一个完全平方数,请问该数是多少? 3 程序分析:在 10万以内判断,先将该数加 ...