让网页内容更加生动丰富
<img> 是单标签，用于在网页中嵌入图像。
<img src="图片路径"
alt="替代文本"
width="300"
height="200">| 属性 | 说明 | 是否必需 |
|---|---|---|
src |
图片的路径（Source） | 是 |
alt |
替代文本（Alternative text） | 强烈推荐 |
width |
宽度（像素或百分比） | 否 |
height |
高度（像素或百分比） | 否 |
loading |
加载方式（eager/lazy） | 否 |
<!-- 好的 alt 文本示例 -->
<img src="cat.jpg" alt="一只橘色的小猫在草地上玩耍">
<!-- 不好的 alt 文本 -->
<img src="cat.jpg" alt="图片"> <!-- 太模糊 -->
<img src="cat.jpg" alt="cat.jpg"> <!-- 文件名无意义 -->
<!-- 装饰性图片使用空 alt -->
<img src="decoration.png" alt="">✓ 压缩率高，体积小
✓ 支持透明和动画
✓ 现代浏览器广泛支持
✗ 旧浏览器不支持
推荐：首选格式
✓ 压缩率比 WebP 更高
✓ 质量更好
✗ 浏览器支持较新
✗ 编码较慢
推荐：渐进增强
✓ 矢量，无限缩放
✓ 文件极小
✓ 可 CSS/JS 操作
✗ 不适合照片
推荐：图标、Logo
✓ 无损压缩
✓ 支持透明
✗ 文件较大
✗ 不支持动画
推荐：截图、透明图
✓ 兼容性最好
✓ 照片压缩效果好
✗ 有损压缩
✗ 不支持透明
推荐：照片、兼容性
根据设备屏幕大小和分辨率自动选择最合适的图片。
<!-- 基于设备像素比（DPR）选择 -->
<img srcset="photo-1x.jpg 1x,
photo-2x.jpg 2x,
photo-3x.jpg 3x"
src="photo-1x.jpg"
alt="描述">
<!-- 基于视口宽度选择 -->
<img srcset="photo-320.jpg 320w,
photo-768.jpg 768w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
33vw"
src="photo-1200.jpg"
alt="描述">根据不同的条件显示不同的图片（如不同裁剪方式）。
<picture>
<!-- 小屏幕显示裁剪版本 -->
<source media="(max-width: 600px)"
srcset="photo-cropped.jpg">
<!-- WebP 格式优先 -->
<source type="image/webp"
srcset="photo.webp">
<!-- 后备图片 -->
<img src="photo.jpg" alt="描述">
</picture><!-- 基本音频播放器 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<!-- 带属性的音频 -->
<audio controls loop muted preload="auto">
<source src="music.mp3" type="audio/mpeg">
</audio>| 属性 | 说明 |
|---|---|
controls |
显示播放控件（播放、暂停、音量） |
autoplay |
自动播放（可能被浏览器阻止） |
loop |
循环播放 |
muted |
默认静音 |
preload |
预加载策略（auto/metadata/none） |
<!-- 基本视频播放器 -->
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
<!-- 带海报图的视频 -->
<video controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- 响应式视频 -->
<video controls style="max-width: 100%; height: auto;">
<source src="movie.mp4" type="video/mp4">
</video>| 格式 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| MP4 (H.264) | ✓ | ✓ | ✓ | ✓ |
| WebM (VP8/VP9) | ✓ | ✓ | ✓ | ✓ |
| OGV (Theora) | ✓ | ✓ | ✗ | ✓ |
<iframe> 用于在当前页面中嵌入另一个 HTML 页面。
<!-- 嵌入地图 -->
<iframe src="https://maps.google.com/..."
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy">
</iframe>
<!-- 嵌入 YouTube 视频 -->
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe><!-- 使用 sandbox 增强安全性 -->
<iframe src="external.html"
sandbox="allow-scripts allow-same-origin">
</iframe>创建一个多媒体展示页面：