HTML 媒体标签

<img>

标签定义及使用说明

• <img> 标签定义 HTML 页面中的图像。
• <img> 标签有两个必需的属性：src 和 alt
• 注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上，<img> 标签的作用是为被引用的图像创建占位符。
• 提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。

属性

属性	值	描述
alt	text	规定图像的替代文本，
crossorigin	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度，
ismap	ismap	将图像规定为服务器端图像映射，
src	URL	规定显示图像的 URL,
usemap	#mapname	将图像定义为客户器端图像映射，
width	pixels	规定图像的宽度，

<map>

标签定义及使用说明

• <map> 标签用于客户端图像映射，图像映射指带有可点击区域的一幅图像。
• <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
• area 元素永远嵌套在 map 元素内部，area 元素可定义图像映射中的区域。

属性

属性	值	描述
name	mapname	必需，为 image-map 规定的名称，

<area>

标签定义及使用说明

• <area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）
• <area> 元素始终嵌套在 <map> 标签内部。
• 注释:<img>标签中的 usemap 属性与 <map>元素中的 name 相关联，以创建图像与映射之间的关系。

属性

属性	值	描述
alt	text	规定区域的替代文本，如果使用 href 属性，则该属性是必需的，
coords	coordinates	规定区域的坐标，
href	URL	规定区域的目标 URL,
hreflang	language_code	规定目标 URL 的语言，
media	media query	规定目标 URL 是为何种媒介/设备优化的，默认：all,
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系，
shape	default rect circle poly	规定区域的形状，
target	_blank _parent _self _top framename	规定在何处打开目标 URL,
type	MIME_type	规定目标 URL 的 MIME 类型，注：MIME = Multipurpose Internet Mail Extensions,

<canvas>

标签定义及使用说明

• <canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）
• <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

提示和注释

• 注释:<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。
• 提示：如想了解 canvas 对象的所有属性和方法，请参阅HTML 画布参考手册

属性

属性	值	描述
height	pixels	规定画布的高度，
width	pixels	规定画布的宽度，

<figure>

标签定义及使用说明

• <figure> 标签规定独立的流内容（图像，图表，照片，代码等等）
• <figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响。

<figcaption>

标签定义及使用说明

• <figcaption> 标签为 <figure>元素定义标题。
• <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

实例

使用 <figure> 元素标记文档中的一个图像，<figure> 元素带有一个标题：

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

<audio>

标签定义及使用说明

• <audio> 标签定义声音，比如音乐或其他音频流。
• 目前，<audio> 元素支持的3种文件格式：MP3,Wav,Ogg

提示和注释

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放，
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）,
loop	loop	如果出现该属性，则每当音频结束时重新开始播放，
muted	muted	如果出现该属性，则音频输出为静音，
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载，
src	URL	规定音频文件的 URL,

<video>

标签定义及使用说明

• <video> 标签定义视频，比如电影片段或其他视频流。
• 目前，<video> 元素支持三种视频格式：MP4,WebM,Ogg

音频格式的 MIME 类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

提示和注释

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

可选属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放，
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮，
height	pixels	设置视频播放器的高度，
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放，
muted	muted	如果出现该属性，视频的音频输出为静音，
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮，
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 “autoplay”，则忽略该属性，
src	URL	要播放的视频的 URL,
width	pixels	设置视频播放器的宽度，

<source>

标签定义及使用说明

• <source> 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源。
• <source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

属性

属性	值	描述
media	media_query	规定媒体资源的类型，供浏览器决定是否下载，
src	URL	规定媒体文件的 URL,
type	MIME_type	规定媒体资源的 MIME 类型，

实例

带有两个源文件的音频播放器，浏览器需要选择它所支持的源文件（如果都支持则任选一个）:

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<track>

标签定义及使用说明

• <track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道。
• 这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。

可选的属性

属性	值	描述
default	default	规定该轨道是默认的，如果用户没有选择任何轨道，则使用默认轨道，
kind	captions chapters descriptions metadata subtitles	规定文本轨道的文本类型，
label	text	规定文本轨道的标签和标题，
src	URL	必需的，规定轨道文件的 URL,
srclang	language_code	规定轨道文本数据的语言，如果 kind 属性值是 “subtitles”，则该属性是必需的，

实例

带有两个字幕轨道的视频：

<video width="320" height="240" controls>
    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
    label="English">
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
    label="Norwegian">
</video>