HTML常用标签3

学习目标：

• 图片标签

• 图片格式

• 音视频

---

学习内容：

1.        使用img标签来向网页中引入一个外部图片，

           img标签也是一个自结束标签

           img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

           src   引入图片的路径

           alt   对图片的描述，帮助浏览器收录图片，有一定的seo效果

           width  控制图片的宽度

           height     控制图片的高度

           注意：一般不会同时设置宽高

           img标签是行内块元素 ，自结束标签

2.     和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

               图片的格式

                   JPEG(JPG)

                       - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

                       - 一般用来保存照片等颜色丰富的图片

                      

                   GIF

                       - GIF支持的颜色少，只支持简单的透明，支持动态图

                       - 图片颜色单一或者是动态图时可以使用gif

                  

                   PNG

                       - PNG支持的颜色多，并且支持复杂的透明，不支持动图，而且内存比较大

                       - 可以用来显示颜色复杂的透明的图片

                         专为网页而生的

                   webp

                      -谷歌新推出的专门用来表示网页的一种格式

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

                      -缺点：兼容性不好

                      

                   base64

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

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

   
    

               图片的使用原则：

                   效果不一致，使用效果好的

                   效果一致，使用小的

      

    网页加载流程

                  第一次请求：加载网页本身  网页结构

                  第二次之后请求，加载外部资源   样式、图片 

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

       video标签来向页面中引入一个视频，使用方式跟音频基本上一样的 

         src  引入音视频的路径   相对路径/绝对路径

         controls   控制用户是否可以播放,默认是不可以点击播放

         loop     循环播放

         autoplay  自动播放   （基本被废止,除了IE）

     

---

学习代码：