从0开始学前端 第六课：图像和多媒体元素

第六课：图像和多媒体元素

学习目标

在本课中，你将学习以下内容：

1. 如何在网页中插入和使用图像。
2. 理解不同图像格式的应用场景。
3. 如何嵌入音视频多媒体元素。
4. 学习使用HTML5的<audio>和<video>标签。
5. 掌握多媒体文件的基本属性和方法。

学习内容

1. 插入图像

• 使用<img>标签在HTML中插入图像。
• 主要属性：
  • src：定义图像的URL。
  • alt：定义替代文本，当图像无法显示时出现。
  • width和height：定义图像的尺寸，推荐使用CSS设置。
  • title：为图像提供额外信息，当鼠标悬停时显示。

代码示例:

<img src="example.jpg" alt="示例图片" width="300" height="200" title="图片标题">

预计输出效果:
在网页中显示宽度为300像素，高度为200像素的图片，图片无法显示时会显示“示例图片”作为替代文本，并且当鼠标悬停时显示“图片标题”。

2. 图像格式

• JPEG：适合高分辨率的照片，但不支持透明。
• PNG：支持透明，并且压缩时不会失真，适用于网页设计元素。
• GIF：支持简单动画，但色彩限制更多。
• SVG：矢量图形，可以无限放大而不失真，适合图标和logo。

3. 嵌入音视频

• <audio>和<video>标签允许将音频和视频文件嵌入到HTML文档中。
• 主要属性：
  • src：定义媒体文件的URL。
  • controls：提供播放控件，如播放/暂停按钮。
  • autoplay：页面加载时自动播放媒体（注意：许多浏览器要求用户交互后才允许自动播放）。
  • loop：媒体播放结束后重新开始播放。
  • muted：默认静音播放。

代码示例:

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

<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 元素。
</video>

预计输出效果:
网页中将展示一个带有控制按钮的音频播放器和一个视频播放器。用户可以播放、暂停和查看媒体内容。

课后练习

练习一： 在网页中插入一张宽度为640像素的图片，并确保图片能够适应不同屏幕大小。

练习二： 选择一个适合的图像格式，将公司logo插入到网站的页眉中，解释为何选择该格式。

练习三： 在网页中嵌入一个音频文件，允许用户控制播放。

练习四： 创建一个视频播放器，视频默认静音，并且在循环播放。

解析：

练习一解析：

<img src="example.jpg" alt="示例图片" style="max-width:100%; height:auto;">

解析：设置max-width:100%和height:auto确保图片宽度最大不超过其容器宽度，且高度自动调整，保持原始宽高比。

练习二解析：
应选择SVG格式，因为SVG是矢量格式，无论放大到什么程度都不会失真，非常适合logo等图形。

<img src="logo.svg" alt="公司logo" style="height: 100px;">

练习三解析：

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

解析：这段代码创建了一个音频播放器，用户可以使用控件播放、暂停和调整音量。

练习四解析：

<video width="320" height="240" controls muted loop>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

解析：muted属性确保视频默认静音播放，loop属性使视频循环播放。

---

章节目录
第七课：脚本和元数据元素，基本文档元素