第七章 多媒体标签

第五十课 video标签

video标签:播放视频
格式

<video src="">
</video>

属性:

src:告诉video标签需要播放视频地址
autopaly:是否自动播放
controls:是否显示控制条
poster:没有播放之前的占位图
loop:是否循环播放
preload: 预加载视频,但是preload和autoplay相冲,设置autoplay,preload失效
muted:静音
width/height:和img中一样,只设置一项,另一项会自动适配,不是按照比例,会变形

<!-- 视频 -->
<video src="test.mp4" autoplay controls muted loop width="300px">
</video>
<video src="test.mp4" controls muted loop poster="0.gif" width="300px">
</video>

第五十一课 video标签的第二种格式

视频格式:Ogg、mpeg4、webm
浏览器支持的格式不统一,为了解决浏览器适配问题

<video autoplay controls loop muted width="300">
    <source src="test.webm" type="video/webm"></source>
    <source src="test.mp4" type="video/mp4"></source>
    <source src="test.ogg" type="video/ogg"></source>
</video>

第五十二课 audio标签

video标签:浏览器必须支持HTML5,否者如果想通过video标签播放视频,可以通过JS框架html5media来实现

audio标签:播放音频
音频格式:Ogg Vorbls MP3 Wav
格式:

<audio src="">
</audio>

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

audio和video区别

audio标签的使用和video标签的使用基本一样,video中的能够使用的属性在audio标签中大部分都能够
使用,并且功能都一样
只不过有三个属性不可以用,height/width/poster

<audio src="test.mp3" controls>
</audio>

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

第五十三课 详情和概要标签

作用:利用summary标签来描述概要信息,利用details标签来描述详情信息
默认情况下是折叠的
格式:

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

<!-- 概要和详情 -->
<details>
  <summary>概要信息</summary>
  详情信息:金德拉克飞机卡九分裤垃圾地方看见啊两款发动机垃圾放假啊的激发肌肤建立卡江东父老卡的
</details>

第五十四课 marquee标签

W3C不推荐,在W3C官网上找不到,但是浏览器大都支持

作用:跑马灯
格式:

<marquee>内容</marquee>

属性:

direction:设置滚动方向 left/right/up/down
scrollamount:设置滚动属性,值越大就越快
loop:设置滚动次数,默认为-1,无限滚动
behavior:设置滚动类型 slide滚动到边界就停止,alternate滚动到边界就自动弹回

<marquee> just so so scroll</marquee>
<marquee direction="up"> just so so scroll</marquee>
<marquee direction="right" scrollamount="100"> just so so scroll</marquee>
<marquee direction="left" scrollamount="100" loop="1"> just so so scroll</marquee>
<marquee direction="left" scrollamount="100" behavior="slide"> just so so scroll</marquee>
<marquee direction="left" scrollamount="100" behavior="alternate"> just so so scroll</marquee>
<marquee>
  ![](0.gif)
</marquee>

第五十五课 HTML中被放弃的标签

放弃的原因:因为当前HTML中的标签只有一个作用,就是用来添加语义的,而早期的HTML标签中一部分标签
是没有语义的,有一部分标签是修改样式的,所以这部分标签就被淘汰了

<br> <hr> <font>
<b> <u> <i> <s>

以上标签都是没有语义的,都是用阿里修改样式的
b bold:加粗文本,没有任何语义的
u underlined 给文本添加下划线,没有任何语义
i italic 将文本倾斜,没有任何语义的
s strikethrough 给文本添加删除线,没有任何语义的
以后企业开发中,不到万不得已一定不要使用这些废弃的标签
如果一定要使用,一般情况都是用来作为CSS的钩子来使用的

strong 语义:定义重要性强调的文字
ins 语义:inseted 定义插入的文字
em 语义:emphasized 定义强调的文字
del语义:deleted 定义被删除的文字

<!-- 舍弃标签 -->
<b>文字</b>
<u>文字</u>
<i>文字</i>
<s>文字</s>
<hr>
<strong>文字</strong>
<ins>文字</ins>
<em>文字</em>
<del>文字</del>

第五十六课 字符实体

HTML5只关心语义,不要关心样式
在HTML中对空格/回车/tab不敏感,会把多个空格/回车/tab当作一个空格处理

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

空格
< 小于符号 < less than
> 大于符号 > greater than
© 版权

<!-- 字符实体 -->
<p>我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱&nbsp;&nbsp;你</p>
<p>学过的标签&lt;h1&gt; 版权符号&copy;</p>

内容参考
meta其它类型

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容