3.4Html5之图像标签

马肤
这是懒羊羊

温馨提示:这篇文章已超过521天没有更新,请注意相关的内容是否还可用!

前言

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

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



3.4Html5之图像标签,屏幕截图 2022-11-13 183031.png,标签,第1张



正文


<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>



 



 








文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,461人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码