HTML之图片标签、音视频标签

图片标签

图片标签<img>的作用是向网页引入一个外部图片，使用img标签来引入一个外部图片，img标签是一个自结束标签。
相关属性：

src：该属性用于指定外部图片的路径，可以是互联网上的图片，也可以是一个本地图片，用法跟超链接一样。
alt：图片的描述，这个描述在默认情况下不会显示，有些浏览器会在图片无法正常显示时，显示该描述，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片就不会被搜索引擎搜索。

上图是百度搜索钢铁侠图片出来的结果，因为这个图片有alt属性设置有钢铁侠字样，所以能够被搜索引擎检索。
width：图片的宽度。
height：图片的高度。

在PC端，不建议对图片进行宽度和高度设置，需要多大的图片，就截取多大的图片，在移动端经常需要对图片进行缩放，通常对大图片进行缩小以提高清晰度。

图片的格式：

jepg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图，通常用于显示照片。
gif：支持的颜色较少，支持简单的透明，支持动图，通常用于颜色比较单一的图片或者动图。
png：支持丰富的颜色，支持复杂透明，不支持动图，专为网页图片而生。
base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入图片，通常使用这种引入方式的原因是希望图片跟网页一起加载，因为如果使用链接进行图片引入，浏览器会优先把网页加载，然后各自发请求图片地址，而如果使用base64编码的引入方式，网页加载时，会把图片一个解码出来。

一般使用原则：效果一样，使用占用空间较小的，以提高加载速度，效果不一样，选择效果好的。

音频标签

音频标签<audio>用来像网页中引入一个外部的音频文件，音频文件引入是，默认是不允许用户控制音频的播放和停止的。
属性：
src：跟图片标签的src一样的作用。
controls：是否允许用户控制播放停止。
loop：是否循环播放。
上面属性都没有值，只要加上就生效，不加就不生效。

<!doctype html><html><head><meta charset="utf-8"><title>音频标签学习</title></head><body><audio><!-- 使用source标签来引入音频来源 --><source src="./audio.mp3"></audio></body>
</html>

效果：

没有反应，因为audio标签默认不允许用户控制播放和停止，所以默认没有播放页面出来，需要加上一个controls属性。

效果：

视频标签

视频标签<video>用来像网页中引入一个外部的视频文件，视频文件引入是，默认是不允许用户控制
视频的播放和停止的。
属性：
src：跟图片标签的src一样的作用。
controls：是否允许用户控制播放停止。
loop：是否循环播放。
上面属性都没有值，只要加上就生效，不加就不生效。

使用方式基本与音频标签一样。