从零开始学HTML（下）

图片标签

1. 图片标签用于向当前页面中引入一个外部图片
   使用img标签来放引入外部图片，img标签是一个自结束标签
   img这种元素属于替换元素（基于块元素和行内元素）

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

3. 注意：
   一般情况中PC端，不建议修改图大小，需要多大的图片就裁多大

   图片的格式；
   jpg
   - 支持的颜色比较丰富 不支持透明效果，不支持动图
   - 一般来显示照片
   gif
   -支持的颜色较少，支持简单透明，支持动图
   - 颜色单一图片，动图
   png
   - 支持的颜色丰富 支持复杂透明 不支持动图
   - 颜色丰富 复杂透明图片 （为网页而生）
   webp
   - 这种格式是谷歌专门用来表示网页中图片的一种格式
   - 具备其他图片格式的所有优点，而且文件比较小
   - 兼容性不好，缺点
   base64
   - 将图片使用base64进行编码，这样可以直接将图片转换字符，引入图片
   - 一般都是需要和网页一起加载的图片

   <img width="500"src="./img/1.jpg" alt="动漫头像">

  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1255356089,3124726136&fm=26&gp=0.jpg">

内联框架

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

 2.  <iframe src="http://www.qq.com" width="800" height="600" frameborder="1"> </iframe>

音视频

1. audio 标签用来向页面中引入一个外部的音频文件。
2. 引入时，默认情况下不允许用户自己控制。
3. 属性
   control 是否允许用户控制播放
   autoplay 音频文件是否自动播放
   -如果设置autoplay 则音乐打开页面会自动播放
   但是大部分浏览器都不会自动对音乐进行播放
   loop 音乐是否循环播放

 4.  <audio src="./source/audio.mp3" controls autoplay></audio>
 5.    <!--
        除了src来指定外部文件，也可以用source指定文件
    -->
    <audio controls>
      对不起您的浏览器不支持播放音频
        <source src="./source/audio.mp3">
        <embed src = "./source/audio.mp3" type="audio/mp3">
    </audio>
    <!--

6. 使用video标签 引入一个视频。

  <video controls>
     <source src="IMG_0604.MP4">
     <embed src = "IMG_0604.MP4" type="audio/mp4">
     <iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132019904&page=27" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
   </video>