HTML: HTML 媒体
网页不仅仅是文字——图像、音频和视频使内容更加丰富。<img>、<audio>和<video>是HTML5中用于嵌入多媒体资源的三个核心标签。
1. 图像标签
<img> 是一个空标签，通过 src 指定路径，alt 提供替代文本。
(1) 网页支持的图像格式
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPG/JPEG | 有损压缩，文件小，不支持透明 | 照片、复杂图像 |
| PNG | 无损压缩，支持透明背景 | 图标、截图、需要透明的图像 |
| GIF | 支持动画，最多256色 | 简单动画、图标 |
| WebP | 新一代格式，压缩率更高，支持透明 | 现代浏览器首选 |
| SVG | 矢量格式，无限缩放不失真 | 图标、Logo、图表 |
💡 建议： 优先使用 WebP（体积小、质量好），需要兼容旧浏览器时准备 JPG/PNG 备选。SVG 适合图标和 Logo，不会因缩放而模糊。
▶ 示例
HTML
<img src="/assets/images/tutorials/html-landscape-photo.webp" alt="A landscape photo" width="400" height="300">
<img src="/assets/images/tutorials/html-company-logo.webp" alt="Company Logo" title="Click to return home">
📌 alt 属性：
图片加载失败时显示；屏幕阅读器朗读帮助视障用户；搜索引擎理解图片内容。不要省略。
2. 音频标签
<audio> 标签用来嵌入音乐、播客、音效。添加 controls 属性会显示播放控件。
(1) 网页支持的音频格式
| 格式 | 特点 | 浏览器支持 |
|---|---|---|
| MP3 | 有损压缩，文件小，兼容性最好 | 所有浏览器 |
| OGG | 开源格式，压缩率好 | Chrome、Firefox、Edge |
| WAV | 无压缩，音质最好，文件大 | 所有浏览器 |
| AAC | 比MP3更好的压缩率 | 现代浏览器 |
💡 兼容性策略： MP3 兼容性最好，但为了确保所有浏览器都能播放，建议用
<source> 提供 MP3 和 OGG 两种格式。
(2) <source> 标签：多格式回退
不同浏览器支持的媒体格式不同。使用 <source> 标签可以提供多个格式源，浏览器会自动选择它支持的第一个格式：
HTML
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
语法说明：
<source>是空标签，放在<audio>或<video>内部src指定媒体文件路径type指定文件的 MIME 类型，帮助浏览器快速判断是否支持- 浏览器按顺序检查每个
<source>，播放第一个它支持的格式 - 如果所有格式都不支持，显示标签内的提示文字
常见 MIME 类型：
| 格式 | MIME 类型 |
|---|---|
| MP3 | audio/mpeg |
| OGG 音频 | audio/ogg |
| MP4 | video/mp4 |
| WebM | video/webm |
▶ 示例
HTML
<!-- 单格式 -->
<audio src="/assets/images/tutorials/music.mp3" controls>
您的浏览器不支持音频播放。
</audio>
<!-- 多格式兼容 -->
<audio controls>
<source src="/assets/images/tutorials/music.mp3" type="audio/mpeg">
<source src="/assets/images/tutorials/music.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
3. 视频标签
<video> 标签嵌入视频，同样支持 controls 控件和 width/height 尺寸设置。
(1) 网页支持的视频格式
| 格式 | 特点 | 浏览器支持 |
|---|---|---|
| MP4 | 最通用的格式，压缩率好 | 所有浏览器 |
| WebM | Google 推出的开源格式，体积更小 | Chrome、Firefox、Edge |
| OGG | 开源格式 | Chrome、Firefox |
💡 兼容性策略： MP4 兼容性最好，建议用
<source> 提供 MP4 和 WebM 两种格式。
▶ 示例
HTML
<!-- 单格式 -->
<video src="/assets/images/tutorials/video.mp4" controls width="400">
您的浏览器不支持视频播放。
</video>
<!-- 多格式 + 封面图 -->
<video controls width="400" poster="/assets/images/tutorials/html-example-photo.webp">
<source src="/assets/images/tutorials/video.mp4" type="video/mp4">
<source src="/assets/images/tutorials/video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
💡 媒体格式提示：
MP3 和 MP4 是兼容性最好的格式，几乎所有浏览器都支持。WebM 是 Google 推出的开放格式，体积更小。使用
<source> 提供多种格式可以让浏览器自动选择它支持的。
❓ 常见问题
Q
alt属性是必须的吗？可以省略吗？A 强烈建议不要省略
alt属性。alt有三个重要作用：1）图片加载失败时显示替代文字，提升用户体验；2）屏幕阅读器会朗读alt内容，帮助视障用户理解图片；3）搜索引擎通过alt理解图片内容，有助于SEO。如果图片纯属装饰，可以写空的alt=""，告诉屏幕阅读器跳过这张图。Q 图片应该用什么格式？JPG、PNG、WebP有什么区别？
A 选择依据：1）JPG适合照片类图片，支持压缩但会损失质量，不支持透明；2）PNG适合图标、截图，支持无损压缩和透明背景，但文件较大；3）WebP是新一代格式，压缩率比JPG和PNG都好，支持透明，现代浏览器都支持。建议优先用WebP，需要兼容旧浏览器时准备JPG/PNG备选。
Q 为什么图片要设置
width和height属性？A 设置
width和height有两个好处：1）浏览器在图片加载前就能知道图片尺寸，预留出正确的位置，避免页面加载时出现"跳动"（布局偏移）；2）有助于提升Core Web Vitals评分（CLS指标）。注意：如果只设置一个属性，另一个会按比例自动计算。响应式图片通常只设置width，让height自动适应。Q MP3和MP4兼容性这么好，为什么还要提供其他格式？
A 虽然MP3/MP4兼容性最好，但其他格式有各自的优势：WebM体积更小、OGG是开源免费的、WAV音质最好。提供多格式回退可以让：1）不同浏览器获得最佳体验；2）在网络不佳时可以选择更小的文件；3）未来新格式有更好的兼容性时可以平滑升级。建议至少提供MP3/MP4作为兜底，再加一个WebM/OGG作为优化选项。
📖 小节
<img>嵌入图像，src指定路径，alt替代文本<audio>嵌入音频，controls显示播放控件<video>嵌入视频，支持width/height和poster封面- 用
<source>提供多种媒体格式，确保浏览器兼容性
📝 作业
- 图片练习：插入一张图片，设置
alt和title，然后将src改为无效路径，观察浏览器显示效果。 - 播放器嵌入：用
<audio>和<video>分别嵌入一个音频文件和一个视频文件（可以用网络上的公开资源）。
