web第八课:图片标签的路径和属性

@H_502_0@1.<img>标签路径:和HTML代码文件在同级目录下

代码

图片标签:img,发现它有两个属性,我们先不管第二个,第一个src是我们加载的图片的路径,如果你将图片存放在和你创建的HTML代码文件一个目录下,那么路径就有下面几个:

首先说一下,将你要展现加载的图片放在和HTML代码文件一个目录下:

当我们下载完vscode以后,会在界面上出现一个添加文件夹”的选择,创建这个文件夹,可以将你后面写的HTML代码文件都放在这文件夹里,这样不会觉得乱,你可以选择在你电脑的一个地方创建这个文件夹,建议是放在vscode下载的文件夹下,这样会好找一点,创建完这个文件夹以后,你后面写的HTML代码文件都会保存在这文件夹下,

这样你创建以后,当你在vscode这个文件下创建HTML代码文件时,这个文件会映射到你电脑上创建的这个code文件夹下,所以你放图片时直接放在你电脑上这个文件夹下,这张图片就会在vscode里面这个code文件夹下显示,看下图:

 解释一下,上面那个文件夹名code和这里的HTML项目文件夹名,是一个意思,只是名字被我改了而已,都是存放HTML代码文件的地方

这个时候,当我们成功导入图片在和HTML代码文件一个文件夹(同级目录)时,我们就可以按照下面的方式写img标签的路径:

 结果:

下面解释一下:绝对路径和相对路径 

@H_502_0@ @H_502_0@2.和html文件不在同级目录下(第一种情况)

 我们在HTML代码文件所在的HTML项目文件夹下新建一个文件夹(img文件夹),再将图片放到这个文件夹下,这时候HTML代码文件和这个img文件夹是在同级目录下,但是这个图片(躺平)和html就长辈和晚辈的关系了,这个时候路径又会发生什么变化呢,看下面:

代码演示:

 结果:

 

 <img src="img/躺平.jpg">:含义是在此目录(指的是HTML项目)下的img下的躺平.jpg

@H_502_0@ @H_502_0@3.和html文件不在同级目录下(第二种情况)

HTML代码问价(img.html)和躺平.jpg在html项目文件夹下面两个不同的文件夹下,这个时候路径又是什么,看下面:

代码演示:

 结果:

 <img src="../img/躺平.jpg">:含义是返回上级目录下的img文件夹下的躺平.jpg

"../"代表:返回上级目录,因为img.html在HTML项目文件夹下的code文件夹下,而躺平.jpg图片在HTML项目文件夹下的img文件夹下,所以相对于img.html来讲,就是要先返回上一级目录也就是HTML目录,然后在该目录下的img文件下的躺平.jpg图片

4.img图片标签属性

 代码演示:

也可以像下面这样写:

结果:

img标签属性介绍:src就是图片地址,alt是如果图片没有成功加载,就会显示等于号后面这句话;title是等你将鼠标放在图片上就会显示文字,width和hight是设置图片的宽和高,只设置其中一个时,图片按比例保持原来图片的比例大小来变动另一边的长度

 

相关文章

显卡天梯图2024最新版,显卡是电脑进行图形处理的重要设备,...
初始化电脑时出现问题怎么办,可以使用win系统的安装介质,连...
todesk远程开机怎么设置,两台电脑要在同一局域网内,然后需...
油猴谷歌插件怎么安装,可以通过谷歌应用商店进行安装,需要...
虚拟内存这个名词想必很多人都听说过,我们在使用电脑的时候...