HTML img 语法
在 HTML 中，img 标签用于在网页中插入一张图片。常用的图片格式有 JPG、PNG、GIF、WebP 等。
语法：
<img src="图片路径" alt="替代文本" title="提示文本">说明：
img 标签是一个自闭合标签，不需要额外的结束标签。在最新的 HTML5 标准中，下面 2 种写法都是可行的，推荐写法 1。
<!--写法1-->
<img src="" alt="">
<!--写法2-->
<img src="" alt="" />img 标签的属性有很多，常用只有 3 个（如下表所示）。
| 属性 | 说明 |
|---|---|
| src（必选） | 指定图片的路径 |
| alt（必选） | 指定图片的替代文本（供搜索引擎查看） |
| title（可选） | 指定图片的替代文本（供用户查看） |
提示: 欧美网站非常注重考虑有障碍人士的阅读体验。而 alt 属性对于无障碍性非常重要，因为它会被屏幕阅读器阅读，以便为无法看到图像的用户提供信息。
HTML img 摘要
| 属于 | HTML 图片 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML img 示例
接下来，我们通过一个简单的例子来讲解一下 HTML img 标签是如何使用的。
示例 1：img 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
“imgs/bird.jpg” 就是这张图片的路径。在这个例子中，如果我们把 “imgs/bird.jpg” 去掉，此时图片就不会显示出来了。
img 标签的 alt 和 title
在 img 标签中，alt 和 title 这 2 个属性都是用于指定图片的提示文字。一般情况下，alt 和 title 的值是相同的。不过两者也有很大的不同。
alt：用于图片描述，这个描述文字是给 “搜索引擎” 看的。并且当图片无法显示时，页面会显示 alt 中的文字。title：也用于图片描述，不过这个描述文字是给 “用户” 看的。并且当鼠标指针移到图片上时，会显示 title 中的文字。
示例 2：使用图片的 alt 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="imgs/bird.jpg" alt="little bird">
</body>
</html>页面效果如下图所示。
分析：
咋看上去，加上 alt 属性跟没加上是一样的效果呢？实际上，当我们把 “imgs/bird.jpg” 去掉后，此时图片无法正常显示出来，但却可以看到浏览器会显示 alt 的提示文字，如下图所示。如果没有加上 alt 属性值，图片无法显示时，则不会有提示文字。
示例 3：使用图片的 title 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="imgs/bird.jpg" title="little bird">
</body>
</html>页面效果如下图所示。
分析：
当我们把鼠标移到图片上时，就会显示 title 中的提示文字，如下图所示。
在实际开发中，对于 img 标签来说，src 和 alt 这 2 个是必需属性（一定要添加）。这是因为没有 src 属性，图片就无法显示出来。没有 alt 属性，搜索引擎就会认为当前页面的图片不友好。而 title 是可选属性，可加可不加。
