HTML编程课程六、：HTML5 新增多媒体标签

本课程是的核心实战课程，承接"HTML基础规范"、"语义化思维"，核心目标是：掌握HTML5新增**音频（<audio>）、视频（<video>）、嵌入内容（<embed>）**三大多媒体标签的语义、用法、核心属性及实战场景，替代传统"依赖插件（如Flash）"的多媒体嵌入方式，实现无插件、跨浏览器的多媒体展示，同时贴合语义化、可维护性规范。

前置要求：已熟练掌握 HTML基础标签（div、p、img等）和编码规范（标签小写、属性必填、嵌套合理）；理解语义化原则（标签语义与内容匹配）；了解"多媒体文件格式"（如MP3、MP4）的基本概念（无需深入研究格式原理）。

核心提示：HTML5多媒体标签的核心优势是「原生支持」------ 无需安装Flash等第三方插件，主流浏览器（Chrome、Edge、Firefox、Safari最新版）均兼容；学习重点是"记住核心属性、掌握实战场景、处理兼容性问题"，而非死记格式。

一、 为什么需要HTML5新增多媒体标签？

在HTML5出现之前，网页中嵌入音频、视频、动画等多媒体内容，必须依赖第三方插件（最常用的是Flash），这种方式存在3个致命弊端，也是HTML5新增多媒体标签的核心原因：

依赖插件，体验较差：用户必须安装对应插件（如Flash）才能查看多媒体内容，若未安装则无法显示；且插件占用内存大，容易导致网页卡顿、崩溃；
兼容性差：不同浏览器对插件的支持不一致（如部分浏览器不支持Flash），甚至部分移动设备（手机、平板）直接禁止插件运行；
语义缺失，不规范：插件嵌入通常用<object>或<embed>（旧版），标签本身无语义，无法让浏览器、搜索引擎识别"嵌入的是音频还是视频"，不符合语义化规范（贴合阶段2课程1的核心要求）。

HTML5新增的<audio>（音频）、<video>（视频）标签，完美解决了这些问题，同时新增了语义化的嵌入逻辑：

原生支持：无需插件，浏览器直接解析播放，体验流畅、占用内存小；

语义明确：<audio>专门用于嵌入音频，<video>专门用于嵌入视频，标签语义与内容完全匹配，符合语义化规范；

兼容性好：支持所有现代主流浏览器，移动设备完美适配；

可控制：通过标签属性或后续JavaScript，可轻松实现"播放、暂停、音量调节"等控制功能，灵活度高。

补充：旧版<embed>标签在HTML5中被保留并优化，用于嵌入"无法用<audio>/<video>覆盖的多媒体内容"（如动画、第三方播放器），本课程会同步详解其规范用法。

二、核心多媒体标签详解（3个重点）

本课程聚焦3个核心多媒体标签：<audio>（音频）、<video>（视频）、<embed>（嵌入内容），每个标签按「核心语义→典型场景→语法格式→核心属性→实战示例→兼容性处理→避坑提醒」的逻辑拆解，全程贴合前序规范，确保学完就能落地。

通用原则：所有多媒体标签均为「双标签」（部分可简写为单标签，但不推荐）；标签语义必须与嵌入的内容匹配（音频用<audio>，视频用<video>）；核心属性必填，确保多媒体正常加载播放。

1. 音频标签：<audio>

核心语义

表示嵌入音频内容，语义是"音频、声音"，专门用于在网页中嵌入可播放的音频文件（如音乐、旁白、录音），替代传统Flash音频播放器，是HTML5语义化多媒体的核心标签。

通俗理解：专门用来装"声音文件"的标签，浏览器会自动渲染出音频播放器，用户可直接播放、暂停，无需额外插件。

典型场景

网页背景音乐（如个人博客、企业官网的背景音乐）；

音频讲解（如教程网页的语音旁白、新闻网页的音频播报）；

录音展示（如用户评论中的语音留言、访谈录音）；

简单音频播放器（如音乐网站的单曲播放课程）。

常用音频格式（必记，避免格式不兼容）

不同浏览器对音频格式的支持不同，为确保兼容性，需选择主流格式，核心推荐3种格式（按兼容性优先级排序）：

|------|------|----------------------------------------|----------------------------|
| 音频格式 | 后缀名 | 兼容性（主流浏览器） | 核心特点 |
| MP3 | .mp3 | 所有现代浏览器（Chrome、Edge、Firefox、Safari）均支持 | 压缩比高、文件小、音质好，最推荐使用 |
| WAV | .wav | 支持所有主流浏览器，部分旧版浏览器兼容 | 无压缩、音质极佳、文件大，适合短音频（如录音、旁白） |
| OGG | .ogg | 支持Chrome、Edge、Firefox，不支持Safari | 开源、压缩比高、文件小，适合非苹果设备场景 |

核心建议：优先使用MP3格式（兼容性最广）；若需兼顾所有场景，可提供MP3+OGG两种格式（后续实战会讲解如何实现）。

语法格式（双标签，核心属性必填）

基础写法（最简，核心属性src必填）：

|---------------------------------------------------------------------------------------|
| html  <audio src="music.mp3" controls></audio> |

完整写法（包含所有核心属性，推荐实战使用）：

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html  <audio controls autoplay muted loop preload="auto" class="audio-player">  您的浏览器不支持音频播放，请升级浏览器后再尝试！  <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> |

核心属性（必记，实战高频）

<audio>标签的属性决定了音频的播放方式、控制权限、加载逻辑，核心属性按"优先级"排序，重点掌握前5个：

1.src（必填）：指定音频文件的路径（相对路径或绝对路径），如src="music.mp3"（相对路径，音频文件与HTML文件同级）、src="https://xxx.com/music.mp3"（绝对路径，在线音频）。

注意：路径错误会导致音频无法加载，贴合阶段1"属性必填、路径正确"的规范；

补充：若需多格式兼容，可不用src属性，改用<source>标签（后续详解）。

2.controls（可选，推荐添加）：显示浏览器默认的音频播放器控件（包含播放/暂停、音量调节、进度条），无需赋值（仅写controls即可）。

若不添加controls：音频会加载，但用户无法控制播放/暂停（除非用JavaScript），通常用于"背景音乐"（自动播放，无需用户控制）。

3.autoplay（可选）：页面加载完成后，自动播放音频，无需赋值（仅写autoplay即可）。

关键限制：现代浏览器（如Chrome、Edge）为避免打扰用户，要求autoplay必须配合muted（静音）使用，否则自动播放失效；

场景：仅用于背景音乐（静音自动播放，用户可手动开启音量）。

muted（可选）：音频默认静音，无需赋值（仅写muted即可），常与autoplay配合使用，实现"静音自动播放"。
loop（可选）：音频播放完毕后，自动循环播放，无需赋值（仅写loop即可）。

场景：背景音乐、循环旁白（如广告页的语音提示）。

3. preload（可选）：指定音频的加载方式，取值有3种，按需选择：

preload="auto"（默认）：页面加载时，自动加载音频文件（适合短音频）；

preload="none"：页面加载时，不加载音频，直到用户点击播放才加载（适合长音频、大文件，节省带宽）；

preload="metadata"：页面加载时，仅加载音频的元数据（如时长、大小），不加载完整文件（平衡加载速度和用户体验）。

4.width/height（可选）：设置音频播放器的宽度和高度（单位：px），如width="300" height="50"；

注意：音频播放器的高度通常固定，修改宽度即可，无需过度设置。

补充标签：<source>（多格式兼容）

为解决"不同浏览器对音频格式支持不一致"的问题，HTML5提供<source>标签，用于在<audio>内部提供多个音频格式，浏览器会自动识别并加载"自己支持的格式"，语义上是"音频源"。

语法格式（嵌套在<audio>内部，可多个）：

关键说明：

<source>是单标签，核心属性是src（音频路径）和type（音频格式，如audio/mpeg对应MP3，audio/ogg对应OGG）；

多个<source>按"优先级"排序，浏览器会从第一个开始尝试加载，加载成功则停止，失败则尝试下一个；

当所有<source>都无法加载（如浏览器不支持任何格式），会显示<audio>内部的"降级文本"，提升用户体验。

实战示例（3个高频场景，可直接复制运行）

示例1：基础音频播放器（显示控件，用户手动播放，推荐场景：音频讲解、录音展示）

示例2：网页背景音乐（静音自动播放、循环，用户可手动开启音量）

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网页背景音乐</title> </head> <body> <h1>我的个人博客</h1> <p>欢迎来到我的博客，聆听背景音乐...</p>  <audio autoplay muted loop preload="auto"> <source src="bg-music.mp3" type="audio/mpeg"> <source src="bg-music.ogg" type="audio/ogg"> </audio> </body> </html> |

示例3：多格式兼容音频播放器（兼顾所有浏览器，显示控件）

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多格式兼容音频播放器</title> </head> <body> <h2>访谈录音</h2> <audio controls preload="metadata" width="400"> <source src="interview.mp3" type="audio/mpeg"> <source src="interview.ogg" type="audio/ogg"> <source src="interview.wav" type="audio/wav"> 您的浏览器不支持音频播放，请升级浏览器或下载音频文件：<a href="interview.mp3" download>下载MP3</a> </audio> </body> </html> |

兼容性处理（新手必学，避免踩坑）

虽然现代浏览器均支持<audio>标签，但仍需考虑"旧版浏览器"（如旧版IE）和"格式不兼容"的情况，核心处理方案有2种：

多格式降级：用<source>标签提供MP3+OGG（+WAV）格式，确保不同浏览器都能加载；
文本+下载降级：在<audio>内部添加"降级文本"，并提供音频文件下载链接（如<a href="music.mp3" download>下载MP3</a>），让无法播放的用户可下载查看；
补充：旧版IE（IE8及以下）不支持<audio>标签，若需兼容，可搭配<embed>标签（后续详解），实现"双重兼容"。

避坑提醒（高频错误，贴合前序规范）

❌ 错误：src路径错误（如音频文件在"audio"文件夹，却写src="music.mp3"）；修正：写正确的相对路径（src="audio/music.mp3"）或绝对路径，贴合阶段1路径规范；

❌ 错误：仅写autoplay，不写muted，导致自动播放失效；修正：autoplay与muted配合使用（autoplay muted）；

❌ 错误：用<audio>标签嵌入视频文件（如src="video.mp4"）；修正：视频必须用<video>标签，贴合语义化原则（阶段2课程1核心）；

❌ 错误：多个<source>标签不写type属性，导致浏览器无法识别格式；修正：每个<source>必须添加type属性，指定音频格式；

❌ 错误：不添加降级文本，浏览器不支持时无提示；修正：在<audio>内部添加降级文本，提升用户体验。

2. 视频标签：<video>

核心语义

表示嵌入视频内容，语义是"视频、影像"，专门用于在网页中嵌入可播放的视频文件（如教程视频、广告视频、新闻视频），替代传统Flash视频播放器，是HTML5中最常用的多媒体标签之一，语义与内容高度匹配。

通俗理解：专门用来装"视频文件"的标签，浏览器自动渲染视频播放器，支持播放、暂停、全屏等功能，无需插件，体验优于Flash。

典型场景（必记）

教程视频（如前端教程、技能教学的嵌入式视频）；

企业官网广告视频（如首页轮播视频、产品介绍视频）；

新闻/资讯视频（如新闻网页的嵌入式播报视频）；

用户上传视频（如博客、论坛的用户分享视频）。

常用视频格式（兼容性）

视频格式的兼容性比音频更复杂，不同浏览器对视频编码的支持不同，核心推荐3种主流格式（按兼容性优先级排序）：

|------|-------|---------------------------------------------|--------------------------------|
| 视频格式 | 后缀名 | 兼容性（主流浏览器） | 核心特点 |
| MP4 | .mp4 | 所有现代浏览器（Chrome、Edge、Firefox、Safari）、移动设备均支持 | 压缩比高、文件小、画质清晰，最推荐使用（兼容性之王） |
| WebM | .webm | 支持Chrome、Edge、Firefox，不支持Safari | 开源、压缩比极高、文件小，适合非苹果设备、追求加载速度的场景 |
| OGV | .ogv | 支持Chrome、Edge、Firefox，部分旧版浏览器支持 | 开源、画质好，兼容性不如MP4，仅作为降级格式 |

核心建议：优先使用MP4格式（兼容所有场景）；若需兼顾"加载速度"和"兼容性"，可提供MP4+WebM两种格式（后续实战讲解）。

语法格式（双标签，核心属性）

基础写法（最简，核心属性src、controls必填）：

|------------------------------------------------------------------------------------------------------|
| html  <video src="video.mp4" controls width="600"></video> |

完整写法（包含所有核心属性、多格式兼容、降级处理，推荐实战使用）：

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html  <video controls autoplay muted loop preload="auto" width="800" poster="video-cover.jpg" class="video-player">  <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">  您的浏览器不支持视频播放，请升级浏览器或下载视频：<a href="video.mp4" download>下载MP4视频</a> </video> |

核心属性（必记，实战高频，对比<audio>区分记忆）

<video>标签的属性与<audio>大部分一致，重点掌握"独有属性"，核心属性按优先级排序：

src（必填） ：指定视频文件的路径（相对路径/绝对路径），与<audio>的src用法完全一致；

补充：多格式兼容时，可不用src，改用<source>标签。

2. controls（可选，推荐添加）：显示浏览器默认的视频播放器控件（包含播放/暂停、音量调节、进度条、全屏按钮），无需赋值；

区别于<audio>：视频控件多了"全屏按钮"，贴合视频播放场景。

3.width/height （可选，推荐添加）：设置视频播放器的宽度和高度（单位：px），如width="800" height="450"；

关键：若只设置width，height会自动按视频比例缩放（避免视频拉伸变形）；不建议同时设置width和height（容易导致变形）。

autoplay（可选）：页面加载完成后，自动播放视频，需配合muted使用（现代浏览器限制），无需赋值；

场景：首页广告视频、自动播放的教程预览视频。

5. muted（可选）：视频默认静音，无需赋值，常与autoplay配合使用，实现"静音自动播放"（避免打扰用户）。

6. loop（可选） ：视频播放完毕后，自动循环播放，无需赋值；

场景：广告视频、循环展示的产品介绍视频。

7. preload（可选）：视频的加载方式，与<audio>完全一致（auto/none/metadata），推荐长视频用preload="none"（节省带宽）。

8. poster（可选，独有，推荐添加） ：指定视频加载完成前显示的"封面图片"，如poster="video-cover.jpg"；

作用：避免视频加载时显示空白，提升用户体验；封面图片建议与视频比例一致（如16:9）。

9. playsinline（可选，移动端必备）：在移动端（手机、平板），视频会"inline（行内）"播放，不会自动全屏，无需赋值；

关键：若不添加playsinline，移动端点击播放后，视频会自动全屏（影响页面布局），适合移动端场景。

补充标签：<source>（视频多格式兼容）

用法与<audio>内部的<source>完全一致，嵌套在<video>内部，用于提供多个视频格式，浏览器自动选择支持的格式加载。

语法格式：

实战示例（3个高频场景，可直接复制运行）

示例1：基础视频播放器（显示控件、设置宽度、添加封面，推荐场景：教程视频）

示例2：首页广告视频（静音自动播放、循环、无控件，移动端适配）

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>企业官网首页</title> </head> <body>  <video autoplay muted loop playsinline width="100%" poster="ad-cover.jpg"> <source src="ad-video.mp4" type="video/mp4"> <source src="ad-video.webm" type="video/webm"> </video> <h1>专注前端教育，助力零基础成长</h1> </body> </html> |

示例3：多格式兼容视频播放器（兼顾所有浏览器，支持下载）

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>多格式兼容视频播放器</title> </head> <body> <h2>产品介绍视频</h2> <video controls preload="metadata" width="800" poster="product-cover.jpg" playsinline> <source src="product.mp4" type="video/mp4"> <source src="product.webm" type="video/webm"> <source src="product.ogv" type="video/ogg"> 您的浏览器不支持视频播放，请升级浏览器或下载视频： <a href="product.mp4" download>下载MP4</a> | <a href="product.webm" download>下载WebM</a> </video> </body> </html> |

兼容性处理（比<audio>更重要，必学）

视频的兼容性问题主要集中在"格式"和"旧版浏览器"，核心处理方案有3种：

多格式降级：优先提供MP4格式，搭配WebM格式（降级），确保Chrome、Edge、Firefox、Safari、移动设备均能兼容；
封面+降级文本：添加poster属性（加载封面），在<video>内部添加降级文本和下载链接，避免加载空白、用户无提示；
移动端适配：添加playsinline属性，确保移动端视频行内播放，不自动全屏；
旧版浏览器兼容：旧版IE（IE8及以下）不支持<video>标签，可搭配<embed>标签（后续详解），实现双重兼容。

避坑提醒（高频错误，贴合前序规范）

❌ 错误：同时设置width和height，导致视频拉伸变形（如视频比例16:9，却设置width="800" height="600"）；修正：仅设置width，让height自动缩放；

❌ 错误：poster路径错误，导致封面无法显示；修正：写正确的相对/绝对路径，贴合阶段1路径规范；

❌ 错误：移动端不添加playsinline，导致点击播放后自动全屏；修正：添加playsinline属性，适配移动端；

❌ 错误：用<video>标签嵌入音频文件（如src="music.mp3"）；修正：音频用<audio>标签，贴合语义化原则；

❌ 错误：视频文件过大，未设置preload="none"，导致页面加载缓慢；修正：长视频、大文件设置preload="none"，节省带宽；

❌ 错误：autoplay未配合muted，导致自动播放失效；修正：autoplay与muted配合使用（autoplay muted）。

3. 嵌入标签：<embed>

核心语义

表示嵌入任意外部内容，语义是"嵌入、植入"，用于在网页中嵌入"无法用<audio>/<video>覆盖的多媒体内容"（如Flash动画、第三方播放器、PDF文件、小游戏等），是HTML5保留并优化的标签，兼容性极强（支持所有浏览器）。

通俗理解："万能嵌入标签"，只要是外部可嵌入的内容，都能用<embed>嵌入；但语义不如<audio>/<video>明确，因此优先使用<audio>/<video>，仅在特殊场景使用<embed>。

典型场景（必记，仅用于特殊场景）

注意：<embed>的语义不明确，因此优先使用<audio>/<video>嵌入音频/视频，仅在以下场景使用<embed>：

嵌入Flash动画（如旧版小游戏、旧版广告动画）；

嵌入第三方播放器（如腾讯视频、优酷视频的嵌入式播放器）；

嵌入PDF文件、PPT文件（让用户在网页中直接查看，无需下载）；

兼容旧版浏览器（如IE8及以下），作为<audio>/<video>的降级方案。

语法格式（单标签，HTML5中可省略闭合，核心属性必填）

基础写法（最简，核心属性src、type必填）：

|---------------------------------------------------------------------------------------------------------------------------------------|
| html  <embed src="flash-animation.swf" type="application/x-shockwave-flash" width="400" height="300"> |

实战示例（3个高频场景，可直接复制运行）

示例1：嵌入Flash动画（旧版场景，兼容旧浏览器）

示例2：嵌入第三方视频播放器（如腾讯视频嵌入式播放）

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>嵌入第三方视频</title> </head> <body> <h2>腾讯视频嵌入式播放</h2>  <embed src="https://v.qq.com/txp/iframe/player.html?vid=x0040z7k900" type="application/x-shockwave-flash" width="800" height="450" allowfullscreen> </body> </html> |

示例3：作为<video>的降级方案（兼容旧版IE）

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>视频双重兼容（video+embed）</title> </head> <body> <h2>产品介绍视频</h2>  <video controls width="800" poster="product-cover.jpg"> <source src="product.mp4" type="video/mp4">  <embed src="product.mp4" type="video/mp4" width="800" height="450"> </video> </body> </html> |

核心属性（必记，实战高频）

src（必填）：指定嵌入外部内容的路径（相对路径/绝对路径），如Flash文件、第三方播放器地址、PDF文件路径；
type（必填）：指定嵌入内容的"MIME类型"，告诉浏览器如何解析内容，核心类型有3种：

Flash动画：type="application/x-shockwave-flash"；
视频文件：type="video/mp4"（与<video>一致）；

PDF文件：type="application/pdf"。

3. width/height（可选）：设置嵌入内容的宽度和高度（单位：px），如width="800" height="450"；

4. allowfullscreen（可选）：允许嵌入的内容全屏显示，无需赋值（仅写allowfullscreen即可），适合视频、动画场景；

5. pluginspage（可选，旧版兼容）：指定插件下载地址，若浏览器未安装对应插件（如Flash插件），会提示用户下载，如pluginspage="https://get.adobe.com/flashplayer/"。

兼容性处理（核心优势：兼容性极强）

若嵌入的是Flash动画：现代浏览器（Chrome、Edge）已默认禁用Flash插件，需用户手动开启；因此Flash场景仅用于旧版需求；

若嵌入的是PDF文件：部分浏览器（如Chrome）会自动用原生播放器解析，部分浏览器需安装PDF插件；可搭配"下载链接"，确保用户能查看。

避坑提醒（高频错误，贴合前序规范）

❌ 错误：滥用<embed>标签，用它嵌入音频/视频（如<embed src="music.mp3">）；修正：优先用<audio>/<video>标签，贴合语义化原则；

❌ 错误：遗漏type属性，导致浏览器无法解析嵌入内容；修正：type属性必填，指定正确的MIME类型；

❌ 错误：嵌入Flash动画，未添加pluginspage属性，旧版浏览器无插件时无提示；修正：添加pluginspage属性，提供插件下载地址；

❌ 错误：src路径错误，导致嵌入内容无法加载；修正：写正确的相对/绝对路径，贴合阶段1路径规范；

❌ 错误：嵌入PDF文件时，未提供下载链接，部分浏览器无法解析；修正：添加下载链接（如<a href="file.pdf" download>下载PDF</a>）。

三、3个多媒体标签对比（速记必备，避免混淆）

为了避免混淆<audio>、<video>、<embed>三个标签，整理核心对比表，明确"什么时候用哪个标签"，实战直接对照套用：

|-----------|--------|-----------------------|---------------------|---------------------------|
| 标签 | 核心语义 | 适用场景 | 核心优势 | 注意事项 |
| <audio> | 音频内容 | 音乐、旁白、录音 | 语义明确、原生支持、无需插件 | 优先用MP3格式，autoplay需配合muted |
| <video> | 视频内容 | 教程、广告、新闻视频 | 语义明确、原生支持、可加封面、全屏控制 | 优先用MP4格式，移动端加playsinline |
| <embed> | 任意嵌入内容 | Flash、第三方播放器、PDF、旧版兼容 | 兼容性极强、用法灵活 | 语义不明确，不滥用，优先用前两个标签 |

四、综合实战：搭建多媒体网页（落地巩固）

结合本课程3个核心标签，搭建一个"多媒体展示网页"，整合音频、视频、嵌入内容，贴合前序语义化规范（阶段2课程1）和编码规范（阶段1），检验学习成果，可直接复制运行并修改。

实战需求：搭建"前端教程多媒体网页"

页面结构（贴合语义化规范，阶段2课程1）：

头部（header）：包含网页logo（img）、网页标题（h1）、主导航（nav+ul+li+a）；

核心主体（main，仅1个）：包含3个板块（section），分别是"音频教程""视频教程""资料下载"；

侧边栏（aside）：包含"多媒体使用说明"（p标签）；

底部（footer）：包含版权信息（p）、联系方式（p）。

多媒体要求（本课程核心）：

音频板块（section）：用<audio>标签嵌入教程旁白（MP3格式），显示控件、多格式兼容、添加降级文本；
视频板块（section）：用<video>标签嵌入教程视频（MP4格式），显示控件、设置宽度和封面

HTML编程 课程六、：HTML5 新增多媒体标签

HTML编程课程六、：HTML5 新增多媒体标签