图像标签学习

一方1

已于 2022-09-29 14:36:31 修改

阅读量455

点赞数

文章标签： servlet java 开发语言

于 2022-09-29 14:34:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67737085/article/details/127106085

版权

本文介绍了如何在HTML中使用图像标签，强调了`src`和`alt`属性的重要性。`src`指定图片路径，`alt`定义了图片无法显示时的替代文字。同时，还讨论了扩展应用，如设置`title`添加悬停文字，以及调整`height`和`width`来改变图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.src+tab快捷输入图像标签代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<img src="../resource/image/1.jpg" alt="">
</body>
</html>

src里面输入的是图片资源路径。

alt里面输入的便是当图片无法显示时浏览器页面显示的文字。代码如下（此时我们把图片路径故意改错，让图片无法显示。）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<img src="../resource/image/1.jpg" alt="头像">
</body>
</html>

我们可以看到图片路径错误，便显示了alt里面的内容：头像。

2.扩展

可以在图像标签代码中加入悬停文字：title="内容"。图片高度：hight="高度"。图片宽度：weight="宽度"。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--图像标签-->
<!--src+tab输入图像标签代码-->
<!--src图像地址-->
<!--../代表上一级目录-->
<!--alt里面输入的便是当图片无法显示时浏览器页面显示的文字。-->

<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" height="30" weight="30">
</body>
</html>