图片标签_csnd 标签图片-CSDN博客

本文链接：https://blog.csdn.net/qq_35650513/article/details/112849080

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!--
        图片标签用于向当前页面中引入一个外部图片
         使用 img标签来引入外部图片，img是一个自结束标签
            属性：（属于替换元素，介于行内元素和块元素之间，具有两者的特性）
                scr ：图片的路径
                alt ：对图片的描述，默认不会显示，当图片无法加载的时候显示
                    搜索引擎会根据 alt中的内容来识别图片

                width： 图片的宽度（单位像素px）
                height： 图片的高度
                    --宽度和高度中如果只修改了一个，则另一个会等比例缩放

                注意：
                    一般在pc端，不建议修改图片的大小
                    但是在移动端，经常需要对图片进行缩放（大图缩小）


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

                
    -->
    <img src="./img/图片1.jpg" >
<img src="" alt="">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=479070067,3968850289&fm=26&gp=0.jpg">

</body>
</html>