跳到主要内容

图片元素

img 元素如何使用？​

  • 类型: 空元素, 只有开始标签;
  • src: 图片 URL;
  • alt: 图片描述信息;
  • width/height: 显示尺寸;
<img src="favicon144.png" alt="Visit the MDN site" width="100" height="100" />

alt 属性什么时候最重要？​

  • 加载失败: 图片取不回来时, 浏览器用 alt 文本占位;
  • 无障碍: 辅助技术朗读 alt 内容说明图片;
  • 写法: 描述图片传达的信息, 而不是文件名;

图片如何作为链接内容？​

  • 写法: 用 a 包裹 img;
  • 效果: 点击图片跳转, 此时 alt 同时说明链接目标;
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" width="100" height="100" />
</a>

figure 与 figcaption 如何给图片加标题？​

  • figure: 把图片与说明组织成一个独立单元;
  • figcaption: 该单元内的说明文字, 必须写在 figure 内部;
  • 适用范围: figure 不限于图片, 也可用于代码、图表等;
<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>