无需任何插件即可嵌入声音、视频和带说明的插图。
在 Kodokon 中打开本课HTML 原生就能播放音频和视频：无需外部播放器。真实的使用场景：博客上的一集播客、着陆页上的产品演示、文档中嵌入的教程。我们来看看如何正确地做到这一点。
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="French" default>
Your browser doesn't support HTML5 video.
</video>三个专业要点。source 元素会按顺序尝试：浏览器播放它能解码的第一个。poster 属性在播放前显示一张占位图。最后，track 以 WebVTT 格式添加字幕：对无障碍至关重要，在静音观看时也大受欢迎。
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>为了给内容配图，figure 通过 figcaption 把一个媒体元素与其说明配成一对。而且不仅限于图片：图表、代码片段或引文也都是合适的候选。说明是与该 figure 以编程方式关联的，这是图片下方一段普通段落无法提供的。
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure>