图片标签
图片标签用于向当前页面中引入一个外部图片
使用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>
效果图