图片标签
图片标签<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：是否循环播放。
上面属性都没有值，只要加上就生效，不加就不生效。
使用方式基本与音频标签一样。
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
