图片标签和图片格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!--
        图片标签用于向当前页面中引入一个外部图片
            使用img标签来引入外部图片, img标签时一个自结束标签
            img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点)
            属性:
                src: 指定的是外部图片路径(路径规则和超链接一样的)

                alt: 对图片的描述, 这个描述默认情况下不会显示, 有些浏览器将图片无法加载时显示
                    搜索引擎会根据alt中的内容来识别图片, 如果不写alt属性则图片不会被搜索引擎所搜到

                width: 图片的高度(单位时像素)
                heigt: 图片的高度
                    - 高度和高度如果只修改了一个, 则另一个会等比例缩放

                注意
                    一般情况在pc端, 不建议修改图片的大小, 需要多大的图片就裁多大
                    但是在移动端, 经常需要对图片进行缩放(大图缩小)

        图片的格式
            jpeg(jpg)
                - 支持的颜色比较丰富, 不支持透明效果, 不支持动图
                - 一般用来显示照片
            gif
                - 支持的颜色较少, 支持简单透明, 支持动图
                - 颜色单一的图片, 动图
            png
                - 支持的颜色丰富, 支持复杂透明, 不支持动图
                - 颜色丰富, 复杂透明图片(专为网页而生)
            webp
                - 这种格式时谷歌新推出的专门用来表示网页中的图片的一种格式
                - 它具备其他图片格式所有的优点, 而且文件还特别小
                - 缺点: 兼容性不好
            
            base64
                - 将图片使用banse64进行编码, 这样可以将我们图片转为字符, 通过字符形式来引入图片
                - 一般都是一些需要和网页一起加载的图片才会使用base64
                - 需要使用上网搜索base64图片转码

            效果一样, 用小的
            效果不一样, 用效果好的
    --> -
    <img src="./img/22a7039b024acd9959ce6deb52011dc3.jpg" alt="名侦探柯南" width="1000">
</body>
</html>
posted @ 2021-02-01 19:21 博客帅帅阅读(317) 评论(0) 收藏举报
刷新页面返回顶部
博客帅帅

图片标签和图片格式

公告
