1. 图片标签
使用场景：在网页中显示图片
特点：
- 单标签
- 图片标签展示对应的效果，要借助其属性进行设置
<img src="" alt="">
标签的完整结构图：
注意点：
- 标签的属性写在开始标签内部，可以同时存在多个属性
- 属性之间用空格隔开，且没有顺序之分
- 标签名与属性之间必须用空格隔开
2. 属性
（1）src 属性：src 属性的属性值是目标图片的路径，当网页和目标图片在同一个文件夹时，直接写图片路径就可以了（包括图片后缀名），其它路径情况本文后边有写到。
<body>
<img src="./路.png">
</body>
（2）alt 属性：alt 属性的属性值是替换文本，当图片加载失败时就会显示 alt 的文本，图片加载成功则不会显示文本。
示例：如果不小心将下面这段代码的图片路径写错（代码中多了一层 test 文件夹），则会显示 alt 属性设置的文本
<body>
<img src="./test/路.png" alt="只要路是对的，就不害怕遥远">
</body>
（3）title 属性：title 的属性值是提示文本，当鼠标悬停时显示。值得注意的是，title 属性不仅可以用于图片标签，其他标签也可以使用。
<body>
<img src="路.png" alt="只要路是对的，就不害怕遥远" title="星光不负赶路人">
</body>
如上图所示，鼠标在图片上悬停时会显示 title 的属性值；如果图片加载失败，鼠标悬停在相应区域，提示文本也可以显示。
（4）width 和 height 属性：即宽度和高度，属性值是数字。如果只设置其中一个的值，另一个没设置的属性会自动等比例缩放，这时的图片不会变形；如果同时设置了两个属性的值，宽高设置不当可能会使图片变形，所以一般只设置一个。
下图中的两幅图片，第二幅加了高，明显变形：
<body>
<img src="态度.png" alt="替换文本" title="提示文本" width="120px">
<img src="态度.png" alt="替换文本" title="提示文本" width="300px" height="150px">
</body>
3. 绝对路径与相对路径
路径可分为绝对路径和相对路径，这两路径我一直分不清，容易搞混，直到今日再次翻开之前学习的笔记来看，忽然发现其实很容易区分。
3.1 绝对路径
绝对路径通常是从盘符开始的路径，可直接到达目标位置，如：
E:\前端\practice\态度.png 不过，不经常用。
<body>
<img src="E:\前端\practice\态度.png" alt="替换文本" title="提示文本" width="120px">
</body>
3.2 相对路径
相对路径是从当前文件开始出发寻找目标文件，相对路径又可以分为三类：同级目录、上级目录、下级目录。
（1）同级目录：当前文件（此处指 HTML 文件）和目标文件（此处是指图片路径）在同一目录中。有两种写法，任选一种即可，我更热衷于第二种，因为直接敲./后，编辑器会自动提示同级目录中有哪些文件，方便选择，还不容易出错。
（2）上级目录：目标文件在上级目录中，如下图：目标文件（正能量.jpg）与当前文件的上一级目录（ index ）平齐
直接使用快捷方式../后，会自动提示上级目录下的所有文件：
（3）下级目录：目标文件在下级目录中，如下图：当前文件（ 图片标签.html ）与 images 文件夹平齐，而目标文件（ 梦想.jpg ）在 images 文件夹下
同样有两种方式，一种是从同级目录开始一层层往下找，若目录结构复杂就比较麻烦了，耗时较长，当然，如果同级目录找对，后边也会有提示的，实际操作中怎么方便怎么来，只不过个人比较倾向于另一种；
<img src="images/梦想.jpg" alt="替换文本" title="提示文本" width="120px">
另外一种是直接敲./后，根据提示选择目标文件
<img src="./images/梦想.jpg" alt="替换文本" title="提示文本" width="120px">
