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

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

相关推荐
JarvanMo4 分钟前
Riverpod 3.0 关键变化与实战用法
前端
二十雨辰13 分钟前
vite与ts的结合
开发语言·前端·vue.js
我是日安16 分钟前
从零到一打造 Vue3 响应式系统 Day 25 - Watch:清理 SideEffect
前端·javascript·vue.js
岁月宁静17 分钟前
AI 时代,每个程序员都该拥有个人提示词库:从效率工具到战略资产的蜕变
前端·人工智能·ai编程
小高00717 分钟前
🤔「`interface` 和 `type` 到底用哪个?」——几乎每个 TS 新手被这个选择灵魂拷问。
前端·javascript·typescript
行走在顶尖20 分钟前
代码管理
前端
_AaronWong22 分钟前
Electron IPC 自动化注册方案:模块化与热重载的完美结合
前端·electron·node.js
我的div丢了肿么办28 分钟前
vue3使用h函数如何封装组件和$attrs和props的区别
前端·javascript·vue.js
答案answer28 分钟前
你不知道的Three.js性能优化和使用小技巧
前端·性能优化·three.js
自由的疯30 分钟前
java调chrome浏览器显示网页
java·前端·后端