HTML 多媒体

网页可以通过 <img>、<audio>、<video> 和 <iframe> 等元素嵌入各种媒体内容。多媒体是现代网页的重要组成部分，合理使用这些元素可以极大地丰富网页内容和用户体验。

图片 img

<img> 元素是网页中最常用的媒体元素，用于在页面中嵌入图片。它是一个自闭合标签，没有结束标签。

基本用法

<img src="image.jpg" alt="图片描述">

图片的两个核心属性：

src：图片的路径或 URL，告诉浏览器从哪里获取图片
alt：图片的替代文本，当图片无法显示时显示这段文字，也是屏幕阅读器朗读的内容

完整属性列表

属性	说明	必需
`src`	图片路径/URL	是（除非有 srcset）
`alt`	图片描述（可访问性必需）	强烈推荐
`width`	图片宽度（像素）	否
`height`	图片高度（像素）	否
`loading`	加载策略	否
`decoding`	解码方式	否
`fetchpriority`	加载优先级	否
`srcset`	多分辨率图片源	否
`sizes`	图片尺寸说明	否

alt 属性的重要性

alt 属性不仅仅是在图片加载失败时显示的备用文本，它是网页可访问性的基石：

<!-- 信息性图片：提供完整描述 -->
<img src="chart.png" alt="2024年销售增长图表，显示同比增长30%">

<!-- 功能性图片：描述功能而非外观 -->
<a href="/home"><img src="home-icon.svg" alt="返回首页"></a>

<!-- 装饰性图片：留空（屏幕阅读器会跳过） -->
<img src="decoration.svg" alt="">

<!-- 复杂图片：简短描述 + 长描述链接 -->
<img src="complex-chart.png" alt="2024年第四季度销售数据">
<p><a href="chart-description.html">查看图表详细说明</a></p>

alt 文本的编写原则：

描述图片传达的信息，而不是图片的外观
简洁明了，通常不超过 125 个字符
不要以"图片："或"图像："开头
对于链接中的图片，描述链接目标而非图片本身

图片尺寸：width 和 height

设置 width 和 height 属性有两个重要目的：

<!-- 推荐做法：始终设置宽高 -->
<img src="photo.jpg" alt="风景照片" width="800" height="600">

为什么设置宽高很重要？

浏览器在加载图片之前就需要知道图片的尺寸，以便计算页面布局。如果不设置宽高，浏览器在图片加载完成前会假设图片高度为 0，加载完成后重新计算布局，导致页面内容"跳动"（Layout Shift）。

设置宽高后，浏览器可以提前预留正确的空间，避免布局抖动，提升用户体验。

CSS 与 HTML 属性配合：

<style>
img {
    max-width: 100%;  /* 响应式：不超过容器宽度 */
    height: auto;     /* 保持宽高比 */
}
</style>

<img src="photo.jpg" alt="风景照片" width="800" height="600">

这种方式既能在加载前预留空间，又能保证响应式显示。

图片加载策略：loading

loading 属性控制图片的加载时机：

<!-- 立即加载（默认） -->
<img src="hero.jpg" alt="首页大图" loading="eager">

<!-- 延迟加载：图片接近视口时才加载 -->
<img src="photo.jpg" alt="图片描述" loading="lazy">

lazy 延迟加载的工作原理：

当设置 loading="lazy" 时，浏览器会延迟加载图片，直到用户滚动到图片附近。这可以：

减少初始页面加载时间
节省带宽（用户可能不会滚动到所有图片）
提升页面性能指标

最佳实践：

<!-- 首屏可见的图片：立即加载 -->
<img src="hero.jpg" alt="首页横幅" loading="eager" fetchpriority="high">

<!-- 首屏以下的图片：延迟加载 -->
<img src="content-1.jpg" alt="内容图片" loading="lazy">

<!-- 长列表中的图片：延迟加载 -->
<article>
    <img src="article.jpg" alt="文章配图" loading="lazy" width="400" height="300">
    <p>文章内容...</p>
</article>

延迟加载的注意事项

延迟加载的图片应该设置 width 和 height，否则在加载前尺寸为 0x0
如果图片在首屏可见，不要使用延迟加载
延迟加载仅在 JavaScript 启用时生效（防止追踪用户滚动位置）

图片解码：decoding

decoding 属性提示浏览器如何处理图片解码：

<!-- 同步解码：等待图片解码完成再显示内容 -->
<img src="photo.jpg" alt="图片" decoding="sync">

<!-- 异步解码：先显示内容，图片解码完成后显示 -->
<img src="photo.jpg" alt="图片" decoding="async">

<!-- 让浏览器决定（默认） -->
<img src="photo.jpg" alt="图片" decoding="auto">

什么时候使用？

sync：当图片是内容的核心部分，需要与其他内容同时显示时
async：当图片是装饰性的，或者希望主要内容尽快显示时

实际上，这个属性的效果在大多数静态图片上不太明显。当通过 JavaScript 动态插入图片时，差异会更明显。

加载优先级：fetchpriority

fetchpriority 属性告诉浏览器图片的加载优先级：

<!-- 高优先级：重要的首屏图片 -->
<img src="hero.jpg" alt="首页大图" fetchpriority="high">

<!-- 低优先级：非关键图片 -->
<img src="sidebar.jpg" alt="侧边栏图片" fetchpriority="low">

<!-- 自动（默认） -->
<img src="photo.jpg" alt="图片" fetchpriority="auto">

使用场景：

优先级	适用场景
`high`	LCP（最大内容绘制）图片、首屏核心图片
`low`	首屏以下的大量图片、预加载的低优先级图片
`auto`	默认，让浏览器自动判断

响应式图片：srcset 和 sizes

不同设备有不同的屏幕尺寸和分辨率，使用 srcset 和 sizes 可以让浏览器选择最合适的图片：

<img src="medium.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 2000w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="响应式图片">

srcset 语法说明：

图片URL 宽度描述符(w)
small.jpg 500w   表示这张图片宽度为 500 像素

sizes 语法说明：

媒体条件 图片显示宽度
(max-width: 600px) 100vw   视口宽度小于600px时，图片占满宽度
(max-width: 1200px) 50vw   视口宽度小于1200px时，图片占一半宽度
33vw                       默认情况下，图片占三分之一宽度

工作原理：

浏览器读取 sizes，确定图片在当前视口下的显示宽度
根据显示宽度和设备像素比（DPR），计算需要的图片像素宽度
从 srcset 中选择最接近的图片
加载选中的图片

高 DPI 屏幕支持：

<!-- 使用像素密度描述符 -->
<img src="logo.png"
     srcset="logo.png 1x,
             [email protected] 2x,
             [email protected] 3x"
     alt="Logo">

picture 元素：艺术指导

<picture> 元素提供更灵活的图片控制，可以根据不同的媒体条件选择不同的图片源：

<picture>
    <!-- 现代格式优先（AVIF 压缩率最高） -->
    <source srcset="image.avif" type="image/avif">
    
    <!-- WebP 格式（兼容性更好） -->
    <source srcset="image.webp" type="image/webp">
    
    <!-- 不同尺寸使用不同裁剪 -->
    <source media="(max-width: 600px)" srcset="image-mobile.jpg">
    <source media="(min-width: 1200px)" srcset="image-desktop.jpg">
    
    <!-- 兜底图片 -->
    <img src="image.jpg" alt="图片描述">
</picture>

<picture> 的常见用途：

格式选择：优先使用 AVIF/WebP，旧浏览器降级到 JPEG/PNG
艺术指导：不同屏幕尺寸使用不同裁剪的图片
深色/浅色模式：根据主题切换不同图片

<!-- 深色/浅色模式切换图片 -->
<picture>
    <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
    <img src="logo-light.png" alt="Logo">
</picture>

图片格式选择

选择正确的图片格式对性能和用户体验至关重要：

格式	特点	适用场景	浏览器支持
AVIF	压缩率最高，支持 HDR	照片、复杂图像	现代浏览器
WebP	压缩率高，支持透明和动画	通用场景	广泛支持
JPEG	有损压缩，体积小	照片、复杂图像	全部
PNG	无损压缩，支持透明	图标、logo、截图	全部
GIF	支持动画，最多 256 色	简单动画	全部
SVG	矢量图，无限缩放	图标、logo、图表	全部
APNG	动画 PNG，支持透明	高质量动画	较好

格式选择建议：

照片类 → AVIF > WebP > JPEG
图标/Logo → SVG > WebP > PNG
需要透明 → WebP > PNG
动画 → WebP > APNG > GIF

图片与无障碍访问

使用 aria-describedby 提供详细描述：

<img src="chart.png" alt="2024年销售趋势" aria-describedby="chart-desc">
<p id="chart-desc">图表显示第一季度销售额为100万，第二季度增长至150万...</p>

SVG 图片需要特殊处理：

<!-- SVG 图片需要 role="img" -->
<img src="icon.svg" alt="搜索" role="img">

避免的问题：

<!-- 错误：alt 文本无意义 -->
<img src="photo.jpg" alt="图片">
<img src="photo.jpg" alt="photo.jpg">

<!-- 错误：title 不能替代 alt -->
<img src="photo.jpg" title="这是一张照片">  <!-- 缺少 alt -->

<!-- 正确：有意义的 alt 文本 -->
<img src="photo.jpg" alt="一只橘色的猫在阳光下睡觉">

音频 audio

<audio> 元素用于在网页中嵌入音频内容。

基本用法

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

属性详解

属性	说明	值
`controls`	显示播放控件	布尔属性
`autoplay`	自动播放	布尔属性
`loop`	循环播放	布尔属性
`muted`	静音	布尔属性
`preload`	预加载策略	auto/metadata/none
`src`	音频源 URL	URL

预加载策略 preload

preload 属性告诉浏览器如何预加载音频：

<!-- 自动预加载（默认） -->
<audio src="music.mp3" preload="auto"></audio>

<!-- 只预加载元数据（时长、尺寸等） -->
<audio src="music.mp3" preload="metadata"></audio>

<!-- 不预加载 -->
<audio src="music.mp3" preload="none"></audio>

选择建议：

auto：用户很可能会播放的音频（如音乐播放器）
metadata：获取时长等信息，但不下载内容
none：用户可能不会播放，或者需要节省带宽

自动播放策略

现代浏览器限制了音频的自动播放，这是为了提升用户体验：

<!-- 无条件自动播放：通常会被阻止 -->
<audio src="music.mp3" autoplay></audio>

<!-- 静音自动播放：通常允许 -->
<audio src="background.mp3" autoplay muted loop></audio>

自动播放规则：

有声自动播放通常会被阻止
静音自动播放通常被允许
用户与页面交互后，可以播放音频
用户可以将特定网站加入白名单

正确的做法：

<audio id="bgMusic" loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>

<button id="playBtn">播放音乐</button>

<script>
const audio = document.getElementById('bgMusic');
const playBtn = document.getElementById('playBtn');

// 用户点击后才播放
playBtn.addEventListener('click', () => {
    audio.play();
});
</script>

音频格式

格式	MIME 类型	特点	浏览器支持
MP3	audio/mpeg	压缩率高，广泛支持	几乎全部
WAV	audio/wav	无损，文件大	全部
OGG	audio/ogg	开源，免费	较好
AAC	audio/aac	高效压缩	较好
FLAC	audio/flac	无损压缩	较好

JavaScript 控制

<audio id="myAudio" controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

<script>
const audio = document.getElementById('myAudio');

// 播放控制
audio.play();        // 播放
audio.pause();       // 暂停

// 音量控制（0-1）
audio.volume = 0.5;

// 静音
audio.muted = true;

// 播放速率
audio.playbackRate = 1.5;

// 跳转到特定时间（秒）
audio.currentTime = 30;

// 获取音频时长
console.log(audio.duration);

// 事件监听
audio.addEventListener('play', () => console.log('开始播放'));
audio.addEventListener('pause', () => console.log('暂停'));
audio.addEventListener('ended', () => console.log('播放结束'));
audio.addEventListener('timeupdate', () => {
    console.log('当前时间:', audio.currentTime);
});
</script>

视频 video

<video> 元素用于在网页中嵌入视频内容，支持多种视频格式和丰富的控制选项。

基本用法

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持 video 元素。
</video>

属性详解

属性	说明	值
`controls`	显示播放控件	布尔属性
`autoplay`	自动播放	布尔属性
`loop`	循环播放	布尔属性
`muted`	静音	布尔属性
`poster`	封面图片 URL	URL
`preload`	预加载策略	auto/metadata/none
`width`	视频宽度	像素
`height`	视频高度	像素
`playsinline`	移动端内联播放	布尔属性

封面图片 poster

<video controls poster="cover.jpg" width="640">
    <source src="video.mp4" type="video/mp4">
</video>

poster 属性指定视频播放前显示的封面图片。如果不设置，浏览器通常会显示视频的第一帧，但这可能导致黑屏或不理想的画面。

内联播放 playsinline

<video controls playsinline width="640">
    <source src="video.mp4" type="video/mp4">
</video>

在 iOS 设备上，默认情况下视频会进入全屏播放。设置 playsinline 可以让视频在页面内内联播放，而不是强制全屏。

字幕和轨道 track

<track> 元素用于添加字幕、章节标题等时间同步的文本轨道：

<video controls width="640">
    <source src="video.mp4" type="video/mp4">
    
    <!-- 字幕 -->
    <track kind="subtitles" src="subtitles-zh.vtt" srclang="zh" label="中文" default>
    <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
    
    <!-- 章节标题 -->
    <track kind="chapters" src="chapters.vtt" srclang="zh" label="章节">
    
    <!-- 说明 -->
    <track kind="descriptions" src="descriptions.vtt" srclang="zh" label="视频描述">
</video>

track 的 kind 类型：

kind	说明	用途
`subtitles`	字幕	对话的翻译
`captions`	隐藏字幕	包括音效描述
`chapters`	章节	视频章节标题
`descriptions`	描述	视频内容的文本描述

VTT 字幕格式

WebVTT（Web Video Text Tracks）是标准的字幕格式：

WEBVTT

00:00:01.000 --> 00:00:04.000
欢迎来到编程学习网站

00:00:05.000 --> 00:00:08.000
本节课程介绍HTML多媒体元素

00:00:09.000 --> 00:00:12.000
包括图片、音频和视频

00:00:13.000 --> 00:00:16.000
让我们开始学习吧

NOTE 这是一个注释，不会显示

时间格式： HH:MM:SS.mmm（时:分:秒.毫秒）

画中画 Picture-in-Picture

画中画功能允许用户在浏览其他页面时继续观看视频：

<video id="video" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<button id="pipBtn">进入画中画模式</button>

<script>
const video = document.getElementById('video');
const pipBtn = document.getElementById('pipBtn');

pipBtn.addEventListener('click', async () => {
    if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
    } else {
        await video.requestPictureInPicture();
    }
});

// 自动进入画中画
video.addEventListener('leavepictureinpicture', () => {
    console.log('用户关闭了画中画');
});
</script>

HTML 属性控制：

<!-- 禁用画中画按钮 -->
<video controls disablePictureInPicture>
    <source src="video.mp4" type="video/mp4">
</video>

<!-- 自动画中画（用户切换标签时） -->
<video controls autoPictureInPicture>
    <source src="video.mp4" type="video/mp4">
</video>

视频背景

全屏视频背景常见于着陆页：

<video autoplay muted loop playsinline id="bg-video">
    <source src="background.mp4" type="video/mp4">
</video>

<div class="content">
    <h1>欢迎访问</h1>
    <p>网页内容...</p>
</div>

<style>
#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-fit: cover;
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding: 100px 20px;
}
</style>

视频格式

格式	MIME 类型	特点	浏览器支持
MP4 (H.264)	video/mp4	广泛支持	几乎全部
WebM (VP9)	video/webm	高效压缩，开源	较好
AV1	video/mp4	最新编解码器	较好
OGG	video/ogg	开源格式	一般

JavaScript 控制

<video id="myVideo" controls width="640">
    <source src="video.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById('myVideo');

// 播放控制
video.play();        // 播放
video.pause();       // 暂停

// 音量控制（0-1）
video.volume = 0.5;
video.muted = true;

// 播放速率
video.playbackRate = 2.0;  // 2倍速

// 跳转
video.currentTime = 60;  // 跳转到第60秒

// 全屏
video.requestFullscreen();

// 画中画
video.requestPictureInPicture();

// 常用事件
video.addEventListener('play', () => console.log('播放'));
video.addEventListener('pause', () => console.log('暂停'));
video.addEventListener('ended', () => console.log('结束'));
video.addEventListener('timeupdate', () => {
    console.log(`进度: ${video.currentTime}/${video.duration}`);
});
video.addEventListener('loadedmetadata', () => {
    console.log(`视频时长: ${video.duration}秒`);
});
</script>

iframe 嵌入

<iframe> 元素用于在当前页面中嵌入另一个 HTML 文档。

基本用法

<iframe src="https://example.com" 
        width="600" 
        height="400"
        title="嵌入的网页">
</iframe>

安全提示

嵌入第三方内容存在安全风险，请确保信任嵌入的网站，并正确设置 sandbox 属性。

属性详解

属性	说明
`src`	嵌入页面 URL
`width`	宽度
`height`	高度
`title`	说明（可访问性必需）
`allowfullscreen`	允许全屏
`loading`	加载策略
`srcdoc`	内联 HTML 内容
`sandbox`	安全限制
`allow`	功能权限

延迟加载

<iframe src="widget.html" loading="lazy"></iframe>

与图片一样，loading="lazy" 可以延迟加载视口外的 iframe，提升页面加载性能。

内联内容 srcdoc

<iframe srcdoc="<h1>Hello World</h1><p>这是内联HTML内容</p>" 
        width="300" 
        height="100"
        title="内联内容">
</iframe>

srcdoc 属性允许直接在 iframe 中显示 HTML 内容，无需额外的文件。

安全沙盒 sandbox

sandbox 属性是 iframe 最重要的安全特性，它限制嵌入内容的能力：

<!-- 最严格限制：禁止所有功能 -->
<iframe src="untrusted.html" sandbox></iframe>

<!-- 部分允许 -->
<iframe src="content.html" 
        sandbox="allow-scripts allow-same-origin">
</iframe>

sandbox 属性值：

值	说明
（无值）	应用所有限制
`allow-scripts`	允许执行 JavaScript
`allow-same-origin`	允许同源访问
`allow-forms`	允许提交表单
`allow-popups`	允许弹出窗口
`allow-popups-to-escape-sandbox`	允许弹出窗口脱离沙盒
`allow-top-navigation`	允许导航顶层窗口
`allow-downloads`	允许下载文件
`allow-modals`	允许模态窗口（alert 等）

安全配置示例：

<!-- 嵌入不可信内容：最严格限制 -->
<iframe src="user-content.html" sandbox></iframe>

<!-- 嵌入需要脚本的可信内容 -->
<iframe src="widget.html" sandbox="allow-scripts allow-same-origin"></iframe>

<!-- 嵌入需要表单提交的内容 -->
<iframe src="form.html" sandbox="allow-scripts allow-forms"></iframe>

<!-- 嵌入需要打开链接的内容 -->
<iframe src="content.html" sandbox="allow-scripts allow-popups"></iframe>

权限策略 allow

allow 属性控制 iframe 可以访问的浏览器功能：

<iframe src="video.html" 
        allow="camera; microphone; fullscreen; geolocation">
</iframe>

常用权限：

权限	说明
`camera`	摄像头访问
`microphone`	麦克风访问
`geolocation`	地理位置
`fullscreen`	全屏模式
`payment`	支付请求
`clipboard-read`	读取剪贴板
`clipboard-write`	写入剪贴板

嵌入常见内容

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>

Google Maps：

<iframe width="600" 
        height="450" 
        style="border:0" 
        loading="lazy" 
        allowfullscreen
        src="https://www.google.com/maps/embed?pb=...">
</iframe>

PDF 文档：

<iframe src="document.pdf" width="600" height="500"></iframe>

响应式 iframe

让 iframe 保持固定宽高比：

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
            frameborder="0" 
            allowfullscreen>
    </iframe>
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Canvas 画布

<canvas> 元素提供了一个通过 JavaScript 绑定绘图的区域：

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持 canvas 元素。
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 150, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();

// 绘制文字
ctx.font = '20px Arial';
ctx.fillStyle = '#333';
ctx.fillText('Canvas 示例', 130, 180);
</script>

Canvas 的详细用法请参见专门的 Canvas 教程。

SVG 矢量图形

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式。

内联 SVG

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <!-- 矩形 -->
    <rect x="10" y="10" width="100" height="60" fill="#3498db"/>
    
    <!-- 圆形 -->
    <circle cx="200" cy="50" r="30" fill="#e74c3c"/>
    
    <!-- 路径 -->
    <path d="M 10 100 L 100 100 L 55 50 Z" fill="#2ecc71"/>
    
    <!-- 文本 -->
    <text x="150" y="130" font-family="Arial" font-size="14" fill="#333">
        SVG 示例
    </text>
</svg>

SVG 作为图片

<img src="icon.svg" alt="图标" role="img">

SVG 的优势

无限缩放：在任何尺寸下都保持清晰
文件小：矢量描述比位图数据更紧凑
可样式化：可以通过 CSS 修改颜色、大小等
可动画：支持 CSS 动画和 SMIL 动画
可交互：可以添加 JavaScript 事件

SVG 的详细用法请参见专门的 SVG 教程。

响应式多媒体

图片响应式

/* 图片自适应容器 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

视频响应式

/* 保持宽高比 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

使用 aspect-ratio

/* 现代 CSS 保持宽高比 */
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

无障碍访问

图片

始终提供有意义的 alt 文本
装饰性图片使用空 alt=""
复杂图片使用 aria-describedby 提供详细描述
SVG 图片添加 role="img"

音视频

提供字幕和隐藏字幕
提供文字稿（transcript）
确保控件可以通过键盘操作
不要依赖自动播放

iframe

始终提供 title 属性
确保嵌入内容也是可访问的

性能优化

图片优化

选择正确的格式：优先使用 AVIF/WebP
设置尺寸：始终设置 width 和 height
延迟加载：非首屏图片使用 loading="lazy"
响应式图片：使用 srcset 和 sizes
图片压缩：使用工具压缩图片

视频优化

预加载策略：根据需要设置 preload
提供封面：设置 poster 避免空白
多种格式：提供 MP4 和 WebM
压缩视频：使用视频压缩工具

iframe 优化

延迟加载：非关键 iframe 使用 loading="lazy"
限制数量：减少 iframe 数量
安全沙盒：使用 sandbox 限制权限

小结

本章学习了：

图片 img：属性详解、响应式图片、格式选择、性能优化
音频 audio：播放控制、自动播放策略、格式支持
视频 video：播放控制、字幕、画中画、视频背景
iframe：安全沙盒、权限控制、常见嵌入场景
Canvas 和 SVG：基本概念和用法
响应式处理：让多媒体适应不同设备
无障碍和性能：确保所有用户都能访问，优化加载性能

练习

创建一个带封面图和多语言字幕的视频播放器
使用 <picture> 元素实现不同格式和尺寸的响应式图片
嵌入一个 YouTube 视频并保持 16:9 宽高比
使用 SVG 绘制一个简单的网站 logo
实现一个延迟加载的图片画廊
为视频添加画中画功能的控制按钮

图片 img​

基本用法​

完整属性列表​

alt 属性的重要性​

图片尺寸：width 和 height​

图片加载策略：loading​

图片解码：decoding​

加载优先级：fetchpriority​

响应式图片：srcset 和 sizes​

picture 元素：艺术指导​

图片格式选择​

图片与无障碍访问​

音频 audio​

基本用法​

属性详解​

预加载策略 preload​

自动播放策略​

音频格式​

JavaScript 控制​

视频 video​

基本用法​

属性详解​

封面图片 poster​

内联播放 playsinline​

字幕和轨道 track​

VTT 字幕格式​

画中画 Picture-in-Picture​

视频背景​

视频格式​

JavaScript 控制​

iframe 嵌入​

基本用法​

属性详解​

延迟加载​

内联内容 srcdoc​

安全沙盒 sandbox​

权限策略 allow​

嵌入常见内容​

响应式 iframe​

Canvas 画布​

SVG 矢量图形​

内联 SVG​

SVG 作为图片​

SVG 的优势​

响应式多媒体​

图片响应式​

视频响应式​

使用 aspect-ratio​

无障碍访问​

图片​

音视频​

iframe​

性能优化​

图片优化​

视频优化​

iframe 优化​

小结​

练习​

图片 img

基本用法

完整属性列表

alt 属性的重要性

图片尺寸：width 和 height

图片加载策略：loading

图片解码：decoding

加载优先级：fetchpriority

响应式图片：srcset 和 sizes

picture 元素：艺术指导

图片格式选择

图片与无障碍访问

音频 audio

基本用法

属性详解

预加载策略 preload

自动播放策略

音频格式

JavaScript 控制

视频 video

基本用法

属性详解

封面图片 poster

内联播放 playsinline

字幕和轨道 track

VTT 字幕格式

画中画 Picture-in-Picture

视频背景

视频格式

JavaScript 控制

iframe 嵌入

基本用法

属性详解

延迟加载

内联内容 srcdoc

安全沙盒 sandbox

权限策略 allow

嵌入常见内容

响应式 iframe

Canvas 画布

SVG 矢量图形

内联 SVG

SVG 作为图片

SVG 的优势

响应式多媒体

图片响应式

视频响应式

使用 aspect-ratio

无障碍访问

图片

音视频

iframe

性能优化

图片优化

视频优化

iframe 优化

小结

练习