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

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

文章目录

一：什么是图片标签 img
二：img 的属性
- 1：src 属性
- 2：alt 属性
- 3：title 属性
- 4：width、height 属性

一：什么是图片标签 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" />

更改后，通过重新刷新浏览器，来看一下是否更改成功了，运行效果如下所示

可见，图片的宽高的确发生了改变。

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

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

结束语

技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。

最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。