HTML图像

最新推荐文章于 2025-05-28 06:12:52 发布

韵然CP

最新推荐文章于 2025-05-28 06:12:52 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_40354578/article/details/93490203

JavaWeb 专栏收录该内容

51 篇文章

订阅专栏

博客介绍了HTML中图片标签的使用，包括插入属性如src、alt等，支持PNG、JPEG等格式，PDF需单页。还提到可改变图片宽高，alt用于图片地址错误时显示信息。介绍了插入本地图片的绝对路径和相对路径，以及多个图片属性及其作用。

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

标签 <img />

作用插入属性

属性 src,alt

1、支持格式：PNG/JPEG/GIF/PDF PDF必须是单页

2、非标签格式：background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    
</head>
<body>
    <img src="https://img-blog.csdnimg.cn/2019062411380686.png"/>
</body>
</html>

我们也可以改变宽和高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    
</head>
<body>
    <img width="100px" height="100px" src="https://img-blog.csdnimg.cn/2019062411380686.png"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    
</head>
<body>
    <img  alt="logo" src="https://img-blog.csdnimg.cn/201062411380686.png"/>
</body>
</html>

alt的作用是当我们的图片地址错误时显示图片信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    <style>
        .imooc-logo{
            background: url(https://img-blog.csdnimg.cn/2019062411380686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzU0NTc4,size_16,color_FFFFFF,t_70);
            width: 100px;
            height: 80px;
        }
        </style>
    
</head>
<body>
    <img  alt="imooc-logo" src="https://img-blog.csdnimg.cn/2019062411380686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzU0NTc4,size_16,color_FFFFFF,t_70"/>

    <p class="imooc-logo">

        </p>
</body>
</html>

.的作用是在找具有内容名字的类

两种插入图片的方式，但都是我们知道图片的url

下面我们介绍插入本地的图片形式

绝对路径：Windows系统的绝对路径是从盘符开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    <style>
        .imooc-logo{
            background: url(file:///D:/VSCodesetup_v1.31.0/code/imag/1.html/logo.png);
            width: 100px;
            height: 80px;
        }
        </style>
    
</head>
<body>
    <img  alt="imooc-logo" src="https://img-blog.csdnimg.cn/2019062411380686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzU0NTc4,size_16,color_FFFFFF,t_70"/>

    <p class="imooc-logo">

        </p>
</body>
</html>

相对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>
    <style>
        .imooc-logo{
            background: url(logo.png);
            width: 100px;
            height: 80px;
        }
        </style>
    
</head>
<body>
    <img  alt="imooc-logo" src="https://img-blog.csdnimg.cn/2019062411380686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzU0NTc4,size_16,color_FFFFFF,t_70"/>

    <p class="imooc-logo">

        </p>
</body>
</html>

alt：图像的替代文本

src：显示图像的URL

height：图像的高度

width：图像的宽度

ismap：将图像规定为服务器端图像映射，值为：ismap

usemap：将图像定义为客户器端图像映射，值可以为：#mapname；crossorigin：设置图像的跨域属性，值可以为：anonymous 、use-credentials（html5新增属性）；