0
点赞
收藏
分享

微信扫一扫

绝对路径和相对路径的介绍

天使魔鬼 2022-04-19 阅读 101
html5html

路径介绍

        使用场景:页面需要加载图片,需要先找到对应的图片

        路径分为:

                    绝对路径

                    相对路径

            绝对路径(了解):指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径

                例如:

                            盘符开头:D:HTML5\images\1.jpg

                            完整的网络地址:https://www.baidu.com/

            相对路径(常用):从当前文件开始出发找目标文件的过程

            相对路径分类:

                相对路径-同级目录  <img src="盘符:/文件名或 文件夹/文件名" alt=""> <img src="盘符:./文件名或 文件夹/文件名" alt="">

                相对路径-下级目录  <img src="文件名或 文件夹/文件名" alt="">

                相对路径-上级目录  <img src="../文件名或 文件夹/文件名" alt="">

        例题:

    <p>绝对路径</p>
    <img src="Z:/HTML5/images/咒术回战.jpg" title="盘符开头">
    <img src="https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png" title="完整的网络地址">
    <p>相对路径-同级目录</p>
    <img src="进击的巨人.png" title="第一种写法">
    <img src="./进击的巨人.png" title="第二种写法">
    <p>相对路径-下级目录</p>
    <img src="images/弥豆子.jpg" alt="">
    <p>相对路径-上级目录</p>
    <img src="../国王排名.png" alt="">

        效果图:


举报

相关推荐

0 条评论