html笔记（九）关于媒体文件的一些标签

媒体

1、img标签：

使用标签定义 HTML 页面中的图像。标签有两个必需的属性：src和alt。
定义图像的语法是：

<img src="url" alt="some_text"> 

属性：

• src值为图像的URL地址。

• alt是图片加载不出来时显示的内容。

• img和input一样都是行内块元素：height/width/padding/margin均可用。

• ismap将图像规定为服务器端图像映射（可点击的区域的图像）。点击后以url查询字符串形式发送到服务端

• usemap将图像定义为客户端图像映射和map属性的name和id属性相关联，建立联系。

2、map标签

map和area标签一起使用来达到一个定义图像映射某块区域的效果
例子：

<img src="URL" width="" height="" alt="提示字" usemap="#map-name"> 
<map name="map-name"> 
  <area shape="rect"  coords="x,x,x,x"  alt=" "  href="URL"> 
  <area shape="circle"  coords="x,x,x"  alt=" "  href="URL"> 
</map>

3、area标签

area将图像映射划分为可点击的一块一块的区域，来执行一些操作；area标签必须嵌套在map标签中才能生效。
属性：

• shape:规定区域的形状。default（全部区域）|rect|circle|poly（自定义多边形）
• coords（coordinate坐标）：规定坐标的X,Y轴，和shape配合使用。
  当shape为rect时参数（x,x,x,x）表示矩形区域的左上角和右下角坐标；
  当shape为circle时参数（x,x,x）表示圆的中心点和半径。
  当shape为poly时参数就表示多边形的各个点的坐标。
• href：表示可点击区域的URL
• target：在何处打开目标URL。

4、object标签

在HTML中嵌入对象（例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器）。如果浏览器未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，可以嵌套多个 object 元素来每个对应一个浏览器。
object具有的属性：data，type，height，width，usemap，name，form

• data：规定使用对象的URL
• type：规定被嵌入内容的MIME类型
• usemap：使用客户端对应的图像映像名称
• form：规定对象所属的1-n个表单，值为form表单的id，用逗号隔开。

例子：

  <object width="400" height="50" data="URL" usemap=”#mapname”>
              不支持object时显示的代码或文字
  </object>

5、param标签（parameter参数/参量的意思）

包含它的 <object> 标签和 <applet> 标签定义参数
属性：name、value

• name：定义参数名称（在脚本中使用）。
• value：用来描述name定义的参数的值。

例子：

<object data=URL>
            <param name="autoplay" value="true">
 </object>

6、embed标签

定义了一个容器，在HTML中嵌入对象（h5新标签）
具有的属性：height，width，src，type。

7、audio标签

用来添加音频的
属性：

• src：为音频的URL。
• autoplay：自动播放。
• control：显示音频控件。
• loop：让音频循环播放。
• muted：让音频为静音播放。
• preload：页面加载时，音频被如何加载。值为：
• auto 当页面加载后载入整个音频
• metadata 当页面加载后只载入元数据
• none 当页面加载后不载入音频

例子：

   <audio src=URL autoplay  control  loop  muthed  preload=”auto”> </audio>

8、video标签

属性与audio一样，多了poster、width和height属性。
* poster属性规定了视频下载时显示的图片，直到视频被播放。
例子：

  <video src=URL  autoplay  control  loop  muthed  preload=”auto” poster=URL> </video>

9、source标签

给picture、audio或video标签指定一个或者多个的媒体资源。
属性：

• media：规定媒体类型，以供下载。
• src：URL。
• type：规定载入资源的类型

例子：

  <audio controls> 
       <source  src=URL  type="audio/文件类型">
       <source  src=URL  type="audio/文件类型"> 
       你的破浏览器不支持audio标签
  </audio>

10、track标签（兼容性不好）
规定字幕文件（.vvt）；作为audio和video的子标签，指定定时外部文本轨道。

属性：

• src：URL。
• default：规定使用轨道为默认轨道；没有使用该属性的话可选择其他轨道。
• lable：规定轨道的标题。选择轨道时该标题会出来。
• kind：规定轨道的文本类型。值为
  captions:定义将在播放器中显示的简短说明。
  chapters:定义章节，用于导航媒介资源。
  descriptions:定义描述，假如内容不可播放或不可见，可通过音频描述媒介的内容。
  metadata:定义脚本使用的内容。
  subtitles:定义字幕，在视频中显示字幕。
• srclang：定义轨道使用的语言。值为语言代码。当king的值为subtitles时该属性为必须值。

例子

<video width="100" height="100" controls>
    <source src=url  type="video/mp4">
    <source src=url  type="video/ogg">
    <track src=url(为.vvt文件)  kind="subtitles" srclang="en" label="English">
</video>