<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
属性:
src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度
- 宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意:
一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大
但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
jpeg(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片,动图
png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富,复杂透明图片(专为网页而生)
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点,而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的
效果不一样,用效果好的
-->
<img src="./img/1.gif" alt="松鼠">
<img width="200" src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMZaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDQUQyNzAxMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDQUQyNzAwMTY4NDExRTZBMTdEOTlBRDNBNjk4N0QzIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSIyMEIwNzYzMUNEQzQ2NkI5NzM4RUFEQjBCNTdFMUE5RiIgc3RSZWY6ZG9jdW1lbnRJRD0iMjBCMDc2MzFDREM0NjZCOTczOEVBREIwQjU3RTFBOUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAM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