Articles
HTML简介
媒体相关标签

媒体相关标签

本文解释了媒体相关的标签。

解释如何在HTML中描述图像、视频、音频等，以及可折叠元素和内联框架。

YouTube Video

媒体相关标签

<img> 标签

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • <img> 标签用于嵌入图像。src 属性指定图像路径，alt 属性在图像无法显示时提供描述。

<figure> 和 <figcaption> 标签

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • <figure> 标签用于将图像或插图等媒体内容与使用 <figcaption> 标签的标题组合在一起。

<picture> 标签

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • <picture> 标签用于支持响应式图像，根据不同的显示条件选择合适的图像。

  • media 属性以与 CSS 媒体查询相同的格式指定条件。

    • 您可以指定条件，例如最小宽度 (min-width)、最大宽度 (max-width) 或屏幕方向 (orientation)。

  • 在此示例中，根据屏幕宽度显示以下图像。

    • 如果屏幕宽度为 800 像素或更大，则显示 large.jpg。
    • 如果屏幕宽度为 400 像素或更大但小于 800 像素，则显示 medium.jpg。
    • 如果屏幕宽度小于 400 像素，则显示 small.jpg（<img> 标签中的图像）。

<canvas> 标签 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • <canvas> 标签提供了一个区域，可以使用 JavaScript 绘制动态图形。

<map> 标签

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • <map> 标签用于定义一个图像地图。图像地图中的可点击区域用 <area> 标签定义。这允许图像的特定部分可以点击，指向一个链接。
  • 在 <img> 标签的 usemap 属性中，以 # 为前缀指定关联地图元素 (<map> 标签) 的名称。
  • 通过适当地指定 <area> 标签的 alt 属性，可以提高视障用户的可访问性。

<embed> 标签 

1<embed src="movie.mp4" width="300" height="200">
  • <embed> 标签用于嵌入外部内容，如 PDF、视频或音频。

<video> 标签 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • <video> 标签用于嵌入视频内容。你可以使用 <source> 标签指定多种格式。
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • preload 属性允许您指定浏览器在播放开始前应该加载视频的多少内容。
    • auto 指示浏览器预加载整个媒体文件。它可以减少播放开始时的延迟，但即使用户未播放媒体，数据也可能会被下载。
    • metadata 仅加载媒体的元数据（例如时长、轨道信息）。媒体数据本身在用户启动播放前不会加载。当您需要关于媒体的摘要信息时，此选项非常适合。
    • none 不会预加载媒体文件。媒体文件在播放开始前不会下载资源。当您希望将数据使用量降到最低时，此选项非常适合。

<audio> 标签 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • <audio> 标签用于嵌入音频内容。<source> 标签支持多种格式。
  • 与 <video> 标签类似，preload 属性可以用来指定在播放开始前加载多少音频。

<track> 标签 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • <track> 标签用于指定文本轨道，例如字幕和说明文字。它可以用于 <audio> 或 <video> 标签内。
  • kind 属性允许您指定轨道的用途（例如，字幕、说明文字、章节等）。您可以指定以下值。
    • subtitles 提供字幕，以翻译视频或音频内容，或让观众更容易理解。它的主要目的是直接翻译音频。
    • captions 在音频之外提供额外的信息，例如音乐和音效，供听障人士使用。
    • descriptions 是描述视频视觉内容的轨道，例如动作和场景，适合视障人士。
    • chapters 提供章节标记（章节标题）以指示视频中的具体位置。
    • metadata 提供用于解析或处理媒体的附加信息，但不会显示给用户。

<iframe> 标签 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
与表格相关的标签与表单相关的标签