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

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

代码:

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

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

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

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

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

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

 结果:

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

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

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

代码演示:

 结果:

 

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

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是设置图片的宽和高,只设置其中一个时,图片会按比例保持原来图片的比例大小来变动另一边的长度

 

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...