: 图像标签

最后更新：2026-09-12

<img>图像标签

<img>（图像）元素用于在页面中嵌入图片。它是一个空元素（void），不需要结束标签。必须包含 src 和 alt 属性：src 指定图片地址，alt 提供替代文本（对可访问性和 SEO 很重要）。

分类	链接与媒体
内容模型	无（空元素）
允许的父元素	接受短语内容的元素
闭合标签	自闭合 — 无需闭合标签
状态	标准

📝 语法

<img src="图片地址" alt="替代文本" width="宽度" height="高度">

⚙️ 属性

该元素支持全局属性及以下专有属性：

属性	值	描述
`src`	URL	图片文件的地址，可以是相对路径或完整的 URL。
`alt`	文本	图片无法显示时的替代文本，同时被屏幕阅读器朗读。
`width`	像素	图片的显示宽度（像素）。
`height`	像素	图片的显示高度（像素）。
`loading`	关键字	图片的加载策略。 `lazy` — 延迟加载，图片进入视口时才加载。 `eager` — 立即加载（默认）。
`srcset`	多 URL 列表	不同尺寸下的候选图片列表，配合 `sizes` 实现响应式图片。
`sizes`	媒体条件列表	描述图片在不同视口下的显示宽度。

查看所有全局属性 → 查看所有事件属性 →

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<img>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： 不要省略 alt 属性——它对屏幕阅读器用户和 SEO 至关重要。纯装饰性图片可以用 alt=""。

❓ 常见问题

Q 的 alt 属性是必需的吗？

A是的，alt 属性对可访问性是必需的。纯装饰性图片使用 alt=""（空），信息性图片使用描述性文本。屏幕阅读器依赖 alt 向盲人用户描述图像。

Q 和

A<img> 加载单一图像。<picture> 包含多个 <source> 元素，可根据视口、分辨率或格式支持（如 WebP 与 JPEG）提供不同图像。

Q 应该使用 width 和 height 属性吗？

A是的，始终包含 width 和 height 属性（匹配图像的固有尺寸）。这可以防止累积布局偏移（CLS）并改善 Core Web Vitals 评分。

<img> — images 教程

📚 相关教程

HTML Media HTML iframes HTML Responsive Images

HTML 图像教程

学习图片的嵌入、响应式与 alt 最佳实践。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。