HTML图像

最新推荐文章于 2024-03-25 22:10:06 发布

韵然CP

最新推荐文章于 2024-03-25 22:10:06 发布

阅读量1.3k

点赞数

分类专栏： JavaWeb

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

版权

JavaWeb 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

标签 <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新增属性）；

韵然CP

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML图像

标签<img />作用插入属性属性 src,alt1、支持格式：PNG/JPEG/GIF/PDF PDF必须是单页2、非标签格式：background<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
复制链接

扫一扫

专栏目录