- 剑指JavaWeb:技术详解与应用实践
- 尚硅谷教育编著
- 498字
- 2025-02-25 19:31:53
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 成功跳转尚硅谷官网