持续创作，加速成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
这是【HTML 教程系列第 17 篇】，如果觉得有用的话，欢迎关注专栏。
一：什么是图片标签 img
在 HTML 中，图片标签由 img 定义。其中，img 是英文 image(图片) 的缩写。
二：img 的属性
1：src 属性
作用 src 用于指定图片的路径(或图片的地址)，其中 src 是英文 source(源头，资源) 的缩写。
语法
<img src="图片路径(地址)" />
src 是 img 标签中不可或缺的一个属性，因为当你使用 img 标签，但却没有指定图片路径，img 标签就失去了意义。
举例说明
例1：显示一张本地图片 这里我将一个 鸣人佐助.jpg 的图片放到 img 文件夹下，代码如下所示
<img src="img/鸣人佐助.jpg" />
浏览器运行效果如下所示
img/鸣人佐助.jpg 这就是这张图片的路径，需要注意的是，后面的图片类型也是需要有的，否则图片是无法显示出来的。
例2：显示一张网络图片
上面我们加载的是一张本地已经存在的图片，是不是只能在网上找到一张图片，然后下载下来指定图片路径才可以显示一张图片呢？
除了本地图片，我们还可以将图片的链接地址写到 src 属性值里，也可以显示出来该图片，代码如下所示
<img src="http://tupian.qqw21.com/article/UploadPic/2015-7/201571714592520260.jpg" />
浏览器运行效果如下所示
2：alt 属性
作用
指定无法显示图像时的提示文字。
举例说明 当图片、图片路径不存在，或图片名称、后缀名填写有误时，浏览器运行效果如下所示
对于用户来说可能不知道这个图片意味着什么，而我们通过 alt 属性，写上我们的提示文字，用户就知道显示这张图片时意味着什么。
我故意把图片的后缀名给去掉，代码如下所示
<img src="img/鸣人佐助" alt="无法显示该图片"/>
浏览器运行效果如下所示
实际开发中，alt 属性也是必选属性，虽然不填也可以正常显示图片，但编辑器会给出警告提示。
3：title 属性
作用
当鼠标经过图片上时，会显示 title 属性中的文字。
举例说明
当我把鼠标放到图片上时，我希望看到关于图片的介绍，如何实现呢？代码如下所示
<img src="img/鸣人佐助.jpg" title="左边是佐助，右边是鸣人" />
浏览器运行效果如下所示
title 是可选属性，可加可不加。
4：width、height 属性
作用
width 用于指定图片的宽度，height 用于指定图片的高度。
举例说明
鸣人佐助 这张图片的分辨率是 200x200 的，我们通过 width、height 属性将它的分辨率更改为 220x240 ,代码如下所示
<img src="img/鸣人佐助.jpg" width="220" height="240" />
更改后，通过重新刷新浏览器，来看一下是否更改成功了，运行效果如下所示
可见，图片的宽高的确发生了改变。
你的问题得到解决了吗？欢迎在评论区留言。
赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。
结束语
技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。
最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。
