学习笔记-多媒体标签

2018-12-16 本文已影响8人香泡泡

html5中新增的标签（一共30个）

video标签

作用：播放视频

格式1:

格式2:

</video>

属性：

src：视频播放的地址。（src="images/1.webm")

autoplay：自动播放。 (autoplay="autoplay")

controls：控制是否需要显示控制条。(controls="controls")

poster：控制视频未播放前的占位图片。（poster="images/1.jpg"）

loop：控制视频循环播放，一般用来做广告视频。(loop =“loop”)

preload：预加载视频，与autoplay属性冲突。(preload="preload")

muted：静音。(muted="muted")

width/height：和img标签一样，一般只设置其中一个。(width/height="10px")

格式2的存在意义：

五大浏览商都不愿意支持别人的视频格式，主要用于解决浏览器适配问题，video元素支持三种视频格式，我们可以把这三种视频格式都通过source标签指定给video标签，当浏览器播放视频时，他就会从这三种中选择一种自己支持的格式来播放。

注意点：

1.浏览器必须支持html5为大前提。

2.过去的一些浏览器是不支持html5标签的，我们可以通过一个js的框架：html5media来实现。

audio标签

作用：播放音频

格式1:

格式2:

</audio>

属性：

src：视频播放的地址（src="images/1.webm")

autoplay：自动播放(autoplay="autoplay")

controls：控制是否需要显示控制条。(controls="controls")

loop：控制视频循环播放，一般用来做广告视频。(loop =“loop”)

preload：预加载视频，与autoplay属性冲突。(preload="preload")

muted：静音。(muted="muted")

详情和概要标签

作用：

利用summary来描述概要信息，利用details标签来描述详情信息，默认情况下是折叠展示，想看详情必须点击。

格式：

<summary>概要信息

详情信息

</details>

marquee标签

作用：跑马灯弹幕

格式：

注意点：

该标签不是w3c推荐的标签，但是各大浏览器对这个标签支持非常好。

属性：

direction:控制滚动条的滚动方向，默认方向为left。（direction=“left/right/up/down”）

scorllamount:控制滚动条滚动的速度，数值越大，滚动速度越快。（scorllamount=“1/2/3...”）

loop:控制滚动条滚动的次数，默认值为-1.无限次。（loop=“1/2/3...”）

behavior:控制滚动类型。（behavior=“slide”滚动到边界停止，behavior=“alternate”滚动到边界弹回）

滚动图片：

</marquee>

</marquee>

html 中被废弃的标签

被废弃标签：只表示样式而无语义

：换行

<hr> ：分割线

：文字样式

：加粗文字

：增加文字下划线

：斜体文字

<s>：给文字加下删除线

取代标签：有语义

:定义重要性强调的文字。

<ins>:定义插入的文字。

:定义强调的文字。

<del>：定义被删除的文字。<s>

注意点：

在企业开发中，不到万不得已，不要使用这些被废弃的标签，如果一定要使用，一般情况下都是用来作为css的钩子使用。

字符实体

定义：

在html中，有的字符是被html保留的，有些是有在html中有特殊含义的，是不能在这些浏览器中直接显示出来的，那么这些东西想显示出来就必须通过字符实体。

&nbsp:表示一个空格

&lt；:表示小于符号<（less than)

&gt；:表示大于符号>(more than)

&copy；:表示版权符号。

其他可html5文档中查看。

学习笔记-多媒体标签

html5中新增的标签（一共30个）

猜你喜欢

热点阅读