HTML中的绝对路径和相对路径

  • 作者:村长
  • 发布时间:2020-04-18 18:56
  • 分类:HTML+CSS
  • 标签: 绝对路径,相对路径

相对路径和绝对路径

绝对路径:固定的路径,死的路径

<img src="C:\Users\acer\Desktop\index\images\img\1.png" alt="图片路径移动">


相对路径:以自己为中心找东西的路径(自己 相对 物体)

<img src=".\images\img\1.png" alt="图片路径移动">



用 “./”  代表 当前所在的位置

用 “../” 代表上一级路径(退出当前位置上去)

其实下面的这个是相对路径:(./给忽略)

<img src="3.png" />  等价于: <img src="./3.png" />
<img src="../frame/1.jpg" alt=""> 等价于 <img src="./../frame/1.jpg" alt="">


绝对路径和相对路径的对比(优缺点):

绝对路径的优点:

直接明了,可以直接获取到图片

绝对路径缺点:

(1)图片移动,就会发现路径不对。

(2)如果文件打包发给别人,别人把源码放的位置不对可能获取不到图片

相对路径的优点:

以自己为中心,直接把文件和图片打包发给别人,图片不会找不到的问题

相对路径的缺点:

图片移动,就会发现路径不对。

需要注意的是: 要么是相对路径 要么是绝对路径

相对路径:./ ../

下面是错的:

./C:\Users\acer\Desktop\312\video\中国工商银行防电信诈骗 宣传视频  MG动画_超清.mp4


代码示例:

        <!-- 
		绝对路径:固定的路径
		不需要知道文件在哪个位置,直接拿路径过来用就行
		就像地址 是死,是固定 
	-->
	<img src="C:\Users\acer\Desktop\312\images\1.jpg" alt="图片加载失败">

	<!-- 
		相对路径:需要确定自己(当前编辑的网页、文件)的位置
		从我们当前的位置开始找文件(想要的东西)
		记得两个符号:表示当前位置 ./	返回上一级目录 ../
		注意:不存在绝对路径 和 相对路径 一起使用的情况,只能二选一
	 -->
	 <!-- 可以这么写: -->
	 <img src="images/1.jpg">
	 <!-- 也可以这么写: -->
	 <img src="./images/1.jpg" alt="">



  • php程序员面试笔试宝典
琉忆编程库

手册下载

    暂无手册

编程资料

    暂无资料
TOP
加载中...