HTML图片

图片标签的介绍

场景：在网页中显示图片

代码：

1
<img src="" alt="">

特点：

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

属性注意点：

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

图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

1
2
3
<body>
    <img src="./1.jpg" alt="" title="">
</body>

图片标签的alt属性

属性名：alt

属性值：替换文本

  • 当图片加载失败时，才显示alt文本
  • 当图片加载成功时，不会显示alt的文本
1
2
3
<body>
    <img src="./错的路径图片会加载失败.jpg" alt="我是替换文本" title="">
</body>

图片标签的title属性

属性名：title

属性值：提示文本

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

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

1
2
3
<body>
    <img src="./1.jpg" alt="我是替换文本" title="我是title的效果">
</body>

图片标签的width和height属性

属性名：width和height

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

注意点：

  • 如果只设置了width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
  • 如果同时设置了width和height两个，若设置不当此时图片可能会变形
1
2
3
<body>
    <img src="./1.jpg" alt="我是替换文本" title="我是title的效果" width="200" height="200">
</body>

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/0.png" alt="美女图片" title="我是title的效果" width="200" height="200">
</body>
</html>