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="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之相对路径的更多相关文章
- mapreduce中一个map多个输入路径
package duogemap; import java.io.IOException; import java.util.ArrayList; import java.util.List; imp ...
- Akka.net路径里的user
因为经常买双色球,嫌每次对彩票号麻烦,于是休息的时候做了个双色球兑奖的小程序,做完了发现业务还挺复杂的,于是改DDD重做设计,拆分服务,各种折腾...,不过这和本随笔没多大关系,等差不多了再总结一下, ...
- java中servlet的各种路径
1. web.xml中<url-pattern>路径,(叫它Servlet路径!) > 要么以“*”开关,要么为“/”开头 2. 转发和包含路径 > *****以“/”开头:相 ...
- 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法
若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...
- 使用JavaScript为一张图片设置备选路径
在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...
- iOS之开发中一些相关的路径以及获取路径的方法
模拟器的位置: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs ...
- Android中访问sdcard路径的几种方式
以前的Android(4.1之前的版本)中,SDcard路径通过"/sdcard"或者"/mnt/sdcard"来表示,而在JellyBean(安卓4.1)系统 ...
- 【每日一linux命令1】linux命令路径
一.路径: 执行命令前必须要考虑的一步是命令的路径,若是路径错误或是没有正确的指定,可能导致错误 的执行或是找不到该命令.要知道设置的路径,可执行以下命令: echo $PATH 显示结果: 这时我们 ...
- 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 ...
- .NET全栈开发工程师学习路径
PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ...
随机推荐
- HDOJ-1043 Eight（八数码问题+双向bfs+高效记录路径+康拓展开）
bfs搜索加记录路径 HDOJ-1043 主要思路就是使用双向广度优先搜索,找最短路径.然后记录路径,找到结果是打印出来. 使用康拓序列来来实现状态的映射. 打印路径推荐使用vector最后需要使用a ...
- POJ-2387(原始dijkstra求最短路)
Til the Cows Come Home POJ-2387 这题是最简单的最短路求解题,主要就是使用dijkstra算法,时间复杂度是\(O(n^2)\). 需要注意的是,一定要看清楚题目的输入要 ...
- Typora学习
Markdown学习总结 标题的使用格式 # 一阶标题 或者 ctrl + 1 ## 二阶标题 或者 ctrl + 2 ### 三阶标题 或者 ctrl + 3 #### 四阶标题 或者 ctrl + ...
- MyBatis(二):自定义持久层框架思路分析
使用端 引入架构端Maven依赖 SqlMapConfig.xml-数据库配置信息(数据库连接jar名称.连接URL.用户名.密码),引入Mapper.xml的路径 XxMapper.xml-SQL配 ...
- C# 基础 - 文件对话框
using System.Windows.Forms; ... /// <summary> /// 选择保存文件的名称以及路径 取消返回 空""; /// </s ...
- pyspider的环境安装
第一:确认自己的Python版本3.6.x(因该版本与pyspider较为适应,其他版本易出错) 如果不是3.6版本的,且想将版本替换成3.6版本的有以下处理方法: 1.再装一个3.6版本python ...
- Educational Codeforces Round 69 (Rated for Div. 2) D. Yet Another Subarray Problem 【数学+分块】
一.题目 D. Yet Another Subarray Problem 二.分析 公式的推导时参考的洛谷聚聚们的推导 重点是公式的推导,推导出公式后,分块是很容易想的.但是很容易写炸. 1 有些地方 ...
- javascript中的Strict模式
目录 简介 使用Strict mode strict mode的新特性 强制抛出异常 简化变量的使用 简化arguments 让javascript变得更加安全 保留关键字和function的位置 总 ...
- 文件锁fcntl
一.python中的文件锁 我们在写python应用的时候,当涉及到多个进程向同一个文件write(或者read)的情况,如果几个进程同时都对这个文件进行写操作,那么文件的内容就会变得非常混乱,这个时 ...
- 云原生的弹性 AI 训练系列之一：基于 AllReduce 的弹性分布式训练实践
引言 随着模型规模和数据量的不断增大,分布式训练已经成为了工业界主流的 AI 模型训练方式.基于 Kubernetes 的 Kubeflow 项目,能够很好地承载分布式训练的工作负载,业已成为了云原生 ...