图片与多媒体

地址(在其后面加上需要查找的元素):https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/

hr元素

无语义

主要用于分割线

meta元素

用于搜索引擎优化(SEO)

link元素

连接外部元素

rel属性:relation,链接资源和当前网页的关系

type属性:链接的资源的MIME类型

图标

放在根目录下,设置文件名favicon.icon,同样会把图标显示

图片和多媒体

map元素

map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档。

因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,usemap属性接收二者之一的值,所以通常name和id属性二者都写,值相同),并配合area标签进行使用。

与 area 属性一起使用来定义一个图像映射(一个可点击的链接区域).

属性:
name属性 给map一个名字用来查询,这个属性是必须的,值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同,如果id属性也被添加,name属性和id属性的值必须相同。

area元素

规范要求有尾部的斜线: <'area />.

在图片上定义一个热点区域,可以关联一个超链接。area元素仅在元素内部使用。

属性:

alt
在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择(译者注:就是字和图片表达一个意思)。在HTML4中, 这个属性时必需的, 但是可以是一个空的串("")。
在HTML5中, 这个属性只有在href 属性被使用的时候才是必需的。

coords
给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。
         对于矩形或长方形, 这个coords 值为两个X,Y对:左上、右下。 
         对于圆形, 这个值是 x,y,r ,这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。
         对于多边和多边形,这个值是用x,y对表示的多边形的每一个点:x1,y1,x2,y2,x3,y3,等等。
         HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.

download HTML5
这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。请查看 获得关于 download属性的完整描述。

href
area的超链接, 值为一个URL. HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要.

hreflang HTML5
指明链接资源的语言类型, 值的范围参考BCP47. 这个属性只能在指明href属性之

media HTML5
指明链接资源的媒体类型,例:print and screen。如果此属性省略,默认全部。仅在href属性存在情况下使用。

rel HTML5
对于包含href属性的锚,该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系,默认的关系是无效的。只有当href属性是presen时才使用该属性
shape
相关联的热点的形状。HTML 5和HTML 4的规范定义了值
      rect,它定义了一个矩形区域;
      circle,它定义了一个圆形区域;
      poly,它定义了一个多边形;
    默认情况下( default),这表示整个区域超出了任何定义的形状。
      许多浏览器,特别是Internet Explorer 4和更高版本,支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。

target
本属性指明了在什么地方显示链接的资源. HTML4里, 这个值是一个frame的链接或者关键字. HTML5里, 它是一个浏览器上下文(比如: 标签, 窗口或者内嵌的frame)的链接或者关键字. 值的含义:
           (1)_blank:在新窗口打开被链接的文档
           (2)_self:默认,在相同框架中打开被链接的文档
           (3)_parent:在父框架集中打开被链接的文档
           (4)_top:在整个窗口中打开被链接文档
        (5)framename:在指定框架中打开被链接文档
       _self: 在当前区域加载链接指向的资源. 这个是默认值.
       _blank: 在新的未命名的窗口或者tab里加载超链接资源.
       _parent: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和_self一样.
        _top: HTML4里: 将响应加载到完整的原始窗口中,取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说,浏览上下文是当前版本的祖先,并且没有父类)。如果没有父类,这个选项的行为方式与self相同
     本属性只能在指明href属性之后使用.

type
该属性指定了用于链接目标的MIME类型的媒体类型。这是严格的咨询信息;然而,在未来,浏览器可能会为多媒体类型添加一个小图标。例如,当类型设置为音频/wav时,浏览器可能会添加一个小的扬声器图标。
公认的MIME类型的完整列表,请参阅http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当href属性存在时才使用该属性。

video元素

于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 video 标签用于音频内容,但是 audio 元素可能在用户体验上更合适。source与src链接资源

在使用autoplay时,又使用controls,autoplay要放在controls前边,否则会被覆盖

muted(静音)不能与controls共存

属性:

autoplay
布尔属性;指定后,视频会马上自动开始播放,不会停下来等着数据载入结束。

autobuffer ——基本没用,知道就行
布尔属性;指定后,视频会自动开始缓存,即使没有设置自动播放。
该属性适用于视频被认为可能会播放(比如,用户导航到专门播放视频的页面,而不是那种嵌入视频还有其它内容的页面)。
视频会一直缓存到媒体缓存满。
实现备注: 虽然是HTML5规范的早期草案的一部分, autobuffer 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性,而且有些浏览器中从未实现。
规范定义了一个新的枚举属性, preload, 用不同的语法来取代 autobuffer 属性。 

buffered
这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。

controls
加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

controlslist 
当浏览器显示自己的控件集(例如,当指定了Controls属性时),Controlslist属性将帮助浏览器选择在媒体元素上显示的控件。

          允许接受的value有nodownload,nofullscreen和noremoteplayback

           如果要禁用图片模式(和控件),请使用disablePictureInPicture属性。

crossorigin
该枚举属性指明抓取相关图片是否必须用到CORS(跨域资源共享)。 支持CORS的资源 可在  元素中被重用,而不会被污染。允许的值如下:
        anonymous
         跨域请求(即,使用 Origin: 的HTTP头)会被执行。但是不发送凭证(即,不发送cookie, X.509 证书或者 HTTP Basic 授权)。
         如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin: HTTP头),图片会被 污染 并且它的使用会受限。
        use-credentials
         跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行,且凭证会被发送 (即, 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。
         如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP 头),图像会被 污染 且它的使用会受限。
      不加这个属性时,抓取资源不会走CORS请求(即,不会发送 Origin: HTTP 头),保证其在 canvas 元素中使用时不会被污染。
      如果指定非法值,会被当作指定了枚举关键字 anonymous 一样使用。 查看 CORS 设置属性 获取更多信息。
currentTime
读取CurentTime返回一个双精度浮点值,指示以秒为单位的媒体的当前播放位置。
如果video尚未开始播放,则会在开始播放后返回偏移量。
通过CurentTime将当前播放位置设置为给定时间,会在加载媒体时将媒体查找到该位置(从指定的位置开始播放)。

     媒体正在播放的情况下,如果媒体缓冲区的数据已经过期(视频已经播放完),则 user agent有可能无法正常拿到数据。
     有些媒体可能有一个不以0秒开始的媒体时间线(不是从头开始播放的),因此应该将currentTime的时间设置在其数据失效之前。
     getStartDate() 这个方法可以用来确定媒体时间线起始的坐标。

disablePictureInPicture 
防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。

disableRemotePlayback 
一个布尔属性,用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。无线技术(Miracast、Chromecast、DLNA、AirPlay等)。
         在Safari中,您可以使用x-webkit-airplay=“deny”作为后盾。

duration 只读
一个双精度浮点值,它指示媒体的持续时间(总长度),以秒为单位,在媒体的时间线上。
      如果元素上没有媒体,或者媒体无效,则返回的值为NaN。
      如果媒体没有已知终点(例如时间未知的实时流、网络广播、来自WebRTC的媒体等等),那么这个值就是Infinity。

height
视频展示区域的高度,单位是CSS像素。

intrinsicsize 
这个属性告诉浏览器忽略图像的实际内在大小,并假装它是属性中指定的大小。
            具体来说,图像将在这些维度上展开,图像上的naturalWidth/naturalHeight 将返回此属性中指定的值。

loop
布尔属性;指定后,会在视频结尾的地方,自动返回视频开始的地方。

muted
布尔属性,指明了视频里的音频的默认设置。设置后,音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。

playsinline
一个布尔属性,标志视频将被“inline”播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的。

played
一个 TimeRanges 对象,指明了视频已经播放的所有范围。

preload
该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一:
           none: 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;换句话说就是提示浏览器该视频不需要缓存。
          metadata: 提示尽管作者认为用户不需要查看该视频,不过抓取元数据(比如:长度)还是很合理的。
          auto: 用户需要这个视频优先加载;换句话说就是提示:如果需要的话,可以下载整个视频,即使用户并不一定会用它。
         空字符串:也就代指 auto 值。
         
           假如不设置,默认值就是浏览器定义的了 (即,不同浏览器会选择自己的默认值),即使规范建议设置为 metadata。

    使用备注:
    autoplay 属性优先于 preload 
    假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。
           规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。

poster
一个海报帧的URL,用于在用户播放或者跳帧之前展示。如果属性未指定,那么在第一帧可用之前什么都不会展示;之后第一帧就像海报帧一样展示。

src
要嵌到页面的视频的URL。可选;你也可以使用video块内的  元素来指定需要嵌到页面的视频。

width
视频显示区域的宽度,单位是CSS像素。
时间偏移量目前是指定为float类型的值,表示偏移的秒数。

备注: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。

audio元素

用于在文档中表示音频内容。 audio 元素可以包含多个音频资源, 这些音频资源可以使用 src 属性或者 source 元素来进行描述

使用


    

如果元素包含 src 属性:零个或多个 track 元素,其后紧跟不包含 audio 或者 video媒体元素的透明内容。
或者:零个或多个 source 元素,其后紧跟零个或多个 track 元素,其后紧跟不包含 audio 或者 video媒体元素的透明内容。

属性(与vidio一样):

mozCurrentSampleOffset 
在音频播放时,表示相对于音频开始处的偏移量的一个数值。

autoplay

autobuffer 已废弃 

buffered

controls

loop

muted

played

preload
       
src

volume
音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).
时间偏移量目前是指定为float类型的值,表示偏移的秒数。

备注: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。

track元素

空元素

被当作媒体元素—audio 和 video的子元素来使用。它允许指定计时字幕(或者基于时间的数据),例如自动处理字幕。

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

属性;

default
该属性定义了该track应该启用,除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 track 元素可以有这个属性。

kind
定义了 text track 应该如何使用。如果省略了该属性,默认的 kind 值就是 subtitles。下面是允许的关键字:
     subtitles
      字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
      字幕可能包含额外的内容,通常有附加的背景信息。比如在电影星球大战开头的文字,或者某个场景的日期,时间,还有地点。
     captions
      隐藏式字幕提供了音频的转录甚至是翻译。
      可能包含重要的非言语的信息,比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
      适用于耳聋的用户或者当调成静音的时候。
     descriptions
      视频内容的文本描述。
      适用于失明用户或者当视频不可见的场景。
     chapters
      章节标题用于用户浏览媒体资源的时候。
     metadata
      脚本使用的track。 对用户不可见。
      
label
当列出可用的text tracks时,给浏览器使用的text track的标题,这种标题是用户可读的。

src
track的地址。必须是合法的URL。该属性必须定义。

srclang
track文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles, 那么srclang 必须定义。

img元素

代表文档中的一个图像。

属性

title:hover时显示文本 

align 已废弃 HTML4.01, 已废弃 HTML5 一般使用 vertical-align CSS 属性
图像相对于它周围上下文的对齐。

alt
这个属性定义了描述图像的替换文本。用户将看到这个显示,如果图像的URL是错误的,该图像不在 支持的格式 列表中,或者如果图像还没有被下载。
使用说明: 省略这个属性表明该图像是内容的关键部分,但没有等效的文本可用。把这个属性设置为空字符串,表明该图像不是内容的关键部分,非可视化浏览器在渲染的时候可能会忽略它。

border 已废弃 HTML4.01, 已废弃 HTML5
图像周围的边框宽度。

crossorigin HTML5
这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用CORS的图像 在  元素中可以重复使用而不会被污染。允许的值有:
          anonymous
            执行一个跨域的请求(比如,有 Origin: HTTP header)。但是没有发送证书(比如,没有 cookie,没有 X.509 证书,没有 HTTP 基本的授权认证)。
            如果服务器没有给源站证书(没有设置 Access-Control-Allow-Origin: HTTP头),图像会被污染而且它的使用会被限制。
          use-credentials
            一个有证书的跨域请求(比如,有 Origin: HTTP header)被发送 (比如,a cookie, a certificate, and HTTP Basic authentication is performed)。
            如果服务器没有给源站发送证书(通过 Access-Control-Allow-Credentials: HTTP header),图像将会被污染,且它的使用会受限制。
      当用户并未显式使用本属性时,默认不使用 CORS 发起请求(例如,不会向服务器发送 HTTP 头部信息),用以防止其在中的使用。
      如果无效,默认当做anonymous关键字生效。更多信息,请查看 CORS 属性设置 。
      
height
图像的高度,在 HTML5 中的单位是 CSS 像素,在 HTML 4 中可以是像素也可以是百分比。width/height只指定一个值,则另一个会根据原始图像进行赋值

width
图像的宽度,在 HTML5 中单位是 CSS 像素, 在 HTML 4 中可以是像素也可以是百分比。

hspace 已废弃 HTML4.01, 已废弃 HTML5
插入到图像的左侧和右侧的空白像素的值。

ismap
这个布尔属性表示图像是否是服务器端map的一部分。如果是, 那么点击的精准坐标将会被发送到服务器。
     使用说明:只有在 元素是一个拥有有效 href 属性的  元素的后代元素的情况下,这个属性才会被允许使用。

longdesc
URL 描述要显示图像的URL描述,是对 alt 文本的补充。

name 已废弃 HTML4.01, 已废弃 HTML5
元素的名字。在 HTML 4 只向后兼容。 使用 id 属性替代。

sizes HTML5
表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括:
1.一个媒体条件。最后一项一定是被忽略的。
2. 一个资源尺寸的值。
      资源尺寸的值被用来指定图像的预期尺寸。当srcset使用 'w' 描述符时,用户代理使用当前图像大小来选择srcset中合适的一个图像URL。
      被选中的尺寸影响图像的显示大小(如果没有CSS样式被应用的话)。如果没有设置srcset属性,或者没值,那么sizes属性也将不起作用。

src
图像的 URL,这个属性对  元素来说是必需的。在支持 srcset 的浏览器中,src 被当做拥有一个像素密度的描述符 1x 的候选图像处理,
除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 'w' 描述符中定义了.

srcset         HTML5
以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成:
    1. 一个图像的 URL。
    2.可选的,空格后跟以下的其一:
         一个宽度描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度除以sizes属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和x描述符等价的值。
          一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。
   如果没有指定源描述符,那它会被指定为默认的 1x。

   在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时,会导致该值无效。重复的描述符(比如,两个源 在相同的srcset两个源都是 '2x')也是无效的。

   浏览器选择在给出的时间点显示大部分 adequate 图片。

usemap
与元素相关联的的 image map 的部分 URL(以 '#' 开始的部分)。
     使用说明: 如果  元素是 

来源MDN

你可能感兴趣的:(图片与多媒体)