html5显示图片

HTML5 图片显示基础

基础 <img>

• 语法：<img src="路径" alt="描述文本" />
• 核心属性：
  • src：指定图片路径（必填）
  • alt：替代文本（必填，提升无障碍性）
  • width / height：设置宽高（建议通过CSS控制）：鼠标悬停时显示的提示文本
• 示例：

  <img src="image.jpg" alt="一只猫" width="300" />

属性	作用	备注
src	图片路径	必填
alt	替代文本（SEO/无障碍关键）	必填
loading	懒加载控制（lazy/eager）	HTML5新增

---

响应式图片（<picture>）

• 适用场景：根据设备分辨率、屏幕宽度显示不同图片
• 语法：

  <picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(max-width: 799px)" srcset="small.jpg">
    <img src="default.jpg" alt="响应式示例">
  </picture>

• 关键属性：
  • media：媒体查询条件（如屏幕宽度）
  • srcset：多个候选图片路径（用逗号分隔）

作用	示例值
<source>	定义条件分支	media="(min-width:600px)"
<img>	默认图片（无条件匹配时显示）	src="fallback.jpg"

---

图片优化与性能

• 懒加载：
  • 语法：<img loading="lazy" ... />
  • 作用：延迟加载非视口图片，提升首屏速度
• WebP格式支持：

  <picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="WebP示例">
  </picture>

• 压缩与尺寸控制：
  • 使用CSS设置最大宽度：img { max-width: 100%; }
  • 通过sizes属性优化响应式图片加载：

    <img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" 
         sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px" 
         alt="多尺寸示例">

---

其他显示方式

• SVG嵌入：

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>

• Canvas动态绘制：

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(document.getElementById('sourceImage'), 0, 0);

---

问题与解答

Q1: <picture> 和多个 <img> 标签有什么区别？

A:

• <picture> 是语义化标签，明确表示多图切换逻辑，且只需一次<img>作为回退；
• 多个<img>会导致冗余代码，且不利于SEO和无障碍访问。

Q2: 如何判断浏览器是否支持srcset？

A:

• 检测HTMLImageElement是否包含srcset属性：

  const support = 'srcset' in document.createElement('img');
  console.log(support); // true/false

• 不支持时可使用Polyfill库（如`