前端基础-html-路径的介绍

<!--

        路径的介绍

        场景：页面需要加载图片，需要先找到对应的图片

        类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到

        同理：页面需要找到图片，也是需要通过路径才能找到

        路径可分为：

                绝对路径（了解）

                相对路径（常用）

        绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

        例如：

        盘符开头：D:\day01\images\1.jpg

        完整的网络地址：https://wwww.itcast.cn/2018czgw/images/logo.gif

        相对路径：

        概念普及：

           当前文件：当前的html网页

           目标文件：要找到的图片

        相对路径：从当前文件开始出发，找目标文件的过程

        相对路径分类：

            同级目录

            同级目录：当前文件和目标文件在同一目录中

            代码步骤：

            方法一：<img src="目标图片.gif" alt="">

            方法二：<img src="./目标图片.gif" alt="">

            下级目录

            下级目录：目标文件在下级目录中

            代码步骤：

            1.先知道在那个文件夹里面-文件夹名字

            2.进入这个文件夹 /

            3.此时看到目标文件直接喊他-直接写目标文件名字

            <img src="文件夹名字/目标图片.gif" alt="">

            上级目录

            上级目录：目标文件在上级目录

            代码步骤：

            1.先出当前文件夹，岛上一级目录：../

            2.此时看到目标文件直接喊他-直接写目标文件

            <img src="../目标图片.gif" alt="">

            如果目标图片在上级文件夹中则

            <img src="../文件夹名称/目标图片.gif" alt="">

     -->

     <!-- 绝对路径 -->

     <img src="F:\VSCODE\html内容\6.dog.gif" alt="">

     <!-- 相对路径 -->

     <img src="./6.dog.gif" alt="">