前言

这篇文章将系统的给大家讲解HTML中的图像标签，顾名思义；就是如何将这个图像展现出来。还是一个要求有头有尾。其他也没什么

要说的。这篇文章中我们也将给大家讲解到五个图像标签

正文

<img>标签

在HTML中算是比较常见的一个标签，图像不是插入到HTML页面中，而是链接到它

属性：

[src]：规定显示图像的URL

[alt]：规定图像的替代文本，当图像显示出现问题时，文字会出现替代图像

[width]：规定图像的宽度

[height]：规定图像的高度

[usemap]：将图像定义为客户器端图像映射

[ismap]：将图像规定为服务器端图像映射

<img src="https://www.857vps.cn/zb_users/upload/2022/09/202209021662119885147081.png" alt="VPS857" width="600px"/>

切记要加http/https否则将无法链接到该图像

<canvas>标签

常用属性：
[width]：规定画板的宽度
[height]：规定画板的高度

这个标签不常用我就不多说了，想知道的朋友可以自己去看哦

<map>标签

常用属性：

[name]：必需，为image-map规定的名称，用来被img标签中的usemap使用

说明：

<img> 中的 usemap 属性可引用 <map> 的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性

<area>标签

常用属性：

[href]：规定区域的目标URL

[alt]：规定区域的替代文本。如果使用 href 属性，则该属性是必需的

[rel]：规定当前文档与目标URL之间的关系

[target]：规定在何处打开目标URL

[shape]：规定区域的形状

只要记住这几点，我想也就差不多了，欢迎各位留言

代码示例：

<img src="img/planets.gif" alt="这张图片可能有问题！" width="146" height="126" usemap="#img-map">
<map name="img-map">
<area href="img/sun.gif" alt="this is sun!" target="_blank" shape="rect" coords="0,0,82,126"/>
<area href="img/merglobe.gif" alt="this is mercur!" target="_blank" shape="circle" coords="91,59,3"/>
<area href="img/venglobe.gif" alt="this is venus!" target="_blank" shape="circle" coords="124,58,8"/>
</map>