html中的图像标签

最新推荐文章于 2024-04-21 17:00:00 发布

「已注销」

最新推荐文章于 2024-04-21 17:00:00 发布

阅读量2.4k

点赞数

分类专栏： # 六 web前端+vue 文章标签： html 前端 css

本文链接：https://blog.csdn.net/CNMBZY/article/details/122388250

版权

六 web前端+vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网页中，除了看文字，剩下的就是有图有真相的图片了，而图片对应的应用标签主要有img,map,area,canvas，以及figcation,figure总共六种标签

图像img
图像中的img标签主要用于定义html中的图像，而图像并不会直接定义到html页面中，而是链接到html页面上
img的属性:
src:说明图像的url
alt：规定图像的替代文本
width：设置图像的宽度
height:用于定义图像的高度

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="image/1.jpg" alt="图片加载失败" align="middle" border="10px" width="400px" height="400px" title="DUT">
    <!--width与height只用写一个，等比例放大缩小
    border 出现一个图像
    title:当图片悬停到其上时，会出现提示
    alt:图片不能正常加载时，其上出现的文字
    
    -->
    <a href="http://www.baidu.com" target="_blnk">
        <img src="image/1.jpg" width="200" height="200" alt="网站_logo">
    </a>
</body>
</html>

图片映射,

map
定义图像映射，图像映射（image-map）
主要指的是带有可单击区域的一幅图像
area
定义图像映射的区域，area元素永远嵌套在map元素的内部，area元素可定义图像映射中的区域
< img > 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="image/1.jpg" alt="图片加载失败" border="10px" width="400px" height="400px" title="DUT"  usemap="#Map">
    <!--width与height只用写一个，等比例放大缩小
    border 出现一个图像
    title:当图片悬停到其上时，会出现提示
    alt:图片不能正常加载时，其上出现的文字
    -->
    <map name="Map">

        <area shape="rect" coords="0,0,200,200" href="http://www.baidu.com" >
        <area shape="rect" coords="200,200,400,0" href="http://www.dxper.net" >
        <area shape="rect" coords="200,200,400,400" href="http://www.xiaomi.com" >
        <area shape="rect" coords="0,400,200,200" href="http://www.amazon.com" >
        
    </map>
   



</body>

</html>

Shape属性的设置说明：

Rect
定义一个矩形区域，coords属性设置值为左上角、右下角的坐标，各个坐标之间用逗号分开。
Poly：
定义一个多边型区域，coords属性设置值为多边形各个顶点的坐标值。
Circle：
定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。