图片元素
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>