6. html引入内联框架、图片、音频和视频

 1. 内联框架

•       内联框架，用于向当前页面中引入一个其他页面。
•       src 指定要引入的网页的路径
•       frameborder 指定内联框架的边框

    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

2. 图片（img）

（1）说明：图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签。

（2）属性：

1. src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
2. alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录                 
3. width 图片的宽度 (单位是像素)
4.  height  图片的高度           - 宽度和高度中如果只修改了一个，则另一个会等比例缩放

（3）图片的格式：

            jpeg(jpg)

                - 支持的颜色比较丰富，不支持透明效果，不支持动图

                - 一般用来显示照片

            gif

                - 支持的颜色比较少，支持简单透明，支持动图

                - 颜色单一的图片，动图

            png

                - 支持的颜色丰富，支持复杂透明，不支持动图

                - 颜色丰富，复杂透明图片（专为网页而生）

            webp

                - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

                - 它具备其他图片格式的所有优点，而且文件还特别的小

                - 缺点：兼容性不好

            base64

                - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    

                - 一般都是一些需要和网页一起加载的图片才会使用base64

 （4）使用规则：

            效果一样，用小的

            效果不一样，用效果好的

    <img src="./img/1.gif" alt="松鼠">

    <img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

3. 音频

•         audio 标签用来向页面中引入一个外部的音频文件。
•         音视频文件引入时，默认情况下不允许用户自己控制播放停止。
•         可以用src引入音频文件，也可以用source引入，唯一不同的是source可以在浏览器不显示音频播放条时给出提示，如下图：

<audio src="音频路径" controls loop></audio>

<audio>
    对不起，您的浏览器不支持播放mp3，请升级浏览器版本！
    <source src="音频路径" controls loop>
</audio>

 

•         属性：

            controls   是否允许用户控制播放（添加后浏览器才会出现播放条，如下图）

            autoplay  音频文件是否自动播放

                - 如果设置了autoplay 则音乐在打开页面时会自动播放

                    但是目前来讲大部分浏览器都不会自动对音乐进行播放

            loop 音乐是否循环播放  

    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <!--ogg是另一种格式的音频文件，在audio内写入多个格式可以避免不同浏览器版本不能播放音频文件的情况，这时浏览器会根据顺序解析音频，不会将所有格式都解析    -->
        <source src="./source/audio.ogg">
        <!--上面两种方式IE8都不会生效，embed可以兼容IE8，可以使IE8成功播放音频，其中type指定文件的类型，width播放条大小，height高度   -->
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

4. 视频

        video标签来向网页中引入一个视频，使用方式和audio基本上是一样的。

        在video中引入三种格式的视频文件，浏览器成功解析一种格式后就停止了，不会解析所有格式。

    <video controls>    
        <!--webm由Google推出的一款视频播放格式，文件小视频清晰，但是没有MP4兼容性好 -->
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>