<!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,加载速度快。
效果一样,用小的
效果不一样,用效果好的