编程学习：html图片标签和相对路径以及绝对路径的说明

编程学习：html图片标签和相对路径以及绝对路径的说明

图片标签的介绍

场景：在网页中显示图片

代码：<img src=""alt="">

特点：

单标签img标签需要展示对应的效果，需要借助标签的属性进行设置

标签的完整结构图：

属性注意点：

1、标签的属性写在开始标签内部

2、标签上可以同时存在多个属性

3、属性之间以空格隔开

4、标签名与属性之间必须以空格隔开

5、属性之间没有顺序之分

图片标签的alt属性

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本

当图片加载成功时，不会显示alt的文本

图片标签的title属性

属性名：title

属性值：提示文本

当鼠标悬停时，才显示的文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

图片标签的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

如果同时设置了width和height两个，若设置不当此时图片可能会变形

绝对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

盘符开头：D:\day01\images1.jpg

完整的网络地址：https://www.baidu.com/favicon.ico

相对路径

概念普及

当前文件：当前的html网页

目标文件：要找到的图片

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类

1、同级目录：当前文件和目标文件在同一目录中

代码步骤：直接写目标文件的名字即可

方法一

<img src="目标图片.gif">

方法二

<img src="./目标图片.gif">

2、下级目录：目标文件在下级目录中

代码步骤

1、先知道在哪个文件夹里面→文件夹名字

2、进入这个文件夹→/

3、此时看到目标文件直接喊她→直接写目标文件名字

3、上级目录：目标文件在上级目录中

代码步骤：

1、先出当前文件夹，到上一级目录../

2、此时看到目标文件直接喊她→直接写目标文件