第七篇、超媒体标签img 必填 src/alt，loading 可懒加载；video/audio 必填 src，需 co

图片标签

<img src="" alt="" title="" loading=""/>

src（必须）：指定图片的资源地址
- 绝对 URL：<img src="https://example.com/image.jpg" alt="示例图">
- 相对 URL：<img src="./images/avatar.png" alt="头像">
- Base64 格式：<img src="data:image/png;base64,..." alt="小图标">
alt（必须）：图片加载失败时的替代文本，提升可访问性
title（可选）：鼠标悬停显示的提示文本
loading（可选）：控制图片加载策略，优化性能
- eager（默认）：页面加载时立即加载
- lazy：图片进入视口时加载（懒加载）；示例：<img src="long-page-img.jpg" alt="长页面图" loading="lazy">

视频标签

<video src="" controls autoplay muted loop poster="" preload=""></video>

src（必须）：指定视频的资源地址
- 绝对 URL：<video src="https://example.com/video.mp4" controls></video>
- 相对 URL：`
controls（可选）：显示浏览器默认的视频控制栏（播放 / 暂停 / 进度 / 音量等）；必加，否则无法操作视频
autoplay（可选）：页面加载后自动播放视频；注：多数浏览器要求搭配muted才能生效
muted（可选）：默认静音播放视频；常配合autoplay使用，示例：<video src="demo.mp4" autoplay muted controls></video>
loop（可选）：视频播放完毕后自动循环播放
poster（可选）：视频加载完成前显示的封面图；示例：<video src="demo.mp4" poster="./images/cover.jpg" controls></video>
preload（可选）：控制视频预加载策略，优化性能
- none（默认）：不预加载任何内容
- metadata：仅预加载视频元数据（时长 / 尺寸等）
- auto：页面加载时预加载整个视频

音频标签

<audio src="" controls autoplay muted loop preload=""></audio>

src（必须）：指定音频的资源地址
- 绝对 URL：<audio src="https://example.com/music.mp3" controls></audio>
- 相对 URL：<audio src="./audios/background.mp3" controls></audio>
controls（可选）：显示浏览器默认的音频控制栏（播放 / 暂停 / 进度 / 音量等）；必加，否则无法操作音频
autoplay（可选）：页面加载后自动播放音频；需搭配muted才能在多数浏览器生效
muted（可选）：默认静音播放音频；示例：<audio src="background.mp3" autoplay muted loop></audio>
loop（可选）：音频播放完毕后自动循环播放
preload（可选）：控制音频预加载策略
- none（默认）：不预加载任何内容
- metadata：仅预加载音频元数据（时长 / 比特率等）
- auto：页面加载时预加载整个音频

进阶

<figure style="max-width: 800px; margin: 2rem auto;">
    <!-- picture标签：实现图片格式/分辨率的兼容性适配 -->
    <picture>
        <!-- 优先加载AVIF格式（压缩率最高，现代浏览器支持） -->
        <source 
            srcset="images/building.avif" 
            type="image/avif"
            media="(min-width: 768px)"  <!-- 可选：大屏加载高分辨率 -->
        >
        <!-- 其次加载WebP格式（主流兼容，体积小于PNG/JPG） -->
        <source 
            srcset="images/building.webp" 
            type="image/webp"
            media="(min-width: 768px)"
        >
        <!-- 兜底：不支持现代格式时加载PNG（全浏览器兼容） -->
        <img 
            src="images/building.png" 
            alt="城市建筑外立面实拍图"  <!-- 必加：无障碍访问 + 图片加载失败时显示 -->
            width="800"  <!-- 原生宽度，辅助浏览器布局 -->
            height="500" <!-- 原生高度，避免布局偏移 -->
            style="max-width: 100%; height: auto; display: block; margin: 0 auto;"
        >
    </picture>
    <!-- figcaption：图片语义化说明，提升可读性和SEO -->
    <figcaption style="text-align: center; color: #666; margin-top: 0.8rem; font-size: 0.9rem;">
        图2：兼容多格式的城市建筑图（AVIF/WebP优先，PNG兜底，兼顾性能与兼容性）
    </figcaption>
</figure>

<figure style="max-width: 800px; margin: 2rem auto;">
    <video 
        controls 
        width="100%" 
        height="auto" 
        poster="视频封面图地址.jpg"
        preload="metadata" <!-- 仅预加载元数据，优化加载性能 -->
        muted <!-- 静音播放（部分浏览器需静音才能自动播放） -->
    >
        <!-- 视频源：优先WebM，兜底MP4 -->
        <source src="video-demo.webm" type="video/webm">
        <source src="video-demo.mp4" type="video/mp4">
        
        <!-- 字幕轨道：支持中英双语，默认显示中文 -->
        <!-- 中文主字幕（默认启用） -->
        <track 
            kind="subtitles" 
            src="subtitles/zh-cn.vtt" 
            srclang="zh-CN" 
            label="中文" 
            default
        >
        <!-- 英文副字幕 -->
        <track 
            kind="subtitles" 
            src="subtitles/en-us.vtt" 
            srclang="en-US" 
            label="英文"
        >
        
        <!-- 兜底提示 -->
        你的浏览器不支持HTML5视频播放，请下载最新版Chrome/Edge浏览器。
    </video>
    <figcaption style="text-align: center; color: #666; margin-top: 0.8rem;">
        示例视频：WebM/MP4双格式兼容 + 中英双语字幕（WebM体积更小，MP4兼容性更广）
    </figcaption>
</figure>

<figure style="max-width: 600px; margin: 2rem auto;">
    <audio 
        controls 
        preload="metadata" <!-- 仅预加载音频元数据（时长/比特率等） -->
        loop="false" <!-- 关闭循环播放，默认false -->
        volume="1.0" <!-- 音量（0.0-1.0），默认1.0 -->
    >
        <!-- 音频源：优先WebM，兜底MP3 -->
        <source src="audio-demo.webm" type="audio/webm">
        <source src="audio-demo.mp3" type="audio/mpeg">
        
        <!-- 字幕轨道（适配有声读物/播客等场景） -->
        <track 
            kind="subtitles" 
            src="subtitles/audio-zh.vtt" 
            srclang="zh-CN" 
            label="音频字幕（中文）" 
            default
        >
        
        <!-- 兜底提示 -->
        你的浏览器不支持HTML5音频播放，请下载最新版Chrome/Edge浏览器。
    </audio>
    <figcaption style="text-align: center; color: #666; margin-top: 0.8rem;">
        示例音频：WebM/MP3双格式兼容（WebM体积更小，MP3兼容性更广）- 有声播客片段
    </figcaption>
</figure>