【前端学习】前端学习第二天:图片标签、音频标签及视频标签的用法说明

一、图片标签

在介绍图片标签之前，首先可以了解一下图片的格式。

1、jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图；

2、gif：支持的颜色比较少，支持简单透明，支持动图；

3、png：支持的颜色丰富，支持复杂透明，不支持动图；

4、webp：是谷歌新推出的专门用来表示网页中图片的一种格式，具备其他格式的所有优点，占用内存还小，但是兼容性不好。

图片标签通过使用标签引入外部图片，img标签属于替换元素，也就是基于块元素和行内元素之间，具有两种元素的特点。

img标签常用的属性有：

src属性：指定外部图片的路径；

alt属性：图片的描述，当浏览器在图片无法加载时会显示，且搜索引擎会根据alt中的内容来识别图片；

width属性和height属性：当width和height只修改一个时，另一个会遵循等比例缩放原则；

二、音频标签

audio标签常用的属性有：

src属性：通过src引入外部音频标签；

autoplay属性：自动播放音频；

controls属性：音频控件，在页面中显示播放器；

loop属性：自动循环播放；

source属性：媒体元素，定义媒体资源，允许规定两个音频文件供浏览器根据浏览器本身对音频文件类型或编解码器的支持进行选择。

三、视频标签

video标签常用属性有：大部分属性和audio标签类似，还有一些自身特有的属性；

比如可以通过为video标签设置width和height来控制视频文件的大小，还可以通过poster属性来设置用户在点击播放按钮前播放器中显示的图片。