HTML学习笔记（图片标签+内联框架+音视频播放）

1.图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签，其是一个自结束标签。
属性：

• src：指定外部图片的路径(可以是相对路径或绝对路径)；
• alt：指定对图片的描述。其默认情况下不会显示，当图片无法加载时显示该描述。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别并收录；
• width：图片的宽度（单位为像素）
• height：图片的高度
  注：如果宽度或高度中只修改其中一个，则另一个会等比例缩放。
  例如：(结果见文章最后)

    <img src="1.jpg" alt="花儿" width="100">

---

2.内联框架

内联框架用于向当前页面中引入一个其他页面，用iframe标签来表示。
属性：

• src：指定要引入网页的路径；
• frameborder:指定内联框架的边框，0表示无边框，1表示有边框；
• width：宽度（单位为像素）；
• height：高度。
  例如：（结果见文章最后）

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

3.音视频播放

1. 音频文件:使用audio标签向页面中引入一个外部的音频文件，不加除src的任何属性的话，默认情况下不允许用户自己控制播放/停止
   属性：

   • src：指定要引入音频的路径
   • controls：是否允许用户控制播放
   • autoplay：是否自动播放
     注：如果设置了autoplay，则音频会在打开网页时自动播放，但是目前大多浏览器否不会对其进行自动播放。
   • loop：是否循环播放

2. 视频文件：使用video标签向页面中引入一个外部的视频文使用方式与audio的基本一样
   属性：同audio标签

<audio src="./오안 모트 - Lost.mp3" controls autoplay loop></audio>
    <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件路径。在可识别audio标签的浏览器中，浏览器识别audio后会自动去找可用的source并呈现第一个可用的，若均不可用，则忽略audio和source标签，则只显示提示其后的Sorry文字-->
 <audio controls>
    <source src="./오안 모트 - Lost.mp3">
    Sorry, your browser doesn't support audio element.
</audio>
<!-- vedio的使用同上理-->
 <video controls width="250">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support videos element.
</video>
<!-- 从腾讯视频网页的“分享”中复制对应视频代码 -->
<iframe frameborder="0" width="500" height="300" 
        src="https://v.qq.com/txp/iframe/player.html?vid=g0035g6vj44" 
        allowFullScreen="true"></iframe>

显示结果：