1. 任务背景
HTML号称：超文本传输语言。所谓“超”着，超级、超越的意思。
但是之前咱们所讲的，不论是标题还是段落，都是文本，完全没提现出“超”的意思来。
本节，咱们就往下HTML中添加图像，开始展示超文本的内容。
2. 任务目标
学习图像标签的使用。
3. 相关知识点
图像标签是<img>，作用是在网页上显示图片。
通过图像标签的属性src来指定图像标签加载的文件。
通过图像标签的属性alt来指定图片文件不存在时的替换文本。
4. 任务实操
4.1 显示一张图片
图片没法用文字描述，很难把图片放到img标签的内容部分。
但是图片一般是一个文件，我们可以通过图片标签的属性，指定加载的图片文件名。
首先将图片文件1.jpg和我们的网页hello.html放到一个文件下，然后编写代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图像实例</title>
<meta charset="utf-8">
</head>
<body>
<p>
显示一个图片
<img src="1.jpg">
</p>
</body>
</html>
当浏览器在处理到img标签时，发现该标签src属性的值为1.jpg，所以该标签就会加载该图片文件。
所以效果如下：
4.2 图片的可替换文本
有时候图片不小心丢失了，当然一般情况下是不会发生的，但是如果发生了，则图片无法正常显示，效果如下：
这样看起来就不是很友好了，此时我们可以给图片添加一个可替换文本，当图片不能正常显示时，可以显示一段文本内容替换。
<p>
显示一个图片
<img src="1.jpg" alt="java图片">
</p>
其实效果也不是很好，所以还是尽量要保证图片是正确的、存在的。
4.3 将图片放入文件夹
如果图片比较多，那么图片都跟网页混在一起，会很杂乱。
我们可以建立一个images文件夹下，将1.jpg放入其中，此时hello.html与images处于同一目录。所以代码更改为：
<p>
显示一个图片
<img src="./images/1.jpg">
</p>
解释下，./表示当前目录，然后./images/表示当前目录的images文件夹下，最后./images/1.jpg就表示跟当前网页同目录的images文件夹下的1.jpg文件。
另外，当访问当前目录的时候，可以省略./，所以上述写法等同于：
<img src="images/1.jpg">
5. 任务总结
本篇讲述了如何在网页上显示图像，以及如何加载文件夹下的图像。
其实还可以加载当前文件上层目录下的图片，使用的语法为../，..就表示当前文件所在目录的上级目录。
这个比较复杂，暂时不需要大家掌握，感兴趣的同学可以自行去尝试。