2.3.6 图像标签

HTML 提供了<img>标签，可以向网页中嵌入图片。<img>标签是一个单标签，不需要书写标签对。<img>标签可以书写多个属性，下面将依次展开介绍。

<img>标签中可以书写src属性，用来指定要嵌入的图片的URL地址，地址可以是绝对路径也可以是相对路径。示例代码如下。

上方代码在src属性中书写了绝对路径和相对路径，相对路径表示要嵌入图片的URL地址是当前目录下images文件夹下的logo.png图片，绝对路径表示要嵌入图片的URL是本地电脑E盘目录下的www文件夹下的logo.png图片。

<img>标签中可以书写width属性，设置图片的宽度；书写height属性，设置图片的高度。示例代码如下。

<img>标签中还可以书写alt属性，用来指定<img>标签的备用内容，这个内容会在图像无法显示时出现。示例代码如下。

例如，在section03.html文件中，编写测试代码如下。

但没有在section03.html同级目录images中添加图片，当图片无法加载时，会显示alt属性中的内容“尚硅谷logo”，如图2-25所示。

图2-25 图片无法显示时的页面效果

<img>标签的常见用法是结合<a>标签，创建一个可以单击的图像链接。例如，在 section03.html 中编写测试代码如下。

上方代码实现了单击图像可以跳转尚硅谷官网的效果，在网页中插入图片运行代码查看效果，如图2-26所示。

图2-26 在网页中插入图片

单击图片，成功跳转尚硅谷官网，如图2-27所示。

图2-27 成功跳转尚硅谷官网