HTML 嵌入媒体

这一课你将能做到

1. 写出带正确 alt、loading、宽高属性的 img 标签，并用 srcset 和 picture 实现响应式图片
2. 用 figure/figcaption 为图片、代码块、图表添加带语义说明的容器
3. 嵌入 audio/video 并配置 controls、preload、字幕轨道，理解 iframe 的 sandbox 安全机制

为什么要学

媒体是网页的「血肉」：产品图、演示视频、背景音乐、地图嵌入……但直接用 <img src="a.jpg"> 应付，会导致：移动端加载 3MB 大图卡死、屏幕阅读器读不出图片内容、第三方 iframe 被恶意利用。掌握媒体标签的正确用法，直接影响页面性能、可访问性和安全性。

人话：媒体标签就像快递包装——srcset 是按收件地址选不同尺寸的箱子，alt 是包裹内容说明，sandbox 是给危险品加锁。不包好，要么送错、要么破损、要么伤人。

先建立图像

媒体嵌入决策树：

图片？
├── 内容图片（产品图、照片）→ img + srcset + alt
├── 纯装饰图片 → CSS background-image
└── 需要裁剪/格式切换 → picture

音频/视频？
├── 自有媒体 → audio / video + track 字幕
└── 第三方视频（YouTube/Bilibili）→ iframe + sandbox

其他嵌入？
├── 交互地图/图表 → iframe
└── 插件内容（PDF/Flash 已淘汰）→ object/embed（现代项目避免）

跟着做

步骤 1：img 基础与性能优化

新建 media.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体嵌入演示</title>
</head>
<body>
    <!-- 基础写法 -->
    <img src="photo.jpg" alt="山间的日出">

    <!-- 完整写法：显式宽高防止布局抖动，懒加载延迟非首屏图片 -->
    <img src="photo.jpg"
         alt="山间的日出，太阳从云层中升起"
         width="800"
         height="600"
         loading="lazy">
</body>
</html>

关键属性：

• alt：替代文本。图片加载失败、屏幕阅读器朗读、SEO 都依赖它。装饰性图片用 alt=""（空值），不要省略。
• width/height：告诉浏览器预留空间，防止图片加载后页面抖动（CLS，Core Web Vitals 指标）。
• loading="lazy"：浏览器原生懒加载，图片进入视口才加载。

步骤 2：srcset 响应式图片

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="山间的日出"
     width="800"
     height="600">

• srcset：告诉浏览器有哪些尺寸可选，400w 表示图片实际宽度 400px。
• sizes：告诉浏览器在不同视口下图片显示多大。浏览器自动选最合适的下载。

简版（像素密度描述，适合固定尺寸图片）：

<img src="photo.jpg"
     srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
     alt="山间的日出">

步骤 3：picture 艺术方向与格式切换

<picture>
    <!-- WebP 格式，现代浏览器优先 -->
    <source srcset="photo.webp" type="image/webp">
    <!-- 移动端竖屏裁剪 -->
    <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
    <!-- 兜底：所有浏览器都支持的 JPG -->
    <img src="photo.jpg" alt="山间的日出" width="800" height="600">
</picture>

picture 比 img srcset 更强：可按媒体查询切换不同构图（如移动端裁掉左右只留主体），或按浏览器支持切换不同格式（WebP/AVIF/JPG）。

步骤 4：figure 与 figcaption

<figure>
    <img src="chart.png" alt="2026 年 Q1-Q3 销售额柱状图" width="600" height="400">
    <figcaption>图 1：前三季度销售额持续增长，Q3 达峰值 120 万</figcaption>
</figure>

<figure>
    <pre><code>public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello");
    }
}</code></pre>
    <figcaption>代码清单 1：Java 入口程序</figcaption>
</figure>

figure 是语义化容器，表示「独立的内容单元，可移动至附录不影响正文理解」。figcaption 是其说明文字，屏幕阅读器会关联朗读。

步骤 5：audio 与 video

<audio controls preload="metadata">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

<video controls width="640" height="360" poster="cover.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="zh.vtt" srclang="zh" label="中文字幕" default>
    您的浏览器不支持视频播放。
</video>

关键属性：

• controls：显示播放控件。必须加，否则用户无法操作。
• preload：none（不预加载）、metadata（只加载元数据，推荐）、auto（预加载整个文件）。
• poster：视频封面，播放前显示。
• track：字幕轨道，WebVTT 格式。default 表示默认启用。

步骤 6：iframe 与 sandbox

<!-- 基础嵌入 -->
<iframe src="https://example.com" width="600" height="400" title="示例页面">
</iframe>

<!-- 安全加固：sandbox 限制权限 -->
<iframe src="https://untrusted.com/widget"
        sandbox="allow-scripts allow-same-origin"
        width="600" height="400"
        title="第三方小部件">
</iframe>

sandbox 可选值：

• allow-scripts：允许执行 JS（不加则禁用）
• allow-same-origin：允许同源访问（不加则视为跨域，localStorage 等失效）
• allow-forms：允许提交表单
• allow-popups：允许弹窗
• 空字符串 sandbox=""：最严格，全禁

原则：嵌入不可信内容时，sandbox 权限最小化。

讲清楚要点

1. alt 是 img 的灵魂：不是「可选描述」，是图片内容的等价替代。写 alt 时想象「如果图片加载失败，用户需要知道什么」。
2. srcset 解决分辨率，picture 解决构图/格式：固定构图不同尺寸用 srcset，不同构图或格式切换用 picture。
3. width/height 防止 CLS：浏览器根据宽高比预留空间，避免图片加载后把文字挤下去。响应式时 CSS max-width: 100%; height: auto; 覆盖。
4. preload="metadata" 是视频音频的性能救星：页面加载时不下载媒体文件，只读时长、尺寸等元数据，用户点击播放再缓冲。
5. iframe sandbox 是安全底线：嵌入第三方内容必须加，尤其是广告、用户生成内容。allow-scripts 和 allow-same-origin 同时给等于没 sandbox（可逃逸），谨慎组合。

你可能会懵的地方

• srcset 和 sizes 到底怎么算？ 浏览器先根据 sizes 算出「当前视口下图片显示多少 CSS 像素」，再乘以设备像素比（DPR），从 srcset 里选最接近的。比如 600px 视口、sizes 说显示 400px、DPR=2，浏览器需要约 800px 宽的图，选 photo-800.jpg。

• video 的 autoplay 为什么有时无效？ 现代浏览器策略：静音视频可自动播放；有声视频必须用户交互后才能播。想自动播放，加 muted autoplay playsinline。

• object 和 embed 还有用吗？ Flash 已死，现代项目几乎不需要。PDF 预览可用 <embed src="file.pdf" type="application/pdf">，但兼容性差，建议用 iframe 或 PDF.js。

• track 字幕文件怎么写？ WebVTT 格式，.vtt 扩展名：

  WEBVTT
  
  00:00:00.000 --> 00:00:03.000
  第一句字幕
  
  00:00:03.500 --> 00:00:06.000
  第二句字幕
  

  文件必须用 UTF-8 编码，服务器需配置 text/vtt MIME 类型。

• iframe 里能嵌 iframe 吗？ 可以，但层层嵌套性能差、安全风险叠加。第三方广告常见「iframe 套 iframe」，主站无法控制内部行为，只能靠 sandbox 限制。

错法对照

错法	问题	正解
<img src="a.jpg"> 无 alt	屏幕阅读器读 src 路径或忽略，SEO 扣分	内容图写描述性 alt，装饰图 alt=""
大图直接写 width="300" 缩小显示	下载原图浪费带宽	用 srcset 提供多尺寸，或后端压缩
video 不加 controls	用户无法播放/暂停	始终加 controls，或自绘控件
iframe 无 sandbox 嵌入第三方	XSS、钓鱼、挖矿脚本风险	sandbox="allow-scripts" 最小权限
所有图都加 loading="lazy"	首屏大图也懒加载，LCP 变慢	首屏关键图去掉 lazy，用 fetchpriority="high"
alt 写「图片」或「image」	无信息量，屏幕阅读器读出来等于没说	描述内容，如「用户头像：张三」

卡点急救

1. srcset 不生效，始终加载原图：检查 sizes 是否匹配当前视口；浏览器缓存了旧图，Ctrl+F5 强制刷新；或 srcset 中图片路径 404。
2. video 在 iOS Safari 全屏播放：iOS 强制全屏。加 playsinline 属性允许内联播放，配合 webkit-playsinline 兼容旧版。
3. iframe 内容空白：被嵌入站设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors。联系对方加白名单，或改用 API 数据自行渲染。
4. alt 文本显示在图片右上角：图片加载失败时 alt 显示在占位区域，样式丑。用 CSS img { color: transparent; } 隐藏，或 font-size: 0 配合 alt 的 ::after 伪元素自定义样式。
5. 字幕不显示：检查 track 的 src 路径、.vtt 文件 MIME 类型、浏览器控制台是否有 CORS 错误。

面试常问

• img 的 srcset 和 sizes 属性如何工作？ srcset 提供候选图片及其物理宽度（w 描述符）或像素密度（x 描述符）；sizes 声明图片在不同媒体条件下的布局宽度。浏览器根据视口、DPR、网络状况计算所需资源，自动选择最优候选。这是响应式图片的核心机制。

• alt 属性的最佳实践？ 内容图片：准确描述图片传达的信息，不是文件名；装饰图片：空 alt（alt=""），屏幕阅读器跳过；图片含文字：alt 包含该文字；复杂图表：alt 简述 + 正文或 longdesc 详述。不要以「图片」开头。

• iframe 有哪些安全风险？如何防范？ 风险：点击劫持、XSS、恶意重定向、资源滥用。防范：① sandbox 最小权限；② X-Frame-Options / CSP frame-ancestors 控制谁可嵌入本站；③ 嵌入第三方内容时验证来源域名；④ 考虑用 seamless 已废弃，现代用 credentialless 隔离。

• video 的 preload 属性有哪些值？ none：不预加载，点击播放才请求；metadata：只加载元数据（时长、尺寸），推荐；auto：预加载整个文件，慎用；空字符串同 auto。移动端浏览器可能忽略 preload 以节省流量。

自测三问

1. 写出「移动端显示 400px 图、桌面端显示 800px 图」的完整 img 标签。
2. figure 和 div 包图片的核心区别是什么？
3. 为什么嵌入不可信第三方页面时必须加 sandbox？

小结一句话

媒体嵌入不是「把 src 填上就行」：img 要管性能与可访问性，video/audio 要管体验与流量，iframe 要管安全边界——每个标签都是一门平衡艺术。

延伸

• MDN：HTML 图片
• MDN：video 和 audio 内容
• 下一课：表格——table、thead/tbody、colspan/rowspan 与数据展示的正确姿势。