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