图片-标签、格式\内联框架\音视频播放——HTML

图片标签

图片标签用于向当前页面中引入一个外部图片

• 使用img标签来引入外部图片，img标签是一个自结束标签
• img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
• img 属性：
• src：指定的是外部图片的路径（路径规则和超链接是一样的 ）
• alt：是对图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时候显示，搜索引擎会根据alt中的内容来识别图片。如果不写alt属性则图片不会被搜索引擎所收录
• width：图片的宽度
• height：图片的高度
• 注意：如果宽度和高度如果只修改了一个，则另一个会等比例缩放。
  一般情况下，不建议修改图片修改，（大图缩小浪费内存，小图放大图片失真）

图片格式：

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

• 一般用来显示照片

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

• 适合颜色单一图片

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

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

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

• 它具备其他图片格式的所有优点，而且文件还小
• 缺点：兼容性不好

base64：将图片进行base64进行编码（对数据进行加密),可以将图片转换为字符，通过字符的形式来引入图片

• 一般都是一些需要和网页一起加载的图片才会使用base64，（希望图片加载的快的时候用它）。
• 如果需要将图片加载为base64，可以直接在浏览器上搜索base64，将图片在线转换成base64

内联框架

用于向当前页面中引入一个其他页面

• src 指定要引入的网页的路径
• frameborder 指定内联框架的边框

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

音视频播放

audio 标签用来向页面中引入一个外部的音频文件

• 音频文件引入时，默认情况下不允许用户自己控制播放停止
• 属性：
  • controls 是否允许用户控制播放
  • autoplay 音频文件是否自动播放
    • 如果设置了autoplay，则音乐在打开页面时会自动播放
      但是目前来讲大部分浏览器都不会自动对音乐进行播放（防止打开网页时，声音过大，吓人一跳
  • loop 音乐是否循环播放
• 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
• src：用于指定媒体文件的URL地址
• type：指定媒体文件的类型
• embed标签：将多媒体插入，比如可以插入音乐和视频
  - src=’filename‘：多媒体文件的路径
  - autostart=true/false：是否要多媒体文件传送完就播放
  - loop=true/false:设定播放重复次数
  - startime=”分/秒“：设定多媒体的开始播放时间
  - volume=0-100：设定多媒体音量大小，没有设置，为系统音量
  - width、height：设定播放面板的大小
  - hidden=true：隐藏播放控制面板
  - controls：设定播放控制面板的样子

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

    <audio src="插入文件的路径" controls autoplay loop></audio>    
    <audio controls>
            Sorry！！您的浏览器不支持播放音频！请升级浏览器！！
                    <source src="">
                    <embed src="插入的文件的路径" type="audio/mp3" width="200" height="50"> 
    </audio>    
  
    <video controls>
            <source src="">
            <embed src="" type="video/mp4">
    </video>