HTML音视频标签以及图片格式的讲解

今天来讲一下两个新标签，音频标签以及视频标签也就是audio标签和video标签

audio标签

音频标签支持三种格式：MP3、Wav、Ogg，一般而言我们都是用MP3格式的。

 <audio src=""></audio>

上面就是我们的audio标签，他主要有以下几个属性

1. src属性   这是指向音频的引用路径

2. controls属性    这是控制是否允许用户进行播放，默认是不允许的

3. loop属性   是否循环播放，一般默认不循环

     <audio src="./ ../" controls loop></audio>

就是如上图所示的属性

video标签

视频标签也支持三种格式：MP4、WebM、Ogg。

<video src=""></video>

video标签和audio标签的属性一模一样

1. src属性   这是指向音频的引用路径

2. controls属性    这是控制是否允许用户进行播放，默认是不允许的

3. loop属性   是否循环播放，一般默认不循环

<video src="./ ../" controls loop></video>

以上就是音频标签和视频标签的讲解。

图片格式

图片的格式分为以下几种：

JPEG（jpg） JPEG支持的颜色多 图片可以压缩 但是不支持透明

                       一般用来保存照片等颜色丰富的图片

 gif                  gif支持颜色少 只支持简单透明 支持动图

 png                png支持颜色多，并且支持复杂的透明，不支持动图，文件较大

                       专为网页而生

 webp             谷歌新推出的专门用来表示网页的一种格式

                       什么都好就是兼容性不好

 base64          将图片转为字符，通过字符形式引入

                       一般是需要和网站一起加载的图片才会使用到

 

图片的使用原则

一般来说效果不一致的用效果好的，效果一致的的用小的