博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
多媒体标签
阅读量:5049 次
发布时间:2019-06-12

本文共 2046 字,大约阅读时间需要 6 分钟。

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

video标签的第二中格式存在的意义就是为了解决浏览器适配问题

video元素支持三种视频格式,我们可以把这三种格式都通过source标签指定给video标签,那么以后当浏览器播放视频时它就会从这三种选择一种自己支持的格式来播放

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

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

格式:

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

五、详情和概要标签

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

六、marquee标签

  • 什么时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;">

 
 
 
 

转载于:https://www.cnblogs.com/8-y-m-l/p/10547692.html

你可能感兴趣的文章
proc文件系统的简介
查看>>
连续自然数和
查看>>
[SDOI2015]星际战争
查看>>
用好lua+unity,让性能飞起来——luajit集成篇/平台相关篇
查看>>
JS控制页面跳转
查看>>
递归与循环的区别
查看>>
【USACO】Watering Hole 2008 Oct
查看>>
动态链接的步骤
查看>>
emacs 缩写词功能
查看>>
Api demo源码学习(2)--App/Activity/Custom Dialog --自定义Activity样式
查看>>
Velocity脚本简明教程
查看>>
虚拟机类加载机制
查看>>
RTSP流媒体数据传输的两种方式(TCP和UDP)
查看>>
大数n!
查看>>
TreeView控件使用总结
查看>>
PowerDesigner 生成的脚本取掉双引号
查看>>
改进卷积神经网络,你需要这14种设计模式
查看>>
Swap Nodes in Pairs
查看>>
js中数组以及for循环的使用
查看>>
「风格」与「设计」by杰夫·齐曼(Jeffrey Zeldman)
查看>>