图片元素
img 元素
image缩写,空元素
src属性:填写图片地址
alt属性:当图片资源加载失败时,将使用该图片的文字代替图片
与a元素联用
将img元素嵌套在a元素中,可以给图片加上超链接
<a href=""><img src="" alt=""></a>
和map元素联用
将一张图片划分区域,是某一特定区域有特定效果,如超链接
- 和锚链接的用法相似,先用name属性做标识
- 区域划分:map的子元素----area
<area shape="circle" coords="254.4,648.8,36" href="https://baike.baidu.com/item/%E7%BA%A2%E5%8F%8C%E5%96%9C/13838763" alt="" target="_blank">
<area shape='rect' coords="635.2,148,897.6,149.6" href="https://blog.csdn.net/" alt="">
shape属性:表示划分区域的形状
- 当shape=’circle‘时,coords里面放圆心坐标和半径
- 当shape=’rect‘时,coords里面放矩形左上角和右下角坐标
- 当shape=’poly‘时,coords里面放多边形对应点的坐标
衡量坐标时(以图片左上角为原点),为了避免衡量误差,需要使用专业的衡量工具,或者用QQ截图,但是要将坐标/1.25(根据电脑缩放来决定),不然不准确。
完整使用
<a target="_blank" href="https://baike.baidu.com/item/%E4%B9%92%E4%B9%93%E7%90%83/221415?fr=aladdin">
<img usemap="#pingpongMap" src="./img/src=http___pic1.16pic.com_00_34_64_16pic_3464985_b.jpg&refer=http___pic1.16pic.jfif" alt="这是一张乒乓球图片">
</a>
<map name='pingpongMap'>
<area shape="circle" coords="254.4,648.8,36" href="https://baike.baidu.com/item/%E7%BA%A2%E5%8F%8C%E5%96%9C/13838763" alt="" target="_blank">
</map>
和figure元素联用
指代、定义,通常用于把图片标题、图片、描述包裹起来,表示这整个区域都是和图片相关的信息
子元素:figcaption,表示标题,将图片描述信息的标题包裹起来