HTML教程 #13：图像标签（img）和视频标签（video）的使用方法

2023-06-30

摘要: 当在 HTML 网页中嵌入图像和视频时，可以使用 `img` 标签和 `video` 标签来完成。下面是这两个标签的使用方法：1. `img` 标签（嵌入图像）： - 使用 `img` 标签可以将图像嵌入到网页中。 - 使用 `src` 属性指定图像 ...

当在 HTML 网页中嵌入图像和视频时，可以使用 `<img>` 标签和 `<video>` 标签来完成。下面是这两个标签的使用方法：

1. `<img>` 标签（嵌入图像）：

- 使用 `<img>` 标签可以将图像嵌入到网页中。

- 使用 `src` 属性指定图像文件的路径。

- 使用 `alt` 属性提供图像的替代文本，以便在图像无法加载时显示描述信息。

- 使用 `width` 和 `height` 属性可以指定图像的宽度和高度（以像素为单位），但这些属性是可选的。

- 示例：

<img src="path/to/image.jpg" alt="图像描述" width="300" height="200">

2. `<video>` 标签（嵌入视频）：

- 使用 `<video>` 标签可以将视频嵌入到网页中。

- 使用 `src` 属性指定视频文件的路径。

- 使用 `controls` 属性可以显示视频播放控件，例如播放按钮、音量控制等。

- 使用 `width` 和 `height` 属性可以指定视频播放器的宽度和高度（以像素为单位）。

- 示例：

<video src="path/to/video.mp4" controls width="640" height="360"></video>

如果需要支持不同的浏览器和视频格式，可以在 `<video>` 标签中添加多个 `<source>` 标签，每个 `<source>` 标签指定不同格式的视频文件。浏览器将根据支持的格式选择合适的视频进行播放。

示例：

<video controls width="640" height="360">
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.webm" type="video/webm">
  <source src="path/to/video.ogv" type="video/ogg">
</video>

这些是 `<img>` 标签和 `<video>` 标签的基本使用方法。你可以根据需要调整图像和视频的路径、尺寸和其他属性，以满足具体的设计要求。

查看全文

上一篇：HTML教程 #12：嵌入图像和视频到HTML网页中下一篇：HTML教程 #14：学习如何设置图像和视频的属性和样式

HTML教程 #13：图像标签（img）和视频标签（video）的使用方法

1. `<img>` 标签（嵌入图像）：

2. `<video>` 标签（嵌入视频）：

相关阅读

热门文章