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