HTML 图片 - 绿叶网

HTML 图片标签

在 HTML 中，我们可以使用 img 标签来显示一张图片。对于 img 标签，只需要掌握它的 3 个属性：src、alt 和 title。

语法：

<img src="图片地址" alt="提示文字（供蜘蛛查看）" title="提示文字（供用户查看）">

说明：

img 标签是一个自闭合标签，不需要额外的结束标签。在最新的 HTML5 标准中，下面 2 种写法都是可行的，推荐写法 1。

<!--写法1-->
<img src="" alt="" title="">

<!--写法2-->
<img src="" alt="" title="">

任何网页都少不了图片，一个图文并茂的页面，可以使得用户体验更好。如果想让网站获得更多的流量，也需要从 “图文并茂” 这个角度挖掘一下。

1. img 的 src 属性

在 img 标签中，src 属性用于指定这个图片所在的路径。这个路径可以是相对路径，也可以是绝对路径。对于图片路径，我们会在本文下面详细介绍。

语法：

<img src="图片路径">

说明：

所谓的 “图片路径”，指的就是 “图片地址”，这两个叫法是一样的意思。任何一个图片必须指定 src 属性才可以显示。也就是说，src 是 img 标签必不可少的属性。

接下来，我们在 VSCode 中创建一个名为 imgs 的文件夹，然后在该文件中放进一张图片（即 bird.jpg）。整个项目结构如下图所示。

HTML图片的项目结构-1

示例 1：使用 img 的 src 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img src="imgs/bird.jpg">
</body>
</html>

页面效果如下图所示。

HTML图片的src属性

分析：

“imgs/bird.jpg” 就是这张图片的路径。在这个例子中，如果我们把 “imgs/bird.jpg” 去掉，此时图片就不会显示出来了。

2. img 的 alt 和 title 属性

在 img 标签中，alt 和 title 这 2 个属性都是用于指定图片的提示文字。一般情况下，alt 和 title 的值是相同的。不过两者也有很大的不同。

alt：用于图片描述，这个描述文字是给 “搜索引擎” 看的。并且当图片无法显示时，页面会显示 alt 中的文字。
title：也用于图片描述，不过这个描述文字是给 “用户” 看的。并且当鼠标指针移到图片上时，会显示 title 中的文字。

示例 2：使用 img 的 alt 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img src="imgs/bird.jpg" alt="little bird">
</body>
</html>

页面效果如下图所示。

HTML图片的alt属性

分析：

咋看上去，加上 alt 属性跟没加上是一样的效果呢？实际上，当我们把 “imgs/bird.jpg” 去掉后，此时图片无法正常显示出来，但却可以看到浏览器会显示 alt 的提示文字，如下图所示。如果没有加上 alt 属性值，图片无法显示时，则不会有提示文字。

alt属性的提示文字

示例 3：使用 img 的 title 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img src="imgs/bird.jpg" title="little bird">
</body>
</html>

页面效果如下图所示。

HTML图片的title属性

分析：

当我们把鼠标移到图片上时，就会显示 title 中的提示文字，如下图所示。

title属性的提示文字

在实际开发中，对于 img 标签来说，src 和 alt 这 2 个是必需属性（一定要添加）。这是因为没有 src 属性，图片就无法显示出来。没有 alt 属性，搜索引擎就会认为当前页面的图片不友好。而 title 是可选属性，可加可不加。

HTML 图片路径

从前面的学习可知，如果想要在 HTML 中显示一张图片，就必须设置该图片的路径（即图片地址）。也就是说，我们必须要设置 img 标签的 src 属性。道理很简单，就像你找一个文件，也得知道它在哪里才能找得着，对吧？

图片路径，往往是最困扰初学者的知识点之一了。在 HTML 中，路径可以分为 2 种：绝对路径和相对路径。

接下来在 VSCode 中修改一下项目结构（如下图所示）。然后我们尝试使用 page1.html 和 page2.html 这两个页面分别去引用 imgs 文件夹中的 bird.jpg 图片，从而从多方面地来认识相对路径和绝对路径的区别。

HTML图片路径的项目结构-2

1. page1.html 引用图片

绝对路径，指的是图片（或文件）在你的电脑中的完整路径。平常小伙伴使用电脑都知道，文件夹上方会有一个路径，其实这个就是绝对路径，如下图所示。

图片的绝对路径

对于 bird.jpg 这张图片来说，它的绝对路径如下：

<!--绝对路径-->
<img src="D:/web-test/imgs/bird.jpg">

而所谓的相对路径，指的是图片相对当前页面的位置（好好琢磨这句话）。page1.html 与 imgs 文件夹位于同一层目录中，两者是兄弟关系。然后 bird.jpg 位于 imgs 文件夹目录下，这两个是父子关系。因此，正确的相对路径如下：

<!--相对路径-->
<img src="./imgs/bird.jpg">

提示: “./” 表示选择当前的兄弟目录或兄弟文件，小伙伴要记住这种写法。

有些小伙伴就会问了：“如果是下图这样的结构，当 page1.html 想要引用 bird.jpg 这张图片，那么相对路径该怎么写呢？”

HTML图片路径的项目结构-3

由于此时 page1.html 与 bird.jpg 位于同一级目录中，也就是兄弟关系。正确的写法如下：

<img src="./bird.jpg">

2. page2.html 引用图片

HTML图片路径的项目结构-4

回到最初的项目结构（如上图所示），“page1.html 引用 bird.jpg” 跟 “page2.html引用 bird.jpg”，两者的绝对路径写法是一样的，如下所示。

<!--绝对路径-->
<img src="D:/web-test/imgs/bird.jpg">

实际上，只要你的图片没有移动到其他地方，所有页面引用该图片的绝对路径都是一样的。这个道理很简单，小伙伴们稍微想一下就懂了。

page2.html 位于 test 文件夹下，bird.jpg 位于 imgs 文件夹下，而 test 文件夹与 imgs 文件夹处于同一层目录（兄弟关系）。也就是说 bird.jpg 位于 page2.html 的上一级目录中的 imgs 文件夹下，因此 src 为 “../imgs/bird.jpg”。

<!--相对路径-->
<img src="../imgs/bird.jpg">

提示: “../” 表示选择上一级目录（即父级目录），小伙伴也要记住这种写法。

那么问题又来了，如果是下图这样的结构，当 page2.html 想要引用 bird.jpg 这张图片，此时相对路径应该怎么写呢？

图片路径的项目结构-5

由于此时 bird.jpg 与 test 文件夹位于同一级目录中，我们只需要找到 page2.html 的上一级，就可以找到 bird.jpg 了。正确的写法如下所示。

<!--相对路径-->
<img src="../bird.jpg">

最后需要强调一点：在实际开发中，站内文件不管是图片、超链接或其他文件等，我们都是使用相对路径，几乎不会使用绝对路径。

这是因为如果采用绝对路径，你网站文件一旦移动，则所有的路径都可能会失效。此外很多时候，开发工具（如 VSCode 等）可能会无法正确识别绝对路径，从而导致图片无法显示。

因此，小伙伴们只需要掌握相对路径，而绝对路径了解一下就行。

HTML 图片的常见问题

1. 为什么我使用绝对路径时，图片不能显示出来？

当使用绝对路径时，很多开发工具往往无法正确解析图片路径，因此图片就无法在网页中显示出来。在真实的网站开发中，对于图片路径或文件路径，我们大多数都是使用相对路径，而极少会使用绝对路径，除非是后端开发。

2. 对于图片或文件，可以使用中文名吗？

不建议使用中文，因为很多服务器是英文操作系统，对中文文件名的支持程度不怎么好。因此不管是图片还是文件夹，都建议使用英文名字。

3. 作为初学者，我老是忘记路径怎么写，该怎么办呢？

像 VSCode 等开发工具，当你编写路径时，都会有自动提示。大多数情况下，小伙伴们只需要借助开发工具的提示功能即可。

HTML 图片格式

在 HTML 中，图片格式可以分为 2 种：一种是 “位图”，另一种是 “矢量图”。

1. 位图

位图又叫做 “像素图”，它是由很多像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

最常见的位图格式有 3 种：JPG（或 JPEG）、PNG、GIF（可以从图片后缀名看出来）。我们有必要深入了解这 3 种图片的适用场合，这在实际开发工作中非常重要。

JPG 是一种可以提供优异图像质量的格式，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，JPG 格式体积较大，并且不支持透明。
PNG 是一种无损格式，可以无损压缩以保证页面打开速度。此外，PNG 格式体积较小，并且支持透明，但不适合存储颜色丰富的图片。
GIF 格式效果最差，但它适用于制作动画。你经常在社交软件上发的表情动图都是 GIF 格式的。

如果想要展示色彩丰富的高品质图片，可以使用 JPG 格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用 PNG 格式；如果是动画图片，可以使用 GIF 格式。

提示: 对于位图，可以使用 Photoshop 软件来处理。

示例 4：在 HTML 中使用位图

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { background-color:skyblue; }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt=""><br>
    <img src="imgs/bird.png" alt=""><br>
    <img src="imgs/bird.gif" alt="">
</body>
</html>

页面效果如下图所示。

HTML位图

分析：

body{background-color:skyblue;} 表示使用 CSS 为页面定义一个背景色，以便可以对比得出哪些图片是透明的，哪些不是透明的。这句代码看不懂不用管，等学了 CSS 教程自然就知道了。

从上面例子可以很直观地看出来：JPG 图片不支持透明，PNG 图片支持透明，而 GIF 图片可以做动画。

2. 矢量图

矢量图也叫做 “向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。

矢量图是一种基于数学方程实现的图片格式。举个例子，我们可以使用 y = kx 来绘制一条直线，当 k 取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。

矢量图的优点是：无论是放大、缩小，还是旋转等，都不会失真。它的缺点是：难以表现色彩丰富的图片效果（非常差）。

矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中 “.swf” 格式比较常见，它指的是 Flash 动画，其他几种格式的矢量图比较少见。下面几张图片都是一些矢量图。从这些图的视觉效果可以看出，矢量图和平常看到的位图有明显的区别。

HTML矢量图（山峰）

HTML矢量图（城市）

HTML矢量图（树木）

提示: 实际上，绿叶网的 LOGO 就是一张矢量图（.svg 格式）。

在网页中，矢量图使用也比较多，尤其是用于实现字体图标（iconfont）。不过作为初学者，我们只需简单了解一下即可。

最后总结一下位图和矢量图的区别，主要有以下 4 个方面。

位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
位图组成单位是 “像素”，而矢量图组成单位是 “数学向量”。
位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
常见的图片绝大多数都是位图，而不是矢量图。

HTML 图片格式的常见问题

1. 现在的前端开发工作，还需要用到切图吗？

在 Web 1.0 时代，切图是一种形象的说法，它指的是使用 Photoshop 把设计图切成一块一块的，然后再使用 Dreamweaver 拼接起来，从而合成一个网页。

到了 Web 2.0 以及 Web 3.0 时代，我们依旧有切图一说，只不过这种切图不再是以前那种方式。现在所说的切图不是将图片切片，而是一种设计思路。现在的切图，指的是我们前端工程师拿到 UI 设计师的图稿时，应该分析页面的布局，哪些用 CSS 实现，哪些用图片实现，而哪些用 CSS Spirit 实现等。

在 Web 2.0 时代，小伙伴仍然需要掌握 Photoshop 的一些基本操作。不过我们在开发页面时，就不应该使用 Web1.0 时代的 “拼图” 方式了。

2. 如果我从事前端开发，对于 Photoshop 要掌握到什么程度呢？

一个真正的前端工程师，需要能用 Photoshop 来进行基本的图片处理，例如图片切片、图片压缩、格式转换等。不过如果时间精力有限，我们不必太过于深入，掌握基本操作就完全够了。