[toc]

📖图片元素

🏷1.img元素

image缩写，空元素，无元素内容

  1.     <!-- 
  2.         src 图片地址（资源地址）
  3.         + 站内资源 ./image/     ../image/       demo.jpg
  4.         + 站外资源 https:www.demo.com/image/
  5.         alt 图片替换文本
  6.         图片因为某种原因显示失败时会显示替换文本
  7.      -->
  8.     <img src="https://duqianedu.com/storage/images/hBQlXGMJEcnfK5Dj1hcogHZ6Vstx7SKNR9RUqOTM.jpg" alt="渡阡科技">

🏷2.与a元素连用

全部跳转

  1.     <!-- 
  2.         与a元素连用
  3.         实现点击图片跳转操作
  4.      -->
  5.      <a href="https://www.duqianedu.com">
  6.          <img src="https://duqianedu.com/storage/images/hBQlXGMJEcnfK5Dj1hcogHZ6Vstx7SKNR9RUqOTM.jpg" alt="渡阡科技">
  7.      </a>

🏷3.区域跳转

map (注意：计算坐标时，需要使用专业的工具去截图，否者会出现偏差 因为每台电脑的屏幕分辨率会不同)

  1.     <!-- 
  2.          通过img中usemap与map中的name绑定
  3.          使用map的子元素对图片进行区域划分
  4.          shape 类型
  5.             circle 圆形 coords参数（x，y，半径） 
  6.             rect 矩形 coords参数（左上坐标 右下坐标）
  7.             poly 多边形 coords参数（每个顶点坐标）
  8.          coords 坐标
  9.          href 跳转地址
  10.          alt 图片替换文本
  11.          target 跳转是否新窗口
  12.       -->
  13.      <img src="https://bkimg.cdn.bcebos.com/pic/fd039245d688d43f8794318d5c55c51b0ef41bd58d33?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto" alt="行星" usemap="#solarMap">
  14.      <map name="solarMap">
  15.          <area shape="circle" coords="363 341 60" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" alt="木星">
  16.          <area shape="rect" coords="335 410 400 505" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105" alt="火星">
  17.          <area shape="poly" coords="100 300 300 100 300 200" href="https://www.baidu.com" alt="百度">
  18.      </map>

🏷4.和figure元素绑定

语义化元素: 指代，定义，通常用于把图片标题描述包裹起来，告诉浏览器这些内容是同一部分

子元素：figcaption 一般用于标题