📜  HTML5 引入了哪些媒体元素标签?(1)

📅  最后修改于: 2023-12-03 15:15:43.568000             🧑  作者: Mango

HTML5 引入了哪些媒体元素标签?

HTML5 是最新版本的 HTML(Hypertext Markup Language),它引入了许多新的媒体元素标签,使开发者可以更方便地在网页中嵌入各种类型的媒体内容。下面是 HTML5 中一些常见的媒体元素标签:

1. <audio>

<audio> 标签用于在网页中播放音频内容。可以通过 src 属性指定音频文件的 URL,也可以直接嵌入音频内容。该标签支持多种音频格式,如 MP3、WAV、OGG 等。

示例代码:

```html
<audio src="audio.mp3" controls></audio>

## 2. `<video>`

`<video>` 标签用于在网页中播放视频内容。同样,可以通过 `src` 属性指定视频文件的 URL,或直接嵌入视频内容。该标签支持多种视频格式,如 MP4、WebM、Ogg 等。

示例代码:

```markdown
```html
<video src="video.mp4" controls></video>

## 3. `<source>`

`<source>` 标签通常与 `<audio>` 或 `<video>` 标签配合使用,用于指定媒体文件的来源。可以为一个媒体元素提供多个 `<source>` 标签,浏览器会自动选择支持的格式进行播放。

示例代码:

```markdown
```html
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

## 4. `<track>`

`<track>` 标签用于为音频或视频添加字幕或描述性文本轨道。该标签通常与 `<audio>` 或 `<video>` 标签配合使用。

示例代码:

```markdown
```html
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English">
</video>

## 5. `<canvas>`

`<canvas>` 标签用于在网页中绘制图形、动画或视频。它提供了一个画布,开发者可以使用 JavaScript 脚本来绘制图形或处理像素数据。

示例代码:

```markdown
```html
<canvas id="myCanvas"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  // 在画布上绘制图形...
</script>

## 6. `<embed>`

`<embed>` 标签用于嵌入外部媒体内容,如 Flash 动画、音频或视频。可以通过 `src` 属性指定媒体文件的 URL。

示例代码:

```markdown
```html
<embed src="flash.swf" height="300" width="400">

这些是 HTML5 中常见的媒体元素标签,它们让开发者能够更灵活地在网页中嵌入各种媒体内容,丰富了用户的浏览体验。