引入：
Hello！，各位编程猿们！我们知道在网页文档中合理地加入图像，会使文档变得更加生动活泼和引人入胜，而且看上去更加专业、更具有信息性且易于浏览。本期主要介绍图像标签以及超链接标签
一、设置图像标签
网页中的图像使用<img/>标签插入：
<img src="图像文件路径"/>
属性介绍
1).src
指定图像文件路径
2).alt
指定图像替换信息
3)title
指定图像提示信息
4)width
定义图像的宽度
5)height
定义图像的高度
代码演示
我们先在上一篇文章里随机点击一张图片，右击复制图片链接粘贴在图像标签的src属性的后面
运行出来就是一张图片
当然，我们还可以设置图片的提示信息以及替换信息。title属性是设置图片的提示信息，当运行出来鼠标移动到图片时就会弹出该信息。alt属性是设置图片的替换信息，比如当网络错误或者内容被屏蔽等原因无法加载图像时，浏览器会在页面上显示alt属性中的备用文本
这边我就不展示运行效果了，大家在学习的过程中可以多敲敲代码，去看看运行效果
注意：
ｐx是像素（Pixel）的缩写，通常用于表示数字图像中的图像尺寸或分辨率。它主要用于计算机屏幕媒体，不太适用移动设备
二、不同路径的介绍
引入：
用图片链接来访问图片的方式虽然方便，但是也有个弊端，比如当没有网络或者网络不好的时候图片可能加载不出来，又或者文章的作者把图片删除也会访问不出来，那么我们还有什么方式打开图片呢？
第一步：把图片另存为到工程目录放在同一个文件夹
我们先右击图片，另存为到桌面
- 这里使用快捷键:Ctrl+O,就可以快速弹出工程目录的文件夹
将桌面上我们另存为的图片剪切到文件夹里
第二步:把我们原先的图片链接改成图片的名称
运行一下结果，我们会发现和图片链接访问出来的页面一模一样
接下来我们来总结一下不同路径的区别
1.物理路径
我们直接点击图片右击复制路径
这个路径就是属于物理路径
最好不要用物理路径，如果换一台电脑可能运行不出来，出发这一台电脑刚好有这个目录的路径
2.绝对路径
绝对路径是网页上的文档
3.相对路径
相对路径是相对于当前文档的路径。相对路径没有盘符，通常以当前的HTML网页文档为参照，通过层级关系描述目标图像的位置。
（1）图像和HTML文档位于同一个文件夹：
设置相对路径时，只需输入文件夹名和图像名即可。
(2)./:代表要展示的文件/图片和当前html文件在同一个目录下面
利用Ctrl+O让工程目录的文件弹出来，放一张照片进去
这里使用./加图片名称
我们发现图片是可以显示出来的
(3)../:代表要展示的文件/图片和当前html文件的上一级目录下面
在工程目录的文件夹的上一级的目录中，我们也放一张照片进去
- 注意这里我们要使用../加图片名称
这时候，我们可以看到图片也是可以正常访问的
(4)/:代表当前工程目录的根目录
在工程目录的文件夹中重新创建一个文件夹，里面存放第一张图片1.png
这时候我们发现，由于图片改变了位置，所以我们无法成功访问
这时候我们在原来的代码的前面应该要加上/img(图片文件夹的名称)
这样我们的照片就可以访问成功了
接着再思考一下我们在项目目录的上一级创建一个文件夹jpng把第2张图片2.jpeg放进去
发现图片2无法访问
这时候我们在原来的图片2名称前面加上../jpng(文件夹名称)
运行结果，图片正常访问
好啦！这期的图像标签以及不同路径的介绍，你学会了嘛，快来动手试试吧！！！下一期会给大家讲解超链接标签，实现各种页面的跳转，是不是很期待呢！如果你喜欢这篇文章，不要忘记点赞收藏加关注哦！！！