HTML|图像标签

1.常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP

2.标签

图像标签是img标签，格式如下：

<img src="../resource/image/demo01.png" alt="QQ图标" title="你好！悬停" >

在IEDA中可以输入img再按下tab键即可生成：

HTML|图像标签_图片标签

生成的内容只有src和alt，因为这两个是图片必须填写的信息，其中src是图片文件目录，alt则是图像加载失败后的代替文字。

图片路径可以是盘符路劲，也可以将图片放入IDEA中：

HTML|图像标签_ide_02

比如我的.html文件是放在如图HTML下的html文件下，那么我们可以建立一个和html并行的文件夹叫resource，这个文件夹可以用来存放我们的图片和视频资源，在resource文件夹下再建立一个image文件用来存放我们的图片，我去电脑桌面截取了qq的图标，复制到了image中，并且取名为demo01.png，如图中所示。

这时候我们就可以将src中的内容填写为路径了：

HTML|图像标签_ide_03

其中…/的意思是返回上一级，这样我们就可以点开网页查看了：

HTML|图像标签_html_04

我们可以看到qq图标的截图已经显示在了网页中

那么我们刚刚说到的alt是必须填写的，为什么呢？

如果我们把刚刚的路径改一下，01改为02，会发现网页中什么也没有了，因为找不到demo02图像，我们再填写上alt：

<img src="../resource/image/demo02.png" alt="QQ图标">

再次打开网页：

HTML|图像标签_ide_05

会发现有了一个破损的图像和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>

结果如下：

HTML|图像标签_ide_06

我们会发现设置了宽高之后图片时比之前变大了，另外如果将鼠标悬停在图片上面，还有有“你好！悬停”的字样。

除此之外，还可以有很多的图片设置内容：

HTML|图像标签_html_07

人生没有白走的路，每一步都算数！