共计 1587 个字符，预计需要花费 4 分钟才能阅读完成。
明天持续学：图片——网页中重要的一员。
一个成熟的网站，除了有文本内容，还会有大量的图片展现，好让咱们的网站变得丰富多彩。例如千锋教育官网，如果只有文字，网页立即就失去了表现力，显得单调乏味，当增加了图片之后，画面立即就变得活泼具体形象，一图胜千言。
咱们能够应用图片标签 img，来给网页插入一张图片，它是一个单标签 实际上是 image 的简写 根本语法是 <img src="图片门路" />
回到编辑器中, 新建一个 image1.html 页面文件，书写一个图片单标签 <img src=""> ，在浏览器中运行，发现什么都没有产生。因为浏览器不晓得要关上哪张图片，须要通知浏览器要关上那张图片。也就是引入图片，这就须要 src 属性，src 是 source 的简写，词义就是资源，在这里引申的意思是定义援用图片的资源门路，门路就是文件或者是图片存储的一个地址。
在以后站点中，有一个冰墩墩 pic1 的图片素材，间接把冰墩墩图片的名字 pic1.png 作为 src 属性的值，回到浏览器刷新页面，冰墩墩就显示进去了。留神并不是所有的图片写上名字都能显示进去，还有图片引入的门路问题。
门路，就是图片存储的地位，门路能够分为两种：相对路径和绝对路径。
相对路径：是依据文件和文件夹之间的关系，来确定文件查找路径。
绝对路径：是从根目录开始通过残缺的门路定义来查找资源，根能够是一个网站域名，也能够是一个本地磁盘名。
相对路径的应用有三种状况。
1、当页面文件与图片文件是同级关系。能够省去门路，间接应用图片的名称。和上述情况统一。
2、当页面文件与图片所在的文件夹是同级关系时，须要定义门路。
办法：首先写入图片所在的文件夹名称，而后通过 / 示意进入到文件夹内，而后再去查找图片文件。
新建一个 image3.html 在页面中创立一个图片标签，输出 src 属性值 img/pic2.png 在浏览器中运行，雪容融图片呈现了，图片引入胜利。
3、当页面所在的文件夹和图片是同级关系时。
此时查找图片的门路 则须要先回到页面所在的文件夹的上一级 而后再去查找对应的图片文件 返回文件夹上一级的办法就是 ../
回到编辑器，新建一个 html 文件夹 在外面新建一个 image4.html 在页面中创立一个图片标签 在 src 属性值里输出 ../ 接着写入 pic2.png 在浏览器中运行，能看到冰墩墩也胜利显示了。
来举个例子：
看这个地图
如果小锋要去找他的敌人们玩
1、如果小锋想要带着他的弟弟小源出去玩，因为他们在同一个屋子，也就相当于同一个文件夹，只须要喊一声，就能找到小源了，所以咱们查找同一文件夹下的图片，只须要写图片名就能够。
2、如果小锋要去找小狮玩
那就须要走出本人的家，来到小狮的家。
3、如果小锋想去找国外的好敌人 siri 玩
他得先走出本人的家，而后出国，去到海内，找到 siri，hi sir！
所以，页面和图片在同一文件夹，不须要定义门路。页面援用子文件夹里的图片，门路查找应用 img/img2/img3。有几层就写几个。页面援用的外层的文件夹里的图片，门路查找应用../../../，有几层就写几个。
绝对路径，从根目录开始通过残缺的门路定义来查找资源的。很可能是一个网站域名，也可能是本地磁盘名。对于多层目录查找资源很有用
对于绝对路径的应用，有两种状况。
1、援用互联网资源。那 <img src= 在此间接输出互联网地址 >
2、援用本地磁盘图片，能够找到本地资源，在地址栏里复制地址。放在 src 里 <img src="这里间接输出本地资源的地址，间接拷贝全副物理门路">
回忆下面的思考题，你能让小智找到 sri 吗？应用相对路径的答案是 ../../ 海内 /siri.png，如果应用绝对路径，间接能够，/ 海内 /sri.png，不存在思考返回多少层目录的心智累赘，从根目录开始，简略清晰。
这样就能够自在的引入你想要引入的图片了！
文章配套视频链接：006- 图片标签初探_哔哩哔哩_bilibili