我们在之前已经了解过,如果想添加一个图片,需要写出以下代码:
<img src="logo.png">
- 其实想给src属性赋值有两种方式:
- 通过相对路径赋值(掌握)
相对路径就是每次都从.html文件所在的文件夹开始查找,我们称之为相对路径
1.1 同级
同级就是图片和.html文件存储在同一个文件夹中
格式:
src="QRCode.jpg"
含义:
在.html文件所在文件夹中查找名称叫做QRCode.jpg的图片
1.2下级
下级就是存储图片的文件夹和.html文件在同一个文件夹中
格式:
src="images/QRCode.jpg"
含义:
在.html文件所在的文件夹中找到名称叫做images的文件夹,然后再在images文件夹中找到名称叫做QRCode.jpg的图片
1.3上级
上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中
格式:
src="../QRCode.jpg"
含义:
在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名称叫做QRCode.jpg,其中../代表从当前的位置找到上一级文件夹
- 在企业开发中用到最多的就是下级,新建一个web项目,然后创建images文件夹,和css文件夹,将图片和样式表分别放在各自的文件夹下
2.通过绝对路径(了解)
绝对路径就是每次都从指定的盘符开始查找
格式:
src="C:UsersWushuangDesktopHTML基础QRCode.jpg"
含义:
在C盘下找到Users文件夹,然后在Users文件夹中找到Wushuang文件夹,然后在Wushaung文件夹中找到HTML基础文件夹,然后在HTML基础文件夹中找到名称为QRCode.jpg的图片
注意:
- 路径中不要出现中文,否走出现未知问题
- 如果是通过相对路径来指定,那么不能跨越盘符(比如文件都在C盘下,它用相对路径绝对路径找不到在D盘下的文件)