HTML学习笔记——多媒体标签及一些其他标签

多媒体标签及一些其他标签

目录

• 简介
• Video标签
• Video标签的第二种格式
• Audio标签
• Audio标签的第二种格式
• 详情和概要标签
• Marquee标签
• HTML中被废弃的标签
• 字符实体

简介

用来在网页中嵌入插件来播放多媒体文件

Video标签

• 视频标签，用于播发视频

<video src="test.webm" autoplay="autoplay" controls="controls" poster="poster.png"
loop="loop" preload="auto" muted="muted">
</video>

• src:用于设置需要播放视频的地址；
• autoplay:用于设置是否需要自动播放，如果设置autolay，preload就会失效；
• controls:用于设置是否需要视频控制条；
• poster:用于视频播放之前设置占位图片；
• loop:用于设置是否需要循环播放；
• preload:用于设置是否需要预加载，与autoplay属性相冲；
• muted:用于设置播放视频是否静音
• width/height:宽度和高度

Video标签的第二种格式

• 由于视频数据非常重要，所以五大浏览器厂商都不愿意支持其他厂商的格式，所以导致了没有一种视频格式是所有浏览器都支持的，为了解决这个问题，W3C提供了video标签的第二种格式来解决浏览器适配问题，通过source标签把三大格式的视频指定给video标签。

<video>
    <source src="test.webm" type="video/webm"></source>
    <source src="test.ogg" type="video/ogg"></source>
    <source src="test.mp4" type="video/mp4"></source>
</video>

• 注意点：通过video的第二种格式可以提供多种视频格式供浏览器选择自己的支持的格式，但是还是无法覆盖到所有浏览器（因为过去的部分浏览器不支持HTML5的video标签），如果想要真正完全覆盖所有的浏览器，需要js框架html5media的帮助。

Audio标签

• 视频标签，用于播发视频

<audio src="test.mp3" autoplay="autoplay" controls="controls"
       loop="loop" preload="auto" muted="muted">
</audio>

• src:用于设置需要播放音频的地址；
• autoplay:用于设置是否需要自动播放，如果设置autolay，preload就会失效；
• controls:用于设置是否需要音频控制条；
• loop:用于设置是否需要循环播放；
• preload:用于设置是否需要预加载，与autoplay属性相冲；
• muted:用于设置播放音频是否静音

Audio标签的第二种格式

• 由于音频数据非常重要，所以五大浏览器厂商都不愿意支持其他厂商的格式，所以导致了没有一种音频格式是所有浏览器都支持的，为了解决这个问题，W3C提供了音频标签的第二种格式来解决浏览器适配问题，通过source标签把三大格式的音频指定给audio标签。

<audio>
    <source src="test.wav" type="audio/wav"></source>
    <source src="test.ogg" type="audio/ogg"></source>
    <source src="test.mp3" type="audio/mp3"></source>
</audio>

详情和概要标签

• 作用：为了有效利用有限的网页空间，通过详情概要标签在不需要的时候取消展示详情。
• 格式

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

Marquee标签

• 作用：跑马灯，弹幕
• 格式

<marquee behavior="behavior" direction="left" scrollamount="1" loop="5">我是一条从右往左循环播放的弹幕</marquee>

• direction属性：取值up,down,right,left，控制弹幕滚动方向
• scrollamount属性：控制弹幕滚动速度，值越大，速度越快
• loop属性：控制弹幕滚动次数，默认是-1，即无限循环
• behavior属性：控制滚动类型，有两个取值
  
  • slide：弹幕滚动结束到界面边缘后停止
  • alternate：弹幕滚动到界面边缘后，反向继续滚动，直到滚动结束，最后停在界面边缘

HTML中被废弃的标签

• 因为现在HTML标签只有一个作用就是给文本添加语义，然而早期的部分HTML标签是没有语义的，或者是用来修改文本格式的，这部分标签就被废弃了
• <br><hr><font><b><u><i><s>
• <br>：不另起一个段落换行
• <hr>：添加一条分隔线
• <font>：修改字体样式
• <b>：bold，文本加粗
• <u>：underlined，文本添加下划线
• <i>：italic，文本斜体
• <s>：strikethrough，文本添加删除线
• 我是粗体
• 我添加了下划线
• 我是斜体
• 我添加了删除线

<b>我是粗体</b>
<u>我添加了下划线</u>
<s>我是斜体</s>
<s>我添加了删除线</s>

• 不到万不得已不要使用这些已经废弃的标签，要使用的话一般作为css的钩子使用，制作文字前面的小图标。
• <b>=<strong>：定义重要性强调的文字
• <u>=<ins>：定义插入的文字
• <i>=<em>：定义强调的文字
• <s>=<del>：定义被删除的语义
• 虽然新标签和旧标签看上去的效果是一样的，但是完全不一样，新标签有了自己的语义

<strong>我是粗体</strong>
<ins>我添加了下划线</ins>
<em>我是斜体</em>
<del>我添加了删除线</del>

字符实体

• 在HTML中对空格/回车/tab不敏感，多个空格/回车/tab会被处理成一个空格
• 有的字符被HTML保留，不能直接被显示出来，这些字符就需要字符实体才能正常显示
•  ：空格字符实体，在后面的两个空格汉字中间插入两个 ，空格  空格
• <：less than 小于号字符实体：<
• >：greater than大于号字符实体：>
• ©：版权符号字符实体：©
• 更多字符实体参见字符实体