【HTML 教程系列第 17 篇】什么是 HTML 中的图片标签 img

这是【HTML 教程系列第 17 篇】，如果觉得有用的话，欢迎关注专栏。

一：什么是图片标签 img

在 HTML 中，图片标签由 img 定义。其中，img 是英文 image(图片) 的缩写。

二：img 的属性 1：src 属性

作用 src 用于指定图片的路径(或图片的地址)，其中 src 是英文 source(源头，资源) 的缩写。

语法

src 是 img 标签中不可或缺的一个属性，因为当你使用 img 标签，但却没有指定图片路径，img 标签就失去了意义。

举例说明

例1：显示一张本地图片 这里我将一个 鸣人佐助.jpg 的图片放到 img 文件夹下，代码如下所示

浏览器运行效果如下所示 img/鸣人佐助.jpg 这就是这张图片的路径，需要注意的是，后面的图片类型也是需要有的，否则图片是无法显示出来的。

例2：显示一张网络图片 上面我们加载的是一张本地已经存在的图片，是不是只能在网上找到一张图片，然后下载下来指定图片路径才可以显示一张图片呢？

除了本地图片，我们还可以将图片的链接地址写到 src 属性值里，也可以显示出来该图片，代码如下所示

浏览器运行效果如下所示

2：alt 属性

作用 指定无法显示图像时的提示文字。

举例说明 当图片、图片路径不存在，或图片名称、后缀名填写有误时，浏览器运行效果如下所示 对于用户来说可能不知道这个图片意味着什么，而我们通过 alt 属性，写上我们的提示文字，用户就知道显示这张图片时意味着什么。

我故意把图片的后缀名给去掉，代码如下所示

浏览器运行效果如下所示 实际开发中，alt 属性也是必选属性，虽然不填也可以正常显示图片，但编辑器会给出警告提示。

3：title 属性

作用 当鼠标经过图片上时，会显示 title 属性中的文字。

举例说明 当我把鼠标放到图片上时，我希望看到关于图片的介绍，如何实现呢？代码如下所示

浏览器运行效果如下所示 title 是可选属性，可加可不加。

4：width、height 属性

作用 width 用于指定图片的宽度，height 用于指定图片的高度。

举例说明 鸣人佐助 这张图片的分辨率是 200x200 的，我们通过 width、height 属性将它的分辨率更改为 220x240 ,代码如下所示

更改后，通过重新刷新浏览器，来看一下是否更改成功了，运行效果如下所示 可见，图片的宽高的确发生了改变。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。