<source>: 媒体源标签
最后更新：2026-10-13
<source>媒体源标签
为 audio、video 或 picture 提供媒体资源，可列出多个以适配不同浏览器或屏幕。
| 分类 | 链接与媒体 |
|---|---|
| 内容模型 | 空元素 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 自闭合 — 无需闭合标签 |
| 状态 | 标准 |
📝 语法
<source src="..." type="...">⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
src | 媒体资源 URL。 | |
type | 资源的 MIME 类型（如 audio/mpeg）。 | |
media | 媒体查询条件（用于 picture 响应式切换）。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <source> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： source 是空元素（无闭合标签）；浏览器按顺序选用第一个支持的源。
❓ 常见问题
Qsource 可以单独使用吗？
A不可以，
<source> 是空元素，只能作为 <picture>、<video>、<audio> 的子元素，为父级提供候选资源，自身不渲染任何内容。Qsource 的 src 和 srcset 有什么区别？
A给 video/audio 用
src（单一地址）；给 picture 的 source 用 srcset（可写多组「地址 + 宽度/像素密度描述」，配合 sizes 响应式选图）。写错属性组合会被浏览器忽略。Q多个 source 的顺序有什么讲究？
A浏览器从上到下取「第一个支持的」，所以新格式、小尺寸的放前面，兜底资源放最后（picture 里兜底就是 img 本身）。顺序写反会让旧格式先命中，新格式永远不被使用。
🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
