HTML5学习笔记音视频标签

1.视频标签

1。功能：播放视频

2。视频标签格式1：

<video >
</video>

3。 video标签属性

• src：告诉视频标签要播放的视频的地址
• autoplay：告诉视频标签视频是否应该自动播放
• control：告诉视频标签是否应该显示控制栏
• 海报：告诉视频标签在播放视频之前是否显示占位符图像
• 循环：告诉视频标签播放视频。常用于视频广告
• preload：告诉视频标签预加载视频，但需要注意预加载和自动播放之间的冲突。如果设置了autoplay属性，preload属性将无效
• muted：告诉video标签将视频静音
• 宽度/高度：与img标签完全相同

4。 video标签格式2

<video>
  <source  type=""></source>
  <source  type=""></source>
</video>

• 意思是第二种格式
  • 因为视频数据如此重要，所以五大浏览器厂商拒绝支持别人的视频格式，所以没有一种视频格式是所有浏览器都支持的。这时，为了解决这个问题，W3C推出了第二种视频标签格式
  • 第二种视频标签格式的目的是为了解决浏览器适配的问题。视频元素支持三种视频格式。我们可以通过 source 标签将这三种格式分配给 video 标签，那么当浏览器播放视频时，就会选择三种支持的格式之一来播放
• 注：
  • 虽然现在通过了第二种格式通过video标签可以指定所有浏览器支持的视频格式，但是所有浏览器通过video标签播放视频都有一个前提条件，就是浏览器必须支持HTML5标签，否则无法播放
  • 以前，有些浏览器不支持HTML5标签，所以可以让过去有些浏览器也可以通过video标签来播放视频，所以以后我们可以通过名为html5media的JS框架来实现

代码示例

<video width="200" height="100" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls">
    <!--楚乔传,好像是第4集-->
    <source  >
    <source  />
</video>

2.audio标签

1。功能：播放音频

2。格式：

<audio >
</audio>

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

3。注：

• 音频标签的使用与视频标签的使用基本相同
• 大部分可以在视频中使用的属性都可以在音频标签中使用，并且它们的功能是相同的。
• 除了 3 个属性不能使用外，其余相同，高度/宽度/海报

3. 详细信息和摘要标签

1.功能：

• 使用摘要标签描述摘要信息，使用标签详细信息描述详细信息
• 默认情况下是折叠的。如果您想查看详细信息，请点击

2。格式：

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

3。示例代码

<!--详情和概要标签-->
<details>
    <summary>概要信息</summary>
    这里是详情: 是假的呢举案说法南石道街开发病那都是独守空房技能速度加快非农数据的看法山东矿机第三方看似简单妇女节看电视呢房间看电视开始的减肥纳斯达克今年初vdsfw的看法今年圣诞节开放男
</details>

4。帐篷标签

1。功能：跑马灯效果

2。格式：

内容

3。属性：

• 方向：设置滚动方向左/右/上/下
• 滚动计数：设置滚动速度，值越大，越快
• 循环：设置滚动计数，默认为 - 1，即是否无限滚动
• 行为：设置滚动类型滑块在滚动达到极限时停止，在滚动达到极限时交替弹跳

4 。注：

• marquee标签不是W3C推荐的标签，在W3C官方文档中无法查询到该标签，但各大浏览器都很好地支持该标签

5。示例代码

<!--跑马灯-marquee标签-->
<marquee direction="left" scrollamount="5">跑马灯</marquee>
<marquee direction="right" scrollamount="3">marquee</marquee>
<marquee direction="up" scrollamount="1">标签</marquee>
<marquee direction="down" scrollamount="1">down</marquee>

注：在实际效果中，这三个一直在滚动，但在图片中看不到效果。自己尝试一下吧！

5. HTML 中废弃的标签

由于 HTML 现在只负责语义而不负责样式。不过在HTML的开头，有的标签还包含样式，所以留下这个标签

b、u、i、s 
- 以上标签自己带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
- 原则: 不到万不得已,切记不要使用如上标签. 大家可以到BAT的网站查看源代码, 几乎看不到以上标签

• b（粗体） 功能：使文字加粗
  • 格式：粗体文字字体 u (下划线) 功能：为文字添加斜体线
    • 格式：为文字添加下划线
  • i(斜体) 功能：显示斜体文字效果
    • 格式： 显示斜体文字效果
  • 功能s（删除线）：为文本添加删除线
    • 格式：为文本添加删除线

  为了弥补b、u、i、s标签的不足，W3C推出了添加了一组新的 A 标签。这个标签看起来和显示的buis没有什么区别，但是语义上有明显区别

  • strong 功能：聚焦内容
    • 格式：聚焦内容
  • in (已插入 ) 功能：新插入文字
    • 格式：新插入文字
  • em（强调） 功能：内容强调
    • 格式：内容中的
    • del(删除) 功能：删除文字
      • 格式：删除文字

    代码示例

    <!--新增标签-->
    <strong>着重内容</strong>
    <ins>新插入的内容</ins>
    <em>强调的内容</em>
    <del>已经删除的内容</del>
    
    

    

    作者：‼链接：RunTitan♻ https:// juejin.im/post/5aabb316518825558453c30a
    来源：掘金
    版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。