HTML核心之图片元素

最新推荐文章于 2024-06-07 16:05:41 发布

传说中的懿痕

最新推荐文章于 2024-06-07 16:05:41 发布

阅读量248

点赞数

分类专栏： HTML核心知识文章标签： html html5 css

本文链接：https://blog.csdn.net/yihen0214/article/details/119934939

版权

HTML核心知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中img元素与a元素、map元素以及figure元素的联用方式。通过将img元素嵌套在a元素内，可以实现图片的超链接功能。与map元素配合，可以对图片进行区域划分，使不同区域触发不同的效果，如跳转链接。此外，与figure元素结合，可以更好地组织图片及其相关描述，提供更规范的网页结构。了解这些技巧有助于提升网页的交互性和信息组织性。

摘要由CSDN通过智能技术生成

图片元素

文章目录

图片元素

img 元素

image缩写，空元素

src属性：填写图片地址
alt属性：当图片资源加载失败时，将使用该图片的文字代替图片
在这里插入图片描述

与a元素联用

将img元素嵌套在a元素中，可以给图片加上超链接

<a href=""><img src="" alt=""></a>

和map元素联用

将一张图片划分区域，是某一特定区域有特定效果，如超链接

和锚链接的用法相似，先用name属性做标识
区域划分：map的子元素----area

<area shape="circle" coords="254.4,648.8,36" href="https://baike.baidu.com/item/%E7%BA%A2%E5%8F%8C%E5%96%9C/13838763" alt="" target="_blank">
<area shape='rect' coords="635.2,148,897.6,149.6" href="https://blog.csdn.net/" alt="">

shape属性：表示划分区域的形状

当shape=’circle‘时，coords里面放圆心坐标和半径
当shape=’rect‘时，coords里面放矩形左上角和右下角坐标
当shape=’poly‘时，coords里面放多边形对应点的坐标

衡量坐标时（以图片左上角为原点），为了避免衡量误差，需要使用专业的衡量工具，或者用QQ截图，但是要将坐标/1.25（根据电脑缩放来决定），不然不准确。
在这里插入图片描述
完整使用

  <a target="_blank" href="https://baike.baidu.com/item/%E4%B9%92%E4%B9%93%E7%90%83/221415?fr=aladdin">
        <img usemap="#pingpongMap" src="./img/src=http___pic1.16pic.com_00_34_64_16pic_3464985_b.jpg&refer=http___pic1.16pic.jfif" alt="这是一张乒乓球图片">
        </a>
 <map name='pingpongMap'>
        <area shape="circle" coords="254.4,648.8,36" href="https://baike.baidu.com/item/%E7%BA%A2%E5%8F%8C%E5%96%9C/13838763" alt="" target="_blank">
    </map>