【前端14】IMG标签和图片格式

【前端14】IMG标签和图片格式

Posted by LineXic on February 25, 2024

前言 

本教程基于尚硅谷Web前端教程发布,你们也可以理解为这是一篇尚硅谷教程的笔记,当然这里也有我自己的一些经验总结

图片标签

图片标签

图片标签(img)是向外部引用进网页图片的标签,可以使用img标签使你的网页显示图片,它是一种自结束标签

1
  <img src=""/>

是它的格式,其中引号内填入图片图床直链,直链可以通过鼠标右键/长按图片获得,但有可能直接侵权,不保险

IMG是一个替换元素,同时具有块和行内元素属性

完整

1
 <img src="" alt=""/>

IMG的属性

  • src 写入直链
  • alt 写入对图片的介绍,在图片加载不出来或无法加载时显示alt内容,比如

alt属性加载不出来

当然alt还有一个用途,那就是被搜索引擎搜索到,写入alt后在搜索会根据alt关键字搜索

  • width/height 定义图片大小(一般PC电脑端不会用到,单位像素)和宽度,更多时候只写width属性就行,高度也会随宽度调换等比例缩放
1
<img width="" src="" alt="">

图片格式

图片格式

  • jepg(jpg)
    • 支持颜色比较丰富,不支持动图和透明效果
    • 一般用来显示照片
  • gif
    • 支持颜色少,支持简单的背景透明,支持透明
    • 照片动图颜色单一
  • png
    • 支持背景透明,颜色丰富,不支持动图
    • 颜色丰富,复杂透明图片(专为网页而生)
  • webp
    • 谷歌近几年推出的新图片格式专门表示网页图片
    • 它具有以上所说格式所有的优点并且文件体积还小
    • 缺点兼并性差

使用图片技巧

  • 效果一样用占体积小的
  • 效果不一样就用效果好的

%