📅  最后修改于: 2023-12-03 15:15:43.568000             🧑  作者: Mango
HTML5 是最新版本的 HTML(Hypertext Markup Language),它引入了许多新的媒体元素标签,使开发者可以更方便地在网页中嵌入各种类型的媒体内容。下面是 HTML5 中一些常见的媒体元素标签:
<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 中常见的媒体元素标签,它们让开发者能够更灵活地在网页中嵌入各种媒体内容,丰富了用户的浏览体验。