前端图片标签，内联框架，音视频

图片标签：

图片标签img是一种介于行内元素和块元素之间的替换元素,自结束标签，即用图片去替换源码的标签。

图片标签的属性：

src: 图片地址，<img src = "1.png">

alt:图片的描述标签，<img src = "1.png" alt = "这是图片"> ，通常是用于搜索引擎的查找，有些浏览器会在图片不能显示时显示图片的描述。

width/height，图片的宽和高，图片会根据设置的宽高，自动等比例缩放，不建议自己修改图片大小。

图片格式：

1. jpg(jpeg)，色彩丰富，不支持透明效果，不支持动图
2. gif，色彩单一，支持简单透明效果，支持动图
3. png，色彩丰富，支持复杂透明效果，不支持动图
4. webp，色彩丰富，支持复杂透明效果，支持动图，兼容性比较差
5. base64，图片转文本格式，用在网页中可以加快网页图片生成，不建议过多使用

---

内联框架iframe

内敛框架iframe，用于在网页里面嵌套其他网页，

用法：<iframe src = "https://www.baidu.com" frameboder = ''0'' width = "100" height = ''100''>

frameboder的取值是0和1，0表示没有边框，1表示有边框，

注意：内联框架的网页不会被搜索引擎搜索的

---

音视频标签audio，video

注意：音视频在引入时，默认不允许用户控制，只有添加controls属性，才可以控制播放与暂停

用法：<audio src="1.mp3" controls aotuplay loop></audio>

<audio  controls > <source src="1.mp3"> </audio>

属性：controls ：控制播放与停止

        aotuplay：自动播放，很多浏览器都不会自动播放，属性效果比较差

        loop：自动循环播放，

三个属性都是只有属性名没有属性值的，设置大小使用属性width和height

video标签和audio标签的用法一样

音视频兼容性，主要考虑ie8，ie8需要使用embed标签

音视频都是embed标签，<embed src="1.mp3" type = "audio/mp3" width = "100" height = "100">

兼容性代码（兼容新版浏览器和旧版浏览器）:

<audio  controls >

<source src="1.mp3"> 

<embed src="1.mp3" type = "audio/mp3" width = "100" height = "100">

</audio>

旧版浏览器不支持audio会忽略1，2，4行，直接运行第三行，

新版浏览器会运行第二行，忽略第三行（但也是支持第三行的写法）