---
title: "IT课程 HTML基础 014_多媒体和嵌入内容"
date: 2024-01-23T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html多媒体", "html音频", "html视频", "html嵌入内容", "html地图", "html嵌入网页", "html框架"]
categories: ["学习", "HTML基础"]
canonical: https://www.zhaojian.net/it-course-html-014/
author: 赵健
---

多媒体和嵌入内容
HTML5中的音频和视频标签的使用
嵌入内容的应用，如地图、嵌入网页等


### 图片

图片是一种非常重要的媒体类型，能够提升用户体验，使信息传递更为直观和生动。在 HTML 中，我们使用 `<img>` 标签来插入图片。`<img>` 标签是自闭合的空标签，也就是说它没有结束标签。图片的地址通过 `<img>` 标签的 `src`（source）属性指定。

示例：

```html
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="图像描述">
```

效果：

![示例效果](/uploads/2024/01/20231218222209.png)

图像元素还可以包含以下属性：

- `width`：指定图像的宽度。
- `height`：指定图像的高度。
- `align`：指定图像的对齐方式。
- `border`：指定图像的边框。
- `hspace`：指定图像与周围元素的水平间距。
- `vspace`：指定图像与周围元素的垂直间距。
- `ismap`：指定图像是否为地图图像。

##### 设置图片大小

我们可以通过 `<img>` 标签的 `width` 和 `height` 属性来设置图片的宽度和高度。这两个属性的值可以是具体的像素值，也可以是百分比。

示例：

```html
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="图像描述" width="100" height="100" align="center" border="1">
```

效果：

![示例效果](/uploads/2024/01/20231218222223.png)

##### 设置替代文本

替代文本（alt text）用来在图片无法加载的时候显示，也被屏幕阅读器用来读出图片的内容，帮助视力障碍者理解图片。我们通过 `<img>` 标签的 `alt` 属性来设置替代文本。

示例：

```html
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="找不到图片时显示此文本">
```

效果：

![示例效果](/uploads/2024/01/20231218222245.png)
##### 图片链接

图片也可以被用作超链接。我们只需要把 `<img>` 标签放在 `<a>` 标签内部，就可以创建一个图片链接。

示例：

```html
<a href="https://www.zhaojian.net/">
	<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="图像描述" width="100" height="100" align="center" border="5">
</a>
```

效果：

![示例效果](/uploads/2024/01/20231218222332.png)

> [!小结]
> - `width` 和 `height` 属性来设置图片的宽度和高度。这两个属性的值可以是具体的像素值，也可以是百分比。
> - 如果同时设置了图片的宽度和高度，而这两个值的比例与图片本身的比例不一致，那么图片可能会被拉伸或压缩，造成形变。
> - 如果图片链接设置了边框，那边框默认和超链接一样的颜色

***

### 视频

HTML 视频元素用于在网页中嵌入视频。视频元素的标签是 `<video>`。

示例：

```html
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>
```

效果：

![示例效果](/uploads/2024/01/20231218222427.png)

视频元素还可以包含以下属性：

- `width`：指定视频的宽度。
- `height`：指定视频的高度。
- `poster`：指定视频的海报帧。
- `autoplay`：指定视频是否在加载时自动播放。
- `loop`：指定视频是否循环播放。
- `muted`：指定视频是否静音。
- `preload`：指定视频是否在加载时预加载。

示例：

```html
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>
```

这个示例包含一个视频元素。视频文件的 URL 设置为 mp4.mp4，宽度设置为 400 像素，高度设置为 300 像素，海报帧设置为 zhaojian-avatar.png，自动播放设置为 true，循环播放设置为 true，静音设置为 true，预加载设置为 auto。

效果：

![示例效果](/uploads/2024/01/20231218222521.png)

**一个非常全面的 HTML 视频 解决方案**（不推荐）

以下实例中使用了 4 种不同的视频格式。HTML 5 `<video>` 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 `<embed>` 元素。

示例：

```html
<video width="320" height="240" controls>  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.ogg" type="video/ogg">  
  <source src="video.webm" type="video/webm">  
  <object data="video.mp4" width="320" height="240">  
    <embed src="video.swf" width="320" height="240">  
  </object>  
</video>
```


> [!小结]
> - `<source>` 元素提供了一个备份选项，如果浏览器不支持该格式，则将尝试播放第二个 `<source>` 元素指定的视频文件。

***
### 音频

HTML 中的 `<audio>` 元素用于在网页中嵌入音频内容。

示例：

```html
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
</audio>
```

效果：

![示例效果](/uploads/2024/01/20231218222551.png)

音频元素还可以包含以下属性：

- `controls`：指定是否显示音频控件，默认值是 `true`。
- `autoplay`：指定音频是否在加载时自动播放。
- `loop`：指定音频是否循环播放。
- `muted`：指定音频是否静音。
- `preload`：指定音频是否在加载时预加载。

示例：

```html
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
</audio>
```

这个示例包含一个 `<audio>` 元素。音频文件的 URL 设置为 `mp3.mp3`，控制控件设置为 `true`，自动播放设置为 `true`，循环播放设置为 `true`，静音设置为 `true`，预加载设置为 `auto`。

效果：

![示例效果](/uploads/2024/01/20231218222612.png)

***
### `embed` 元素

`embed` 元素是 HTML 4.01 中引入的元素。它可以嵌入任何类型的资源，包括视频、音频、图像、Flash 等。`embed` 元素需要浏览器支持特定的插件才能显示。

示例：

```html
<embed src="资源 URL" type="资源类型">
```

> [!小结]
> - HTML5 引入了 `<video>` 和 `<audio>` 元素来替代 `<embed>` 元素。
> - `embed` 元素可以嵌入任何类型的资源，而 `<video>` 元素和 `<audio>` 元素只能嵌入视频和音频资源。
> - `embed` 元素需要浏览器支持特定的插件才能显示，而 `<video>` 元素和 `<audio>` 元素不需要。
> - `<embed>` 元素仍然可以使用，但它不再被推荐。

***
### `object`元素

`object` 元素是 HTML 4.01 中引入的元素。它可以嵌入任何类型的资源，包括视频、音频、图像、Flash 等。`object` 元素使用 `<param>` 元素来指定资源的属性，例如资源的宽度、高度、背景颜色等。

示例：

```html
<object data="资源 URL" type="资源类型">
  <param name="属性名" value="属性值">
  ...
</object>
```

`object` 和 `embed` 元素的具体区别：

|属性|`object`|`embed`|
|---|---|---|
|参数|使用 `<param>` 元素|使用 `type` 属性|
|资源类型|任何类型|特定类型|
|插件|需要|不需要|
|功能|丰富|基本|

> [!小结]
> - 如果您需要嵌入任何类型的资源，并且浏览器支持特定的插件，则可以使用 `object` 元素。
> - 如果您只需要嵌入特定类型的资源，并且不需要浏览器支持特定的插件，则可以使用 `embed` 元素。
> - 如果您只需要嵌入视频或音频资源，则建议使用 `<video>` 或 `<audio>` 元素。
> - `<video>` 和 `<audio>` 元素不需要浏览器支持特定的插件，并且提供了更丰富的功能。

***
### 框架
`<iframe>` 元素是 HTML 中用于在一个文档中嵌套另一个文档的标签。它允许将一个文档嵌套到另一个文档中，并在其中显示被嵌套文档的内容。这通常用于嵌入其他网页、嵌入视频、地图等内容。

`<iframe>` 元素具有以下属性：

- **src** 属性定义要嵌入的网页或文档的 URL。
- **width** 属性定义 `<iframe> `元素的宽度。
- **height** 属性定义 `<iframe>` 元素的高度。
- **frameborder** 属性定义 `<iframe>` 元素的边框是否可见。
- **border** 属性定义 `<iframe>` 元素的边框宽度。
- **framespacing** 属性定义 `<iframe>` 元素与其周围内容之间的间距。
- **marginwidth** 属性定义 `<iframe>` 元素的左和右边距。
- **marginheight** 属性定义 `<iframe>` 元素的上和下边距。
- **scrolling** 属性定义 `<iframe>` 元素是否允许滚动。
- **name** 属性定义 `<iframe>` 元素的名称。
- **id** 属性定义 `<iframe>` 元素的 ID。
- **class** 属性定义 `<iframe>` 元素的类。

示例：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML iframe 元素</title>
</head>
<body>
  <iframe src="https://www.zhaojian.net">
    <p>这是一个显示 zhaojian.net 网站内容的 iframe。</p>
  </iframe>
</body>
</html>
```

效果：

![示例效果](/uploads/2024/01/20231218222701.png)