【HTML】HTML基础3(路径)

目录

路径的重要性

同级查找

图片在下一级

图片在上一级


路径的重要性

在实际编码中,对图片的查找有很多方式,即找到图片的过程有很多路径,学习路径能帮助我们更好的查找

同级查找

例如:

这里的index.html和"你好.jpg"图片并不存在于某一文件夹中,而是单独存在,所以他们属于同级 ,这个时候就直接用以下方法进行图片的插入即可

html 复制代码
<img src="你好.jpg" height="50" />

注释:这里的height指的是设计图片的高,不用担心宽度,这里会等比例缩小

html 复制代码
<img src="图片名" height="50" />

图片在下一级

例如:

图片在img文件夹中,而index单独存在,所以相当于index大一级,所以这里我们用到 " / " 来进行查找操作,如

html 复制代码
<img src="img/银河护卫队-格鲁特.png" >

html 复制代码
<img src="文件夹/图片名" >

图片在上一级

这里的test.html存在于文件夹中,所以它要找到图片的话,需要先从原文件夹"挣脱"出来,所以可以看作图片在html的上一级,这里会用到 " ../ " 符号

html 复制代码
<img src="../img/5人。2.jpg" />
		<img src="../img/5ren.jpg" />
		<img src="../img/5人酷背景.jpg" />
		<img src="../img/银河护卫队-格鲁特.jpg" />

html 复制代码
<img src="../文件名/图片名.jpg" />
		

今天的分享到这里就结束了~希望对您有所帮助!!

相关推荐
iFlyCai6 分钟前
深入理解Flutter:StatefulWidget生命周期全解析(四)
前端·javascript·flutter
xm_xm_xm_138 分钟前
Vue 3 项目开发常用操作详细汇总
前端·vue.js
计算机魔术师41 分钟前
我国日均词元调用量突破 500 万亿,中国大模型稳居全球第一梯队
前端
夜雨声烦丿42 分钟前
从需求到页面:日期计算器应用的 ArkTS 原生实现
开发语言·javascript·华为·harmonyos
码视野1 小时前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
玄魂1 小时前
VisActor 全新图可视化开源项目:VGraph
前端·数据可视化
宇智波亚索2 小时前
TypeScript 实际应用
前端·javascript·typescript
明飞19872 小时前
C表达式_表达式类型
前端
雪芽蓝域zzs2 小时前
Vue3+Vite 本地数据模拟 JSON 读取和Mock 方案完整讲解总结
前端·vue.js
jjw_zyfx2 小时前
vue3 vite 前端录制浏览器界面视频并保存下载
前端·音视频