玩转HTML5+跨平台开发[6] H5多媒体标签

汇总

1. video标签

2. audio标签

3. summary标签和details标签-详情和概要标签

4. marquee标签-跑马灯效果

5. HTML中被废弃的标签

6. HTML实体

video标签

作用: 播放视频
格式1:

<video src="">
</video>

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

格式2：

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

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

作用: 播放音频
格式:

<audio src="">
</audio>

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

注意点:
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标签`-详情和概要标签

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

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

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

marquee标签

作用: 跑马灯效果
格式:

<marquee>内容</marquee>

属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意点:
- 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>
    <img src="images/NJ.jpg" width="50px">
</marquee>

HTML中被废弃的标签

为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义，而早期的HTML标签中有一部分标签是没有语义的,是用来修改样式的，所以这部分标签就被淘汰了。
被废弃的部分标签
 <hr> 
 <s>以上标签都是没有语义的,都是用来修改样式的。
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签；
如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用。
为了弥补 b、u、i、s标签的不足, W3C又推出了一组新的标签, 这些标签在显示上看似和buis没什么区别, 但是在语义上却有重大区别strong语义: 定义重要性强调的文字
ins语义(inserted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字

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

其它更多详见维基百科

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-HTML中被废弃的标签</title>
    <style type="text/css">
        .one {
            font-weight: bold;
        }
        .two {
            text-decoration: underline;
        }
        .three {
            font-style: italic;
        }
        .four {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<b>我是文字</b>
<u>我是文字</u>
<i>我是文字</i>
<s>我是文字</s>
<hr>
<strong>我是文字</strong>
<ins>我是文字</ins>
<em>我是文字</em>
<del>我是文字</del>
<hr>
<p class="one">我是文字</p>
<p class="two">我是文字</p>
<p class="three">我是文字</p>
<p class="four">我是文字</p>
</body>
</html>

HTML实体

什么是字符实体?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体
html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。

html对中文空格敏感, 也就是说可以显示中文空格, 但是不推荐这样使用
nbsp是英语non-breaking spacing, 翻译为不打断空格的意思

&nbsp; 空格, 一个&nbsp;就是一个空格, 有多少个&nbsp;就有多少个空格
&lt; 小于符号 < (less than)
&gt; 大于符号 > (greater than)
&copy; 版权符号

<p>我&nbsp;&nbsp;&nbsp;爱你</p>

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

更多HTML实体参考

http://www.w3school.com.cn/tags/html_ref_entities.html

参考：极客江南-06HTML基础--多媒体标签

posted @ 2017-12-03 15:42 KnightKitt 阅读(680) 评论(0) 编辑收藏举报

刷新页面返回顶部

KnightKitt

玩转HTML5+跨平台开发[6] H5多媒体标签

汇总

video标签

audio标签

summary标签和details标签-详情和概要标签

marquee标签

HTML中被废弃的标签

HTML实体

公告

summary标签和`details标签`-详情和概要标签