章节⑦ - 多媒体标签 \ html5 新增标签和废弃标签

一.video标签

什么是video标签?
作用: 播放视频
a.第一种格式:

<video src=""></video>

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

//设置 自动播放 + 控制条
<video src="images/sb1.webm" autoplay="autoplay" controls="controls"></video>
//控制条 + 占位图
<video src="images/sb1.webm"  controls="controls" poster="images/NJ.jpg"></video>
//广告视频 : 自动播放 + 无限循环 + 静音 + 宽度
<video src="images/sb1.webm"  autoplay="autoplay"  loop="loop" muted="muted" width="800px"></video>

b.第二种格式

2.1.格式:

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

2.2.第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定
给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
2.3.注意点:
2.3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
2.3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

//示例代码:
<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

二. audio标签

1.什么是audio标签?
作用: 播放音频
2.格式:

<audio src=""></audio>

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

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

//第一种格式
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>

//第二种格式
<audio autoplay="autoplay" controls="controls">
    <source src="images/yinyue.mp3" type="audio/mp3">
</audio>

三. 详情和概要标签

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

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

示例代码

<details>
    <summary>郑伊健</summary>
简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...
</details>

概要详情.gif

四. marquee标签

1.什么是marquee ([mɑr'ki])标签?
作用: 跑马灯
2.格式:

<marquee>内容</marquee>

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

<!--滚动方向-->
<marquee>随便写点内容</marquee>
<marquee direction="right">随便写点内容</marquee>
<marquee direction="up">随便写点内容</marquee>
<marquee direction="down">随便写点内容</marquee>
<hr>
<!--设置滚动速度-->
<marquee scrollamount="1">随便写点内容</marquee>
<marquee scrollamount="100">随便写点内容</marquee>
<hr>
<!--设置滚动次数-->
<marquee loop="1">随便写点内容</marquee>
<hr>
<!--设置滚动类型-->
<!--滚动到边停止-->
<marquee behavior="slide">随便写点内容</marquee>
<!--往返滚动-->
<marquee behavior="alternate">随便写点内容</marquee>
<!--滚动图片-->
<marquee>
    ![](images/NJ.jpg)
</marquee>

marquee滚动方向

五. 废弃标签

1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了
被废弃标签
 <hr> 
   <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
推出的新标签
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized 音标:['ɛmfə,saɪz]): 定义强调的文字
del语义(deleted): 定义被删除的文字
废弃的标签

<b>我是文字</b>
<u>我是文字</u>
<i>我是文字</i>
<s>我是文字</s>

新标签

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

css样式控制,同样可以获得一样的效果

<p class="one">我是文字</p>
<p class="two">我是文字</p>
<p class="three">我是文字</p>
<p class="four">我是文字</p>
css
部分
    <style type="text/css">
        .one {
            font-weight: bold;
        }
        .two {
            text-decoration: underline;
        }
        .three {
            font-style: italic;
        }
        .four {
            text-decoration: line-through;
        }
    </style>

废弃标签新增标签 css.png

六. 字符实体

1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理

2.什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体
示例代码:

<p>我&nbsp;&nbsp;&nbsp;爱你</p>`
<p>到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了&lt;h1&gt;标签, &lt;table&gt;标签, &lt;img&gt;标签....</p>
&copy;

显示效果

章节⑦ - 多媒体标签 \ html5 新增标签和废弃标签

推荐阅读更多精彩内容