html中加图片相对路径,以html中插入图片为例,聊一聊绝对路径和相对路径的区别...
原标题:以html中插入图片为例,聊一聊绝对路径和相对路径的区别
我们都知道,在网站上插入图片要用到html的img标签中的src属性。src即source(来源)的缩写,也就是图片的url(或者说地址、路径)。通过查阅文档(例如w3school网站),可以看到这个属性的语法。
如下图
里面有提到相对路径和绝对路径两种说法。相信还是有一些朋友比如我第一次看到上图的解释是懵的。
相对路径与绝对路径的区别
❶首先,绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。(概念来自百度)
❷然后,我要补充一下,类似这种带域名的文件的完整路径也是绝对路径(这种情况不再说明)。
这张图就很好的说明了本地的绝对路径含义:
如图所示:
以里面的image2.jpg为例:其绝对路径是C:网站1网站2image2.jpg。即从根目录(如上面的C:)为起点到你所在的目录(如上例中的image2.jpg)。也就是说,如果想在html文件里插入这个图片。输入就可以了。
那么什么是相对路径呢?
相对路径:指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
相对路径的引用格式
❶同目录文件引用
"."——代表目前所在的目录。
例如上图中的处于同一个文件夹的网页2.html里想插入这个图片。一个简便的方法是:。并且这个'.'可以省略。也就是写成,够简便了吧。这个方法非常简便和有效,例如,当你把这个文件夹拷进u盘插入其他电脑,如何写得是绝对地址,那么打开来肯定图是错。而如果是相对路径,这就没问题了。
❷文件在上级目录
"../"——代表上一级目录。../../表示源文件所在目录的上上级目录,以此类推。例如:网页1.html引用图片下的Image1.jpg。那么就要先返回上一级目录先找到图片文件夹,再找Image1.jpg。。同理,网页2.html引用Image下的Image1.jpg
❸文件在下级目录
引用下级目录的文件,直接写下级目录文件的路径即可。网页1.html引用网站2文件夹下的Image2.jpg或者。
ps:以上的内容均以win7 64位系统为基础,测试过均有效。
作者: lll
来源: “程序媛计划”论坛
链接: https://www.cxy61.com/girl/cxyteam_forum/detail.html?id=4689&pk=9返回搜狐,查看更多
责任编辑:
html中加图片相对路径,以html中插入图片为例,聊一聊绝对路径和相对路径的区别...相关推荐
- modprobe:用于向内核中加载模块或者从内核中移除模块。
modprobe:用于向内核中加载模块或者从内核中移除模块. modprobe br_netfilter 加载模块 modprobe -r br_netfilter 移除 1.查看系统中所有modul ...
- modprobe命令用于智能地向内核中加载模块或者从内核中移除模块
modprobe命令用于智能地向内核中加载模块或者从内核中移除模块. modprobe可载入指定的个别模块,或是载入一组相依的模块.modprobe会根据depmod所产生的相依关系,决定要载入哪些模 ...
- 记事本html插入图片,零基础学HTML(插入图片)
想插入图片?那就看这里吧! 根据上一次的讲解,这次就直接进入主题. 会制作简单的网页了,那就在里面加入图片吧. 我就用一首诗为例,用徐志摩的<卑微>吧. 同样用记事本打开,在记事本里编辑, ...
- java写入pdf文件图片_Java编辑PDF写入文字 插入图片
package com.test; import com.itextpdf.text.BaseColor; import com.itextpdf.text.Font; import com.itex ...
- html title中加图标,科技常识:HTML中title前面小图标的实现_如何给网页标题添加icon小图标...
今天小编跟大家讲解下有关HTML中title前面小图标的实现_如何给网页标题添加icon小图标 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML中title前面小图标的实现_如何给网 ...
- python操作word文档中的图片_Python操作word文档插入图片和表格的实例演示
前言P6Q免费资源网 图片是Word的一种特殊内容,这篇文章主要介绍了关于Python操作word文档,向里面插入图片和表格的相关内容,下面话不多说了,来一起看看详细的代码P6Q免费资源网 实例代码: ...
- 从源代码中加载res / values / dimension.xml中的维度值
本文翻译自:Load dimension value from res/values/dimension.xml from source code I'd like to load the value ...
- html图片在wps中不显示文字大小,WPS文字插入图片显示不全怎么办 WPS文字插入图片显示不完整的解决方法...
在wps文字编辑文档时,如果我们在使用时插入图片显示不全,这种情况我们该怎么解决呢?想必有不少的用户遇到过这种问题,下面教程之家网为大家带来WPS文字插入图片显示不完整的解决方法,不知道怎么解决的朋友 ...
- word中图片为嵌入式格式时显示不全_word嵌入图片显示不全,教您word插入图片显示不全怎么办...
相信大家在使用Word进行编辑文档过程中,经常都会遇到需要插入图片情况吧.然后有些时候是不是还会遇到图片显示不全或只显示图片一部分的,或者只显示图片的边框之类的情况呢?所以今天小编将给讲讲word插入 ...
- 高德地图中加载three.js(vue中)(封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图 官方文档给出来的引用方法 <template><div ...
最新文章
- LinearLayout增加divider分割线
- [Eclipse]GEF入门系列(六、添加菜单和工具条)
- -i 可以编译添加多个_C语言的编译过程
- java编程点滴(3)--ubuntu下jdk的配置
- python 分班_小白如何学习python
- 【期外】 (一)关于LSH :局部敏感哈希算法
- 正在搞用web.py做的通讯录
- element ui select 自动向上向下弹出_[selenium]用Selenium自动填问卷星的问卷
- Eclipse安装git插件以及关联导入GitHub项目
- DrawIndexedPrimitiveUP这个函数
- 语言叮叮消息接口_五分钟学后端技术:如何学习Java工程师必知必会的消息队列...
- X264结构体中的变量解释
- 【细胞分割】基于matlab中值滤波+分水岭法细胞计数【含Matlab源码 640期】
- MAC系统/虚拟机中的chm打不开
- http的ssl证书保姆级配置安装-多域名 免费ssl证书 解析 nginx配置
- linux nvidia显卡驱动安装教程,LINUX的NVIDIA显卡驱动安装
- 破解庞加莱猜想数学家曾四五年未发表论文
- 2023计算机考研408参考答案
- 海南信用社计算机试题,2015年海南农村信用社考试试题——计算机基础知识一...
- Android 时间格式化