图片插入img

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性：

src 属性指定的是外部图片的路径(路径规则与超链接一致)

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

width 图片的宽度(单位是像素)

height 图片的高度

-宽度和高度中如果只修改了一个，另外一个会等比例缩放

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
<h1>av</h1>
    
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F18%2F20181118205113_lffkt.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636731875&t=31473b6ce6a6188ffd3c3f71cafacc81" alt="童年">
    加qq1961522914
    <br>

    <br>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170614%2Fcf0c5709ddb94e9b80ed1e75e26e332d_th.png&refer=http%3A%2F%2Fimg.mp.sohu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636732459&t=48f1565d0172f004ae7146e3331c8215" width="200">
   
</body>
</html>

1|0图片的格式:

jepg(jpg)

支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片

gif

支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图

png

支持的颜色丰富，支持复杂透明，支持动图，颜色丰富，复杂透明图片（专为网页而生）

webp

这种格式是谷歌新推出的专门用来表示网页的图片的一种格式，它具备其他图片格式的缩影有点，而且文件还特别下，缺点：兼容性不好

base64

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

效果一样，用小的

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

__EOF__

本文作者：无忧
本文链接：https://www.cnblogs.com/weizw/p/15414179.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！