HTML基础知识（5）

媒体标签

1.1.1图片标签的介绍

➢ 场景：在网页中显示图片
➢ 代码：

<img src=“” alt=“”>

➢ 特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！

1.1.2图片标签结构

➢ 标签的完整结构图：

➢ 属性注意点：
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

1.1.3图片的标签属性src

➢ 属性名：src
➢ 属性值：目标图片的路径
➢ 注意点：
➢ 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
➢ 路径的情况有很多，稍后会详细介绍

1.1.4图片的标签属性alt

➢ 属性名：alt
➢ 属性值：替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本

1.1.5图片的标签属性title

➢ 属性名：title
➢ 属性值：提示文本
• 当鼠标悬停时，才显示的文本
➢ 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

1.1.6图片的标签属性wight和hight

➢ 属性名：width和height
➢ 属性值：宽度和高度（数字）
➢ 注意点：
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

➢ wight和hight属性在图片标签中只需要给出一个值，另一个就会等比例缩放，好处就是图片不变形

2.1.1路径

路径的介绍：

➢ 场景：页面需要加载图片，需要先找到对应的图片
➢ 类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！
➢ 同理：页面需要找到图片，也是需要通过路径才能找到
➢ 路径可分为：
• 绝对路径（了解）
• 相对路径（常用）

2.1.2绝对路径（了解）

➢ 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
➢ 例如：
• 盘符开头：D:\day01\images\1.jpg
• 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）

2.2.1相对路径（常用）

➢ 概念普及：
• 当前文件：当前的html网页
• 目标文件：要找到的图片
➢ 相对路径：从当前文件开始出发找目标文件的过程
➢ 相对路径分类：
• 同级目录
• 下级目录
• 上级目录

2.2.2相对路径—同级目录

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

➢ 类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）

• 生活中：两个人独处一室，我想找你，直接喊名字即可！

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

• 方法一：

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

方法二：

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

➢ VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

2.2.3相对路径—下级目录

➢ 下级目录：目标文件在下级目录中

➢ 类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
1. 先知道你去了哪一个房间 → 房间名：卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
➢ 代码步骤：
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字

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

➢ VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

2.2.4相对路径—上级目录

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

类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
1. 先要出卧室，来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
➢ 代码步骤：
1. 先出当前文件夹，到上一级目录 → ../(返回上几级就加几个.)
2. 此时看到目标文件直接喊她 → 直接写目标文件

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

➢ VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！

2.2.5路径小节

➢ 相对路径有哪三种情况：
• 同级目录：直接写：目标文件名字！
• 下级目录：直接写：文件夹名/目标文件名字！
• 上级目录：直接下：../目标文件名字！
➢ VSCode中路径的快捷操作？
• 同级和下级目录：./ 之后选择即可
• 上级目录：../ 之后选择即可