HTML 零基础入门到企业实战全套教程【第五章 5.5 综合案例：图文影音展示页面开发】

系列定位：零基础友好、无门槛入门，从基础语法到企业规范、实战开发、兼容适配全覆盖，适合前端初学者、转行开发者、在校学生，全程配套代码案例，可直接上手实操

前言

前面小节我们依次学习了 <img>、<figure>、``、<video>、<source> 这些多媒体标签，了解了 alt、controls、poster、loop、preload 等常用属性。 光看零散标签很难建立页面开发思维，本节我们做一个综合实战案例：图文影音作品展示页，把图片、配图说明、音频、视频全部整合到一个页面，同时落地企业前端规范：语义化标签、可访问性、媒体多格式兼容、注释规范。

知识点复盘：

• <img>：图片，alt 属性企业强制要求，用于无障碍、图片加载失败兜底MDN Web Do...
• <figure> + <figcaption>：图文组合语义标签，替代单纯 div 包裹图片
• ``：音频播放器，搭配 <source> 提供多格式兼容（mp3/ogg）
• <video>：视频播放器，poster 设置封面图，<source> 提供 mp4/webm 适配不同浏览器MDN Web Do...
• 现代浏览器 autoplay 规则：无静音 autoplay 大多会被拦截，企业项目尽量不要滥用自动播放

一、案例需求说明

我们要开发一个「影音作品展示页」，页面结构：

1. 页面标题 + 简短介绍
2. 图片作品区：多张配图 + 图片说明（figure）
3. 音频作品区：带控制器的音频播放
4. 视频作品区：带封面的视频播放器
5. 页脚版权信息

企业开发约束（重点，面试常问） ✅ 使用语义化标签 header / section / footer，不全部堆 div ✅ 所有图片必须写 alt，兼顾无障碍读屏 ✅ 音视频配置多份 source，做浏览器兼容降级 ✅ 增加浏览器不支持多媒体标签的降级提示文本 ✅ 代码注释清晰，文件路径规范（相对路径） ✅ 基础响应式宽度设置，避免媒体溢出屏幕

本案例只写原生 HTML，少量内嵌 CSS 仅做排版美化，重心放在多媒体标签使用，CSS 后续章节系统学习。

二、完整可运行源码

新建 media-demo.html，复制下面代码直接在浏览器打开即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端视口适配，企业项目标配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文影音展示页 | HTML多媒体综合案例</title>
    <style>
        /* 简易样式仅用于案例展示，正式项目抽离外部CSS */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            max-width: 1000px;
            margin: 30px auto;
            padding: 0 20px;
            line-height: 1.6;
            font-family: "Microsoft Yahei", sans-serif;
        }
        section {
            margin: 40px 0;
        }
        h2 {
            color: #222;
            border-left: 4px solid #2563eb;
            padding-left: 12px;
            margin-bottom: 16px;
        }
        figure {
            margin: 16px 0;
        }
        img, video {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
        }
        figcaption {
            color: #666;
            font-size: 14px;
            margin-top: 6px;
        }
        audio {
            width: 100%;
        }
        footer {
            margin-top: 60px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #888;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>图文影音作品展厅</h1>
        <p>HTML5多媒体标签综合实战页面，包含图片、音频、视频演示</p>
    </header>

    <!-- 图片作品区域 -->
    <section class="img-box">
        <h2>📷 摄影作品展示</h2>
        <figure>
            <!-- alt：图片描述，无障碍必备；不要写空alt除非纯装饰图 -->
            <img src="scenery.jpg" alt="山间湖泊风景，清晨薄雾">
            <figcaption>图1：山间晨雾湖景</figcaption>
        </figure>
        <figure>
            <img src="flower.jpg" alt="春日盛开的野花特写">
            <figcaption>图2：春日野花特写</figcaption>
        </figure>
    </section>

    <!-- 音频作品区域 -->
    <section class="audio-box">
        <h2>🎵 音频作品</h2>
        <p>自然白噪音音频演示，请使用播放器控件播放</p>
        <audio controls preload="metadata">
            <source src="nature.mp3" type="audio/mpeg">
            <source src="nature.ogg" type="audio/ogg">
            <!-- 降级提示：旧浏览器不支持audio标签时展示 -->
            您的浏览器不支持HTML5音频播放，请升级浏览器。
        
    </section>

    <!-- 视频作品区域 -->
    <section class="video-box">
        <h2>🎬 短视频作品</h2>
        <p>风景延时视频，设置封面海报poster</p>
        <video controls poster="video-poster.jpg" preload="metadata">
            <source src="timelapse.mp4" type="video/mp4">
            <source src="timelapse.webm" type="video/webm">
            您的浏览器不支持HTML5视频播放，请升级浏览器。
        </video>
    </section>

    <footer>
        HTML零基础入门教程 · 第五章多媒体案例 | 版权仅供学习演示
    </footer>
</body>
</html>

三、代码逐段讲解 & 企业开发要点

1. 资源路径说明（新手高频踩坑点）

示例中 scenery.jpg、nature.mp3 这类是相对路径：

把 html 文件和图片、音视频文件放在同一个文件夹，文件名保持一致； 实际企业项目一般规范目录结构：

project/
├─ index.html
├─ assets/
│   ├─ images/
│   └─ media/

路径就写成 assets/images/scenery.jpg，不要写本地绝对路径（C:/xxx），上线会失效。

2. img + figure 语义化

很多新手直接 img + p 放说明，企业评审更推荐 <figure>，它在语义上明确表达：图片和下面的文字是一组内容，搜索引擎、无障碍阅读器识别更友好。

踩坑提醒：alt 不要写 "图片""这是一张图" 这种无效描述，要描述图片内容；纯装饰图片才写 alt=""。

3. audio 标签重点属性

<audio controls preload="metadata">

• controls：显示原生播放控件，不加就看不到播放按钮
• preload="metadata"：预加载元信息（时长、封面），不加载全部音频，节省带宽，企业项目推荐配置
• <source> 多个源：浏览器从上往下匹配，找到支持的格式加载，mp3 兼容性最好，ogg 作为备选

4. video 标签重点属性

<video controls poster="video-poster.jpg" preload="metadata">

• poster：视频没播放前展示的封面图，提升体验，企业展示类页面必加
• 视频优先 mp4（兼容性最强），webm 体积更小，适合现代浏览器
• autoplay：如果一定要自动播放，必须搭配 muted，否则现代浏览器拦截，生产环境谨慎使用

5. 降级提示文本

写在 audio /video 标签内部的文字，只有浏览器不支持标签时才会显示，是向前兼容的兜底方案，属于工程规范。

四、本地运行实操步骤（零基础跟着做）

1. 在电脑新建一个文件夹，命名 media-case
2. 新建文本文档，粘贴上面代码，另存为 media-demo.html，编码选 UTF-8
3. 准备素材：找几张图片、一段 mp3、一段 mp4 视频，放到文件夹里，修改代码里的文件名和你素材一致
4. 双击 html 文件，直接在浏览器打开，就可以看到图文影音页面

五、拓展思考（进阶思考题）

1. 如果视频需要循环播放，加什么属性？👉 loop
2. 希望视频默认静音，可以加？👉 muted
3. 什么时候用 iframe 嵌入视频（B 站 / 腾讯视频）而不是原生 video？👉 引用第三方平台视频，自己不存视频文件时

六、本章小结

本章我们学习了 HTML5 多媒体相关标签：<img>、<figure>、``、<video>、<source>。 通过这个综合案例，不再是孤立写标签，而是搭建一个完整页面，同时建立企业级开发意识：语义化、无障碍 alt、媒体兼容降级、路径规范、性能预加载策略。