【HTML】什么是 HTML 中的图片标签 img

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

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

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