HTML图片标签

一、图片标签的介绍

1.场景：在网页中显示图片

2.代码：

3.特点：

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

4.标签的完整结构图：

 

5.属性的注意点：

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

二、图片标签的src属性

1.属性名：src

2.属性值：目标图片的路径

3.注意点：

• 当前网页和目标图片在同一文件夹中，路径直接写目标文件的名字即可（包括后缀名）
• 路径的情况有很多

 

 

三 、图片标签的alt属性 

1.属性名：alt

2.属性值：替换文本

• 当前图片加载失败时，才显示alt的文本
• 当前图片加载成功时，不会显示alt的文本

 

 四、图片标签的title属性

1.属性名：title

2.属性值：提示文本

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

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

 五、图片标签的width和height属性

1.属性名：width和height

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

3.注意点：

• 如果设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形