H5前端开发学习笔记——0x07多媒体标签

2018-07-09 本文已影响0人夜莺之刃

本节内容

课时52 video标签(掌握)
课时53 video标签第二种格式(掌握)
课时54 audio标签(掌握)
课时55 详情和概要标签(理解)
课时56 marquee标签(理解)
课时57 HTML中被废弃的标签(掌握)
课时58 字符实体(理解)

video标签

什么是video标签

播放视频用的

格式

    <video src="">
        
    </video>

src:视频地址
aotuplay：自动播放视频
controls：显示控制条
poster：显示占位图片,视频未播放前显示的图片
loop：循环播放。用于做广告视频
preload：预加载视频。在视频播放之前，先给你缓存到本地，它和autoplay冲突，设置其一就会是另一个失效
muted:静音
width:宽度，用法同image标签
height:高度

<body>
    <video src="video/xbd.mp4" controls="controls" poster="pic/xbd.mp4_snapshot_00.00.jpg" loop="loop" width="800px">

    </video>

video标签第二种格式

由于视频数据很重要，浏览器厂商都不愿意支持其他浏览器的格式，so，w3c为了解决这个问题，就推出了这种vidoe格式，解决适配问题
video支持三种视频格式

<body>
    <video>
        <source src="video/xbd.webm" type="video/webm"><br>
        <source src="video/xbd.mp4" type="video/mp4">
    </video>
</body>

注意：虽然第二种可以做好适配，但浏览器必须支持HTML5的video标签才能谈适配问题，否则无法播放，尤其是那些老浏览器，为了让这些老东西也能播放视频，我们可以用js框架来实现：html5media框架

audio标签

作用

播放音频

格式

    <audio src=""></audio>

或者

    <audio>
        <source src="" type="">
        <source src="" type="">
        <source src="" type="">
    </audio>

第二种格式也是和video一样，都是为了做适配

详情和概要标签

作用

利用summary标签来描述概要信息，用details描述详情信息，都是为了利用有限的空间显示更多的东西

格式

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

marquee标签

作用

做跑马灯的效果

格式

    <marquee behavior="" direction="">
        内容
    </marquee>

direction：控制方向
behavior="slide"：滚动到边界就停了
behavior="alternate"：滚到边界就弹回
scrollamount：速度，数值越大速度越快
loop：滚动次数，数值决定滚的次数

注意

他不是一个w3c推荐的标签，但各大浏览器对它支持很好

HTML中被废弃的标签

为何会被废弃

HTML标签就一个作用，那就是添加语义，早起的部分html标签是没有语义的，抑或是修饰样式的，so，被淘汰了

    <!-- 加粗（bold） -->
        <b>我是文字</b>
    <!-- 单下划线(underlined) -->
        <u>我是文字</u>
    <!-- 删除线(strikethrough) -->
        <s>我是文字</s>
    <!-- 斜体(italic) -->
        <i>我是文字</i>
    <!-- 这些都是修饰样式的，所以被扔了 -->

注意点：

不到万不得已，不要使用废弃的标签
如果一定要使用，一般用来作为css的钩子来使用

现在用一下标签代替了那些废弃的标签,他们都是有语义的，这个就是不同点

strong == b
ins == u
em == i
del == s

其中

strong：定义重要性强调的文字
ins：定义插入的文字
em：定义强调的文字，弱于strong
del：定义被删除的文字

    <strong>我是文字</strong>
    <ins>我是文字</ins>
    <em>我是文字</em>
    <del>我是文字</del>

字符实体

在HTML中，对空格、回车、tab不敏感，都当做一个空格处理

在HTML中，有些字符是会被保留的，是有特殊含义的，不会被浏览器直接显示出来的，这些东西要是想显示出来的话，就需要用字符实体解决

比如：

&lt == < (less than)
&gt == > (greater than)
&nbsp == 空格