HTML认知06标签学习3

---

前言

媒体标签
图片标签
路径

---

一、图片标签

1.图片标签的介绍

• 使用场景：在网页中显示图片
• 代码：<img src="" alt="">
• 特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置
  

2.图片标签的src属性

• 属性名：src
• 属性值：目标图片的路径
• 注意点：当前网页和目标途径要放在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀）；路径有很多种情况，会在后面进行介绍
  eg：
  ” ./ “可以有也可以没有

实践：

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

3.图片标签的alt属性

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

4.图片标签的title属性

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

5.图片标签的width和height属性

• 属性名：width和height
• 属性值：宽度和高度（数字）
• 注意点：如果只设置了width和height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）；若同时设置了width和height两个，若设置不当图片可能变形
• 实践：
  
  
  
  注：建议width和height属性只需要给出一个值，另一个等比例缩放，可以保证图片不变形

二、路径

1.路径的介绍

• 场景：页面需要加载图片，需要找到对应的图片
  上一节讲了图片与网页放于同一个文件夹中，本节就是讲若是没放在同一个文件夹中如何找到图片

• 路径可分为：绝对路径（了解）；相对路径（常用）

2.绝对路径（了解即可）

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

3.相对路径

• 概念：从当前文件开始出发找目标文件的过程

• 当前文件：当前的html网页
  目标文件：要找到的图片

• 相对路径分类：同级目录；下级目录；上级目录
  1.同级目录：当前文件和目标文件在同一目录中
  所以在同一个文件夹中直接写名字即可
  代码步骤：直接写目标文件的名字即可
  方法一：<img src="目标图片.gif">
  方法二：<img src="./目标图片.gif">
  2.下级目录：目标文件在下级目录中
  
  代码步骤：
  首先，先知道在哪个文件夹里面，即知道文件夹名字
  然后，进入这个文件夹
  最后，写目标文件的名字
  eg：<img src="images/目标图片.gif">
  3.上级目录：目标文件在上级目录中
  
  代码步骤：
  首先，先出当前文件夹，到上一级目录中
  然后，直接写出目标文件

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

注意：也就是说，如果当前文件在里面，就出来找目标文件，如果当前文件在外面，就进去找目标文件，不需要纠结上级和下级

举个例子：将树的图片放入路径的html中

---

总结

介绍了图片标签及其各种属性，近一步介绍了路径，方便找到各种情况下的图片