多媒体标签

Posted 2021-02-13 8-y-m-l

一、video标签

• 作用：播放视频
• video标签属性
  1）src:用于告诉video标签需要播放地视频地址
  2）autoplay：用于告诉video标签是否需要自动播放视频
  3）controls：用于告诉video标签是否需要显示控制条
  4）poster：用来告诉video标签视频没有播放之前显示地占位图片
  5）loop：一般用于做广告视频，用于告诉video标签视频播放完毕后之后是否循环
  5） preload：预加载视频，但是需要注意preload和autoplay相冲，如果设置了autoplay属性，那么preload属性就会失效
  6）muted：静音
  7）width/height：和img一样
  格式：

<video src=""  contros="controls" autoplay=“autoplay”  poster=“images/NJ.jpg”>
<video src="images/sbl.webm" autoplay="autoplay"  loop="loop" muted="muted"></video>//广告时用用户控制不了，一直循环播放

二、video的第二种格式:由于视频数据非常非常的重要，所有五大浏览器厂商都不愿意支持别人的视频格式，所有导致了没有一种视频格式时所有浏览器都支持的，这个时候w3c为了解决这个问题，所有推出了第二个video标签格式

video标签的第二中格式存在的意义就是为了解决浏览器适配问题
video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时它就会从这三种选择一种自己支持的格式来播放

<video src="" autoplay="autoplay">
<source  src="images/sbl.webm"  type="video/webm"></source>
<source  src="images/sbl.mp4" type="video/map4"></source>
<source  src="images/sbl.ogg" type="video/ogg"></source>
 </video>

三、注意点：当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，就是浏览器必须支持html5标签，否则同样无法播放。在刚去的一些浏览器时不支持HTML5标签的，所有为了让过去一些浏览器也能够通过video标签来播放视频，那么我们以后可以通过一个js框架叫html5media来实现

四、音频标签audio:播放音频

格式：

<audio src="images/yinpin.mp3" autoplay="autoplay" controls="controls"></audio>
<audio  autoplay="autoplay" controls="controls">
<source src="images/yinpin.mp3" type="audio/mp3" ></source>
<source  src="images/yinpin.webm" type="audio/webm" ></source>
</audio>

• 注意点：audio标签的使用和video标签的使用基本一样，video中能够使用的属性在Audio标签大部分都能使用，并且功能一样
  只不过有三个属性不能用：height/width/poster

五、详情和概要标签

• 作用:利用summary标签来描述概要信息，利用details标签来描述详情信息 默认情况下时折叠展示，想看见详情必须点击
• 格式：

<details>
<summary>概要信息</summary>
详情信息
</details>

六、marquee标签

• 什么时marquee？
  作用：跑马灯滚动内容 图片和文字都可以
• 格式：

<marquee direction="right/up/down">内容</marquee>
<marquee direction="right/up/down"  scrollamount="数字">内容图片/文字</marquee>
<marquee direction="right/up/down"  scrollamount="数字"  loop="数字">内容</marquee>
<marquee direction="right/up/down"  scrollamount="数字"loop="数字" behavior="solid">内容</marquee>
<marquee direction="right/up/down"  scrollamount="数字"loop="数字" behavior="alternate">内容</marquee>

• 属性：
  1）direction：设置滚动方向left/top/right/down
  2）scrollamount:设置滚动属性,值越大越快
  3)loop:设置滚动次数,默认-1,无限滚动
  4)behavior:设置滚动类型,solide滚动到边界就停止,alternate滚动到边界弹回
• 注意点：marquee标签不是w3c推荐的标签，在w3c官方文档中也无法查询这个标签，但是各大浏览器对这个标签的支持非常好

七 被HTML5废弃的标签

• 1.为什么HTML中有一部分标签会被废弃?
  因为当前的HTML中的标签只有一个作用,就是添加语义而早期的HTML标签中有一部分标签是没有语义的,有一部分标签是用来修改样式的,所以这部分标签被废弃了.
  eg:br/hr/font/b/u/i/s以上这些标签都是没有语义的,都是修改样式的
• 注意;
  以后在企业中,不到万不得已一定不要使用这些废弃掉的标签,如果一定要使用,一般情况下用来作css的钩子来使用

八 新增代替

• strong代替b有语义:定义重要性强调的文字
• ins(insert)代替u语义:定义插入的文字
• em(emphasized强调着重)代替i:定义强调的文字
• del(deleted)代替s:定义被删除的文字

九 字符实体

• 在HTML中对空格/回车/tab不敏感,会把多个空格/回车/tab当做一个空格来处理
• 什么是字符实体?
  在HTML中有的字符是被HTML保留的,有的HTML字符在HTML中是有特殊含义例如h1等的,是不能再浏览器中直接显示出来的,那么这些东西要想显示出来必须通过字符实体

   一个空格
  &lt(less than);小于符号
  &gt(greater than);大于符号
  版权符号©

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

 

 

 

 

来自为知笔记(Wiz)