正在加载...

HTML 媒体

图像映射让同一张图片上的区域可以点击。网络上的媒体范围更广：静态图像、声音、动态画面，有时还有嵌套页面或托管播放器。HTML 提供专用标签，让浏览器能以带控件和无障碍挂钩的方式显示或播放这些资源。本课是你的总览地图，之后 Video、Audio、YouTube 与 Plug-ins 才会各自深入。

这里的「媒体」指什么

在本课程的日常说法里，媒体指不只是段落和标题的内容——照片、图标、语音片段、演示，以及嵌入内容。选用正确的元素，有助于浏览器展示原生播放界面、下载合适的资源类型，并给辅助技术一个比塞满脚本的神秘 <div> 更清晰的角色。

直接回答

  • 图像 → img（有时用 picture 提供多个文件）
  • 声音 → audio
  • 影片与短片 → video
  • 嵌套浏览（地图、其他网站的播放器）→ 常为 iframe
    优先为任务选择匹配的元素。除非你有强大且无障碍的自定义播放器，否则请在 audio 和 video 上给用户提供 controls。当媒体承载重要信息时，请规划文本替代、字幕或文字稿。

构建块一览

📊 媒体构建块

元素 典型用途
img / picture 照片、示意图、图标
audio 音乐、语音、音效
video 短片与录制演示
iframe 嵌入另一 HTML 页面或托管播放器

一个小小示例

你已经认识 img。下面展示 audio 与 video 如何在第一张练习页里与它并列——路径是示例；在家练习时请换成你实际拥有的文件。

迷你媒体示例

html
HTML Code 
<img src="images/note.png" alt="Music note icon">
<audio controls src="media/hello.mp3"></audio>
<video controls width="320" src="media/demo.mp4"></video>

如何阅读示例

  • img 仍然需要 src 和有意义的 alt
  • audio 与 video 使用 src（或在后续课程中用嵌套的 source 子元素），并受益于 controls
  • video 上的 width 可在文件加载时预留布局空间
  • 空文件或错误路径会像其他资源一样失败——尽早检查文件夹

controls 是初学者习惯

controls 属性请求浏览器显示播放、暂停及相关界面。在没有明确用户操作时自动播放声音常常被拦截，而且通常令人反感。从可见控件起步。若项目真正需要，自定义播放器以后再学。

带 controls 的 audio 与 video

html
HTML Code 
<audio controls src="media/lesson-intro.mp3"></audio>
<video controls width="480" src="media/walkthrough.mp4"></video>

选择合适的工具

  • 播客或语音备忘 → audio
  • 屏幕录制或短片 → video
  • 照片或示意图 → img / picture
  • 地图小部件或第三方播放器页面 → 常为 iframe（并注意性能与安全）
    当存在原生元素时，不要把视频硬塞进图像标签，也不要把整个外部应用塞进神秘的脚本堆里。

无障碍与含义

如果媒体在传授内容，请规划听不见或看不见它的人仍能获得要点：信息性图像用 alt，有旁白的视频用字幕，较长音频用文字稿。没有信息的装饰性动效不应困住焦点或大声自动播放。后续专题课会更深入；现在先把习惯锁定。

iframe 的代价（预览）

iframe 嵌入另一个浏览上下文。这对地图和托管播放器很强大，也会把另一页面的脚本、cookie 与布局重量带进你的页面。真正目标是嵌套时再使用——不要把它当作你自己托管的每个媒体文件的默认方案。对自己的文件，原生 audio / video / img 仍然更简单。

后续课程如何衔接

有了这张地图之后：Video 与 Audio 会讲授属性、多源与实用文件习惯。Plug-ins 与 YouTube 覆盖较旧或托管模式。Iframe 会深入嵌入。把本页当作目录，把那些页面当作工坊。

在编辑器中练习

  1. 根据表格说出你会为播客文件选哪个元素（audio）。
  2. 在练习页加入一个带清晰 alt 的 img（你已经会了）。
  3. 若有小的 mp3 或 mp4，添加带 controls 的 audio 或 video。
  4. 在笔记中写一行：「口语内容要有字幕/文字稿。」
  5. 浏览后续媒体课的标题，让路线图变得熟悉。

容易犯的错误

  • 没有 controls 或明确用户手势就自动播放声音
  • 嵌入巨大视频却不考虑尺寸，也没有文本替代计划
  • 原生 audio/video/img 就够用时，却对每个文件都用 iframe
  • 忘记 iframe 会导入另一页面的安全与性能成本
  • 把本概览当成「永远够用」，真正发布媒体时却跳过专题课

小结

  • HTML 媒体涵盖图像、音频、视频与嵌入
  • 优先为任务选择匹配的元素
  • 给用户控件；当媒体承载含义时规划替代方案
  • 自己的文件用原生标签；真正嵌套另一页面或托管播放器时再用 iframe
  • 后续课程会分别专精各类型——本页是地图

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程