图片标签

最新推荐文章于 2023-01-26 06:12:06 发布

Double_路

最新推荐文章于 2023-01-26 06:12:06 发布

阅读量182

点赞数 1

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/qq_44606245/article/details/109129553

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

图片标签

图片标签用于向当前页面中引入一个外部图片
使用img标签引入外部图片，是自结束标签(路径规则和超链接一样)
是一种替换元素，基于块和行内元素之间，具有两种元素的特点，显示的不是img本身，而是被图片所替换
属性：
src 路径
alt 描述图片（默认情况下不会显示，有的浏览器无法加载图片时显示）
width 图片宽度（单位是像素）
height 图片高度
-只修改一个，另一个会随着改变，等比例缩放
-图片缩小，浪费内存，图片放大，图片失真，pc端不建议用这个

    图片格式：
        jpeg(jpg)：
            支持颜色多，不支持透明效果和动图
            一般用来显示照片，可压缩
        gif：
            支持颜色少，支持简单透明，支持动图
            用于颜色单一的动图
        png：
            支持颜色丰富，支持复杂透明，不支持动图
            网页最常用
        webp：
            谷歌新推出的一种用来表示网页的一种格式
            集合了其他格式的所有优点
            但是兼容性不好
        base64
            不是一种图片格式
            它将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入
            一般都是一些需要和网页一起加载的图片才用
      效果一样用小的（快的加载速度）效果不一样用好的

例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>自己电脑上的图片：</p>
     <img width="200px" src="-66dcd00e5da4155f.jpg" alt="漂亮女孩">
     <p>百度网页找到的图片：</p>
     <img width="200px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602778579025&di=58e12dcaf4ce4749f0fcbb7f9d399de5&imgtype=0&src=http%3A%2F%2Fwww.zllp32.com%2Fuploads%2F201405%2F1401155813a6fhn5Jc.jpg" alt="蝴蝶犬">
    
</body>
</html>

效果图
网页上插入图片

Double_路

关注

1
点赞
踩
0

收藏

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

图片标签图片标签用于向当前页面中引入一个外部图片使用img标签引入外部图片，是自结束标签(路径规则和超链接一样)是一种替换元素，基于块和行内元素之间，具有两种元素的特点，显示的不是img本身，而是被图片所替换属性：src 路径alt 描述图片（默认情况下不会显示，有的浏览器无法加载图片时显示）width 图片宽度（单位是像素）height 图片高度-只修改一个，另一个会随着改变，等比例缩放-图片缩小，浪费内存，图片放大，图片失真，pc端不建议用这个图片格式： j
复制链接

扫一扫

专栏目录