图片元素

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro

代码示例

<img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">

<map name="solarMap">
        <!--coords第一个参数圆心x坐标，第二个圆心y坐标，第三个圆心半径-->
        <area shape="circle" coords="360,204,48" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
       
      <!--coords矩形的左上角和右下角-->
      <area shape="rect" coords="323,282,395,320" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
       
       <!--coords多边形的每一个点的坐标-->
  <area shape="poly" coords="601,371,645,312,678,338,645,392" href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin" target="_blank">
</map>

增强图片的语义化：figure元素

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

子元素：figcaption

<figure>
 
    <img src="" alt=""/>
 
    <figcaption>对图片文字的描述</figcaption>
 
</figure>