从零开始学前端（HTML篇）：5、图片元素img

最新推荐文章于 2023-09-18 18:22:04 发布

不文艺的青年

最新推荐文章于 2023-09-18 18:22:04 发布

阅读量212

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/WuYanZu6243/article/details/126891898

版权

图片元素

<!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>
    <figure> <!--总包裹图片、图片标题、图片描述的标签-->
        <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281" target="_blank">
            <img usemap="#ShiYongMap" src="./../图片/TuPianYuanSu.png" alt="这是一种太阳系图片">
        </a>
        <figcaption><!--包裹标题-->
            <h2>太阳系</h2>
        </figcaption>      
        <p>太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。 [1]  太阳系位于距银河系中心大约2.4~2.7万光年的位置（银河系的恒星数量约在1000亿到4000亿之间，太阳只是其中之一 [2]  ）。太阳以220千米/秒的速度绕银心运动，大约2.5亿年绕行一周，地球气候及整体自然界也因此发生2.5亿年的周期性变化。太阳运行的方向基本上是朝向织女座，靠近武仙座的方向。</p>
    </figure>
    <map name="ShiYongMap">
        <!-- 
            area元素解释：
            shape：代表取什么形状.circle是圆形，rect是矩形，poly是多边形.
            coords:代表取形状的坐标。circle时前两位是圆心坐标，后一位是半径长度。rect时前、后两位分别是矩形左上角和右下角的坐标。poly时每两位是每个顶点的坐标。
         -->
        <area shape="circle" coords="422,345,55" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" target="_blank" title="点击了解木星"> <!--圆形-->
        <area shape="rect" coords="422,345,500,400" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" target="_blank"> <!--矩形-->
        <area shape="poly" coords="422,345,500,100,300,200" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" target="_blank"> <!--不规则性-->
    </map>
</body>
</html>