5.图片-HTML基础
一、图片标签
在
HTML中，我们可以使用img标签来显示一张图片。 对于img标签，只需要掌握它的 3 个属性：
- src
- alt
- title
<img src="" alt="" title=""/>
1.src属性
src用于指定图片所在的路径，这个路径可以是绝对路径，也可以是相对路径。
（1）语法
<img src="图片路径"/>
这里的图片路径就是图片地址，任何一个图片必须指定
src属性才可以显示。 也就是说，src属性是img标签必不可少的属性。
（2）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="pikaqiu.png">
</body>
</html>
图片src属性.png
2.alt属性和title属性
alt属性和title属性都是用于指定图片的提示文字。 一般情况下，alt属性和title属性的值是相同的，但是二者也有很大不同。
（1）二者区别
-
alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当文字无法显示时，页面会显示alt中的文字。 -
title属性也用于描述图片，这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。
（2）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="pikaqiu.png" alt="我是皮卡丘" title="十万伏特"> <!--鼠标移动到图片显示十万伏特-->
</body>
</html>
<!--
这时，加上alt属性跟没加上效果一样，要是我们把图片路径即src属性换个不存在的，就会在浏览器上显示alt属性的提示文字。
若没有加上alt属性，图片无法显示时，就不会有提示文字。
当我们把鼠标移到图片上，就会显示title属性中的提示文字。
-->（3）实际开发
在实际开发中，对于
img标签，src和alt这两个是必选属性，一定添加，而title是可选属性，可加可不加。
二、图片路径
1.绝对路径
绝对路径，指的是图片在我们的电脑中的完整路径。 文件夹上方会有一个路径，这个就是绝对路径。
（1）示例
图片路径练习.png
① 例1
将
毛毛.jpg用绝对路径显示在浏览器上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="D:/赢凌策/前端全栈工程师/前端练习（小知识点）/赢凌齊_练习作品/img/毛毛.jpg" alt="毛毛最可爱" title="小黑">
</body>
</html>2.相对路径
相对路径，指的是相对当前页面的位置。
（1）“../”表示上一级目录
“../”表示上一级目录，一定要记住这种写法。
（2）示例
① 例1
将
毛毛.jpg用绝对路径显示在浏览器上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="img/毛毛.jpg" alt="毛毛最可爱" title="小黑"/>
</body>
</html>3.实际开发
（1）使用绝对路径时，图片不显示
使用绝对路径时，编辑器往往都不能把图片的路径解析出来，因此图片无法在网页中显示出来。 在真正的网页开发中，对于图片或引用文件路径都是使用相对路径。因此我们只需要掌握相对路径的写法即可。
（2）图片或文件，不建议使用中文名
不建议使用中文，因为很多服务器是英文操作系统，不能对中文文件名提供很好的支持。所以不管是图片还是文件夹，都建议使用英文。
三、图片格式
在网页中，图片格式有两种：一种是位图，另外一种是矢量图。
1.位图
位图，又叫像素图，它是由像素组成的图片。 将位图放大后，图片会失真；缩小图片后，位图同样也会失真。 在实际开发中，最常见位图的图片格式有以下三种：
- .jpg（或.jpeg）
- .png
- .gif
深入理解这三种图片适合在哪种情况下使用，是非常重要。
（1）.jpg格式
.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。 此外，.jpg体积较大，并且不支持透明。
（2）.png格式
.png格式是一种无损格式，可以无损压缩以保证页面打开速度。此外，.png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）.gif格式
.gif图片效果最差，不过它适合制作动画。实际上，我们经常在QQ发的动图都是.gif的格式。也就是说，如果想要展示的色彩丰富而高品质图片，可以使用
.jpg格式；如果是一般图片，为了减少体积或想要透明效果，可以使用.png格式；如果是动画图片，可以使用.gif格式。 对于位图，我们可以使用photoshop这款软件的处理。
2.矢量图
矢量图，又叫向量图，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。 矢量图是以一种数字描述的方式来记录内容的图片格式。例如：我们可以使用
y = kx来绘制一条直线，当 k 取不同值时，就会绘制不同角度的直线，这就是矢量图的构图原理。
（1）优缺点
矢量图最大优点是图片无论放大，缩小或旋转等都不会失真。 最大的缺点是难以表现色彩丰富的图片效果。
在网页中，很少用到矢量图，除非是一些字体图标。
（2）位图和矢量图的区别
- 位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
- 位图的组成单位是像素，而矢量图组成单位是数学向量。
- 位图受分辨率影响，当图片放大时会失真，而适量图不受分辨率影响，当图片放大时不会失真。
- 网页中的图片绝大多数都是位图，而不是矢量图。