今天继续学习：图片——网页的重要成员。一个成熟的网站，除了文字内容，还会有大量的图片展示，让我们的网站变得丰富多彩。比如前锋教育的官网，如果只有文字，网页会立刻失去表现力，显得单调。加上图片，画面立马变得生动具体，一图抵千言。我们可以使用图像标签img将图像插入网页。它是一个单一的标签，实际上是image的缩写。基本语法是回到编辑器新建image1.html页面文件，写一个图片单标签，在浏览器中运行，发现什么都没有发生。因为浏览器不知道打开哪张图片，所以需要告诉浏览器打开那张图片。也就是导入图片，需要src属性。src是source的缩写，这个词的意思是资源。这里的扩展意义是定义引用图片的资源路径。路径是一个文件或存放图片的地址。当前站点中有一张冰盾盾图片素材pic1，直接将冰盾盾图片名称pic1.png作为src属性的值，返回浏览器刷新页面，就会显示冰盾盾。注意不是所有的图片都可以写名字显示，还有图片引入路径的问题。路径是存储图像的位置。有两种类型的路径：相对路径和绝对路径。相对路径：根据文件和文件夹的关系确定文件搜索路径。绝对路径：从根目录开始，通过完整的路径定义来查找资源。根可以是网站域名，也可以是本地磁盘名。使用相对路径的情况有以下三种。1、当页面文件和图片文件在同一层时。可以省略路径，直接使用图片名称。与上述情况一致。2、当页面文件和图片所在文件夹在同一层时，需要定义路径。方法：先写图片所在文件夹的名称，然后用/表示进入文件夹，再搜索图片文件。新建image3.html在页面中创建图片标签，输入src属性值img/pic2.png在浏览器运行，出现雪容容图片，图片导入成功。3、页面所在文件夹与图片在同一层级时。这时候要找到图片的路径，就需要回到页面所在文件夹的上层，然后找到对应的图片文件。回到上层文件夹的方法是../回到编辑器，新建一个html文件夹在里面新建image4.html，在页面上新建一个image标签，在src属性里输入../value，然后写pic2.png在浏览器中运行，可以看到冰盾盾也显示成功了。举个例子：看这张图，如果小峰要和他的小伙伴一起玩1.如果小峰要带弟弟小元出去玩，因为他们在同一个房间，就相当于同一个文件夹，喊一下就可以找到小源，所以我们在同一个文件夹里搜索图片的时候，只需要写图片名就可以了。2.如果小枫想和小石一起玩，他需要走出家门，来到小石家。3.小枫如果想在国外和他的好朋友Siri一起玩，他得先走出家门，然后出国，出国，找到Siri，hisir！所以页面和图片在同一个文件夹下，不需要定义路径。页面引用子文件夹中的图片，路径搜索使用img/img2/img3。有多少层就写多少层。页面引用的外层文件夹中的图片，路径查找使用../../../，层数多少写多少。绝对路径，通过完整路径定义从根目录开始查找资源。很可能是网站域名，也可能是本地磁盘名。用于在多级目录中查找资源对于绝对路径的使用，有两种情况。1.引用互联网资源。然后2、参考本地磁盘镜像，可以找到本地资源，复制地址栏中的地址。放在src里面回忆一下上面的思考题，你能让小智找到sri吗？使用相对路径的答案是../../overseas/siri.png。如果使用绝对路径，可以直接做，/overseas/sri.png。没有考虑返回多少层目录的精神负担。从根目录开始，简单明了。这样就可以随意介绍自己想介绍的图片了！文章配套视频链接：006-图片标签初探_哔哩哔哩_bilibili
