HTML--Boby部分之<img>标签-优快云博客

本文详细介绍了HTML中<img>标签的使用方法，包括如何显示图片、设置图片大小、添加超链接及提示信息等。通过实例展示了如何解决图片加载失败的问题，并提供了优化图片展示效果的技巧。

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

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

<img>标签是用来显示图片的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <img src="2.jfif" alt="校花" />
</body>
</html>

结果展示：

注意事项：图片需放在html同一目录，不然需要写上图片的相对路径

以上结果可以看出图片加载成功了，但是有点大，优化一下就上长和宽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <img src="2.jfif" alt="校花" width="200px;" height="200px;" />
</body>
</html>

结果展示：

给图片加超链接跳转功能，比如淘宝一点击商品图片就跳转到商品详情页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <a href="s12.html">
        <img src="2.jfif" alt="校花" width="200px;" height="200px;" />
    </a>
</body>
</html>

跳转到的页面，HTML文件名称为s12.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form>
        <p>个人简介：</p>
        <p>姓名：不知</p>
        <p>年龄：不详</p>
        <p>她是网络上下载的不知名校花，哈哈哈哈</p>
    </form>
</body>
</html>

效果展示：

打开网页显示照片，点击照片后跳转到超链接

注意：其中alt属性是文字描述，如果图片加载失败，就显示该文件，效果如下

Title标签是用来显示提示信息的，鼠标悬浮到图片显示该提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <a href="s12.html">
        <img src="2.jfif" title="大美女" alt="校花" width="200px;" height="200px;"/>
    </a>
</body>
</html>