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

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

相关推荐
哀木1 小时前
一个简单的套壳方案,就能让你的 Agent 少做重复初始化
前端
问心无愧05131 小时前
ctf show web入门27
前端
小村儿1 小时前
给 AI Agent 装上"长期记忆":Karpathy 的 LLM Wiki 思想,我做成了工具
前端·后端·ai编程
竹林8181 小时前
用ethers.js连接MetaMask实现Web3钱包登录:从踩坑到稳定运行的完整记录
前端·javascript
heyCHEEMS1 小时前
如何用 Recast 实现静态配置文件源码级读写
前端·node.js
心连欣1 小时前
从零开始,学习所有指令!
前端·javascript·vue.js
review445432 小时前
大模型和function calling分别是如何工作的
前端
东东同学2 小时前
耗时一个月,我把 Nuxt 首屏性能排障经验做成了一个 AI Skill
前端·agent
冴羽3 小时前
超越 Vibe Coding —— AI 辅助编程指南
前端·ai编程·vibecoding
梦想的颜色3 小时前
一天一个SKILL——前端最佳自动化测试 webapp-testing
前端·web app