【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" />
		

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

相关推荐
小码哥_常3 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮5 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀6 小时前
Vue插槽
前端·javascript·vue.js
qq_448011167 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan7 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352907 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝8 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing039 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel9 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放9 小时前
Python基础语法练习题(73)
java·前端·python