图片元素

img元素

image缩写，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替换图片

和a元素连用

    <a href="https://www.baidu.com"><img src="https://edu-image.nosdn.127.net/1453A9365971AA454EBFBAEC115C6288.jpg?imageView&quality=100&thumbnail=1205y400" alt=""></a>

map地图

• shape 形状
  圆形 circle 圆心坐标、半径 需要用 x，y，z
  矩形 rect 矩形的左上角、矩形的右下角 x，y
  多边形 poly 根据形状逐个描述每个点 a,b,c,b,ef

• coords 坐标
  形状关键点坐标

• href
  点击图标区域的地址

• alt

-target
调转方式 _self、_blank

    <a href="">
        <img usemap="#solarMap" 
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586341806102&di=d5d5bec1d918a927f668f6808dd8c7a9&imgtype=0&src=http%3A%2F%2Fpics5.baidu.com%2Ffeed%2Fa686c9177f3e6709c3c2be9eb8fffd3bf9dc554b.png%3Ftoken%3D6696623b54b2a08330230fa6cc76870c" alt="">
    </a>
    <map name="solarMap">
        <area shape="circle" coords="314，176,30" href="https://www.jianshu.com" alt="">
    </map>

在衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具，比如px、pxcook

为了SEO优化，建议可以做如下设置

和figure元素联用

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素 figcaption
可以包裹起来标题，方便SEO

    <figure>
        <a href="">
            <img usemap="#solarMap" 
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586341806102&di=d5d5bec1d918a927f668f6808dd8c7a9&imgtype=0&src=http%3A%2F%2Fpics5.baidu.com%2Ffeed%2Fa686c9177f3e6709c3c2be9eb8fffd3bf9dc554b.png%3Ftoken%3D6696623b54b2a08330230fa6cc76870c" alt="">
        </a>
        <map name="solarMap">
            <area shape="circle" coords="314，176,30" href="https://www.jianshu.com" alt="">
        </map>
        <figcaption>
            <h2>太阳系</h2>
        </figcaption>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, iste mollitia! Dolorum voluptatem ducimus eaque dignissimos a fuga quibusdam possimus, magnam mollitia id modi, facere quo exercitationem. In, esse tempore!</p>
    </figure>