图像格式与网页优化：JPEG,GIF,PNG,WebP详解-CSDN博客

本文链接：https://blog.csdn.net/jokerJOJO777/article/details/133754315

常用格式有哪些？主要的特点？

图片的格式

JPEG(JPG)

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

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

GIF

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

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

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

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

专为网页而生的

webp

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

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

-缺点：兼容性不好

base64

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

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

图片的使用原则：

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

效果一致，使用小的

网页加载流程

第一次请求：加载网页本身例如html css

第二次之后请求，加载外部资源例如图片，js库，一些框架

音视频

src 指向引入音视频路径

绝对路径

相对路径 ./ 或者../

controls 控制是否给用户播放默认是不给

loop 循环播放

 <!-- audio标签 用来向页面中引入一个外部的音频文件 -->
    <audio src="./source/达拉崩吧.mp3" controls loop ></audio>
    <!-- video标签来向页面中引入一个视频，使用方式跟音频基本上一样的 -->
    <video src="./source/绝地逢生.mp4" controls loop></video>

长度单位

像素 px

实是屏幕上一个个发光的小点，页面看到的所有的内容，都是由一个个小点组成的，

正常情况看不到，可以进行放大查看，在pc端，1px=1个小色块

在pc端，最常用的长度单位，也是绝对单位

百分比 %

相对单位是根据其父元素的大小变化而变化

做流式（响应）布局时常用

em

相对单位

是根据其当前字体大小的变化而变化的，如果当前元素未设置字体大小，它会继承其祖先元素，

直到继承html字体大小，html默认的字体大小为16px

rem

相对单位

r root 根

是根据根标签字体大小而设置

移动端开发时常用的单位

vw vh

视口宽度，视口高度

移动端开发时常用的单位

<style>
      .box{
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .box1{
        width: 50%;
        height:50%;
        background-color: green;
        font-size: 20px;
       
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1">box1</div>
    </div>
  </body>