标签 <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新增属性);