图片标签

最新推荐文章于 2022-07-13 16:04:45 发布

MondayCui

最新推荐文章于 2022-07-13 16:04:45 发布

阅读量245

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/mondaycui/article/details/108553725

版权

前端学习专栏收录该内容

42 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!-- 
        图片标签用于向当前页面中引入一个外部图片
            使用img标签引入外部图片，img是一个自结束标签
            img元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
            属性：
                src 指定外部图片的路径（路径规则与超链接一样）

                alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
                
     -->

     <img src="./img/1.gif" alt="松鼠">

     <img src="./img/2.gif" alt="熊">

     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599920158438&di=cf626b969f67c5c2ad24eeb382bd54f7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F29%2F20191129202725_cfmer.thumb.400_0.jpg" alt="猪猪侠">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!-- 
        图片标签用于向当前页面中引入一个外部图片
            使用img标签引入外部图片，img是一个自结束标签
            img元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
            属性：
                src 指定外部图片的路径（路径规则与超链接一样）

                alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
                
     -->

     <img src="./img/3.gif" alt="松鼠">

     <img src="./img/4.gif" alt="熊">

     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599920158438&di=cf626b969f67c5c2ad24eeb382bd54f7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F29%2F20191129202725_cfmer.thumb.400_0.jpg" alt="猪猪侠">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!-- 
        图片标签用于向当前页面中引入一个外部图片
            使用img标签引入外部图片，img是一个自结束标签
            img元素属于替换元素（介于块和行内元素之间，具有两种元素的特点）
            属性：
                src 指定外部图片的路径（路径规则与超链接一样）

                alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
                    搜索引擎会根据alt中的内容来识别图片，如果不写alt属性不会被搜索引擎收录

                width 图片的宽度（单位是像素）

                height 图片的高度
                    -- 高度和宽度中如果只修改一个，则另一个会等比例缩放
                
                注：
                    一般情况在PC端，不建议修改图片的大小，需要多大的图片就裁多大
                    但在移动端，经常需要对图片进行缩放（大图缩小）
     -->

     <img src="./img/1.gif" alt="松鼠">

     <img width="200" src="./img/2.gif" alt="熊">

     <img width="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599920158438&di=cf626b969f67c5c2ad24eeb382bd54f7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F29%2F20191129202725_cfmer.thumb.400_0.jpg" alt="猪猪侠">
</body>
</html>

在这里插入图片描述

     <img width="200" height="200" src="./img/1.gif" alt="松鼠">

在这里插入图片描述

        图片的格式：
            jpeg(jpg)
                - 支持的颜色比较丰富，不支持透明效果，不支持动图
                - 一般用来显示照片
            gif
                - 支持的颜色比较少，支持简单透明，支持动图
                - 颜色单一的图片，动图
            png
                - 支持的颜色丰富，支持复杂透明，不支持动图
                - 颜色丰富，复杂透明图片（专为网页而生）
            webp
                - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                - 它具备其他图片格式的所有优点，而且文件还特别的小
                - 缺点：兼容性不好

            base64 
                - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    
                - 一般都是一些需要和网页一起加载的图片才会使用base64，加载速度快。

            效果一样，用小的
            效果不一样，用效果好的

MondayCui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片标签</title></head><body> <!-- 图片标签用于向当前页面中引入一个外部图片使用img标签引入外部图片，img是一个自结束标签 img元素属于替换元
复制链接

扫一扫

专栏目录