HTML|图像标签
1.常见的图像格式
- JPG
- GIF
- PNG
- BMP
2.标签
图像标签是img标签，格式如下：
<img src="../resource/image/demo01.png" alt="QQ图标" title="你好！悬停" >
在IEDA中可以输入img再按下tab键即可生成：
生成的内容只有src和alt，因为这两个是图片必须填写的信息，其中src是图片文件目录，alt则是图像加载失败后的代替文字。
图片路径可以是盘符路劲，也可以将图片放入IDEA中：
比如我的.html文件是放在如图HTML下的html文件下，那么我们可以建立一个和html并行的文件夹叫resource，这个文件夹可以用来存放我们的图片和视频资源，在resource文件夹下再建立一个image文件用来存放我们的图片，我去电脑桌面截取了qq的图标，复制到了image中，并且取名为demo01.png，如图中所示。
这时候我们就可以将src中的内容填写为路径了：
其中…/的意思是返回上一级，这样我们就可以点开网页查看了：
我们可以看到qq图标的截图已经显示在了网页中
那么我们刚刚说到的alt是必须填写的，为什么呢？
如果我们把刚刚的路径改一下，01改为02，会发现网页中什么也没有了，因为找不到demo02图像，我们再填写上alt：
<img src="../resource/image/demo02.png" alt="QQ图标">
再次打开网页：
会发现有了一个破损的图像和alt处写的QQ图标字样，这是因为如果未找到demo01图像，在网页中就会显示alt的提示内容。
3.其他内容
除了必须填写的内容意外我们还可以填写其他的内容，比如：
- title表示悬停再图片上时显示的内容
- width表示图片的宽度
- height表示图片的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<img src="../resource/image/demo01.png" alt="QQ图标" title="你好！悬停" height="500" width="500">
</body>
</html>
结果如下：
我们会发现设置了宽高之后图片时比之前变大了，另外如果将鼠标悬停在图片上面，还有有“你好！悬停”的字样。
除此之外，还可以有很多的图片设置内容：
人生没有白走的路，每一步都算数！
3727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
