<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（介于块元素和行内元素之间，兼具两者的特点；所谓替换即指展现的不是所写的内容）
属性：
src属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度（单位是像素）
height 图片的高度
-宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：一般情况，在pc端不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（专为网页而生）
webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有优点，而且文件还特别的小
-缺点：兼容性不好
base64
-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64
经验：
效果一样，用小的
效果不一样，用效果好的
-->
<img width="100" src="./前端图片素材/1.jpeg" alt="泰勒斯威夫特">
</html>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/……wDyBYsTZUO0V0fhHwvFixCO5Gy87lYsSKNwvVixBaPVssWJei0ejqsWLEzQ/9k=" alt="">
标签：11,标签,Document,图片 来源： https://www.cnblogs.com/sherryyuan/p/16329187.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。