1. 图片标签 <img>

• 基本用法：<img> 标签用于在网页中插入图片。图片的路径可以是相对路径或绝对路径。

  <img src="image.jpg" alt="描述文字">

  • src：图片的路径。

  • alt：图片加载失败时显示的替代文本。

• 相对路径与绝对路径：

  • 相对路径：相对于当前HTML文件的路径。例如，images/pic.jpg。

  • 绝对路径：完整的URL路径。例如，https://example.com/images/pic.jpg。

• 图片的宽高：

  • 可以通过 width 和 height 属性设置图片的宽高。如果只设置一个，另一个会根据图片的比例自动调整。

  <img src="image.jpg" width="200" height="100">
  

• 图片的加载与占位：

  • 如果图片加载较慢，可以通过设置 width 和 height 属性来预留空间，避免页面布局抖动。

2. 图片的 download 属性

• 作用：download 属性可以让用户点击链接时直接下载文件，而不是打开它。

  <a href="file.pdf" download="filename.pdf">下载文件</a>
  

  • download 属性的值可以指定下载文件的默认名称。

• 限制：

  • download 属性只能用于同源资源（即只能下载自己网站上的文件），不能用于跨域资源。

3. 图片的 srcset 属性

• 作用：srcset 属性用于为不同分辨率的设备提供不同大小的图片，以确保在高分辨率设备上显示更清晰的图片。

  <img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="描述">
  

  • 1x、2x、3x 表示图片的分辨率倍数。

• 适用场景：

  • 适用于高分辨率设备（如Retina屏幕），确保图片在高分辨率设备上显示清晰。

4. 图片的 map 和 area 标签

• 作用：<map> 和 <area> 标签可以将图片的某一部分设置为可点击区域，类似于图片地图。
   

  <img src="image.jpg" usemap="#imagemap" alt="描述">
  <map name="imagemap">
    <area shape="rect" coords="0,0,100,100" href="link1.html" alt="区域1">
    <area shape="circle" coords="150,150,50" href="link2.html" alt="区域2">
    <area shape="poly" coords="200,200,250,250,300,200" href="link3.html" alt="区域3">
  </map>

  • shape：区域的形状，可以是 rect（矩形）、circle（圆形）、poly（多边形）。

  • coords：区域的坐标，根据形状不同，坐标的格式也不同。

  • href：点击区域后跳转的链接。

• 适用场景：

  • 适用于需要在图片上设置多个可点击区域的场景，如产品图片的不同部分链接到不同的页面。

5. 图片的 loading 属性

• 作用：loading 属性可以控制图片的加载行为，支持 lazy 和 eager 两种模式。

  <img src="image.jpg" loading="lazy" alt="描述">
  

  • lazy：延迟加载，图片在进入视口时才开始加载。

  • eager：立即加载，图片在页面加载时立即加载。

• 适用场景：

  • lazy 适用于长页面中的图片，减少初始加载时间，提升页面性能。

6. 图片的 decoding 属性

• 作用：decoding 属性可以控制图片的解码方式，支持 sync、async 和 auto 三种模式。

  <img src="image.jpg" decoding="async" alt="描述">
  

  • sync：同步解码，图片解码时会阻塞页面渲染。

  • async：异步解码，图片解码时不会阻塞页面渲染。

  • auto：浏览器自动选择解码方式。

• 适用场景：

  • async 适用于需要快速加载页面的场景，避免图片解码阻塞页面渲染。

7. 图片的 crossorigin 属性

• 作用：crossorigin 属性用于控制图片的跨域请求行为，支持 anonymous 和 use-credentials 两种模式。

  <img src="https://example.com/image.jpg" crossorigin="anonymous" alt="描述">
  

  • anonymous：匿名请求，不发送用户凭证（如cookies）。

  • use-credentials：发送用户凭证。

• 适用场景：

  • 适用于需要从其他域名加载图片的场景，确保图片的跨域请求符合CORS策略。

8. 图片的 ismap 属性

• 作用：ismap 属性可以将图片设置为服务器端图像映射，点击图片时会发送点击的坐标到服务器。

  <a href="server-side-map">
    <img src="image.jpg" ismap alt="描述">
  </a>
  

  • 点击图片时，浏览器会将点击的坐标附加到链接的URL中，如 server-side-map?x=100&y=200。

• 适用场景：

  • 适用于需要根据用户点击图片的位置进行不同处理的场景，如地图应用。

9. 图片的 longdesc 属性

• 作用：longdesc 属性用于提供图片的详细描述，通常指向一个包含详细描述的URL。

  <img src="image.jpg" longdesc="description.html" alt="描述">
  

  • longdesc 属性的值是一个URL，指向包含图片详细描述的页面。

• 适用场景：

  • 适用于需要为图片提供详细描述的场景，如复杂的图表或图像。

10. 图片的 sizes 属性

• 作用：sizes 属性用于指定图片在不同设备上的显示大小，通常与 srcset 属性一起使用。

  <img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x" sizes="(max-width: 600px) 100vw, 50vw" alt="描述">
  

  • sizes 属性的值是一个媒体查询和对应的图片显示大小。当屏幕宽度最大为 600 像素时，图片宽度为视口宽度的 100%（100vw）；当屏幕宽度大于 600 像素时，图片宽度为视口宽度的 50%（50vw）。

• 适用场景：

  • 适用于响应式设计，确保图片在不同设备上显示合适的大小。

总结

本文主要讲解了HTML中的图片标签 <img> 及其相关属性，包括 src、alt、width、height、download、srcset、map、area 等。通过这些属性，可以实现图片的加载、响应式设计、图片地图等功能。掌握这些属性可以帮助开发者更好地控制图片的显示和行为，提升用户体验。