前端基础-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="">
?
總結
以上是生活随笔為你收集整理的前端基础-html-路径的介绍的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第十一回:琴房外度曲生慕意 书店里软语救
- 下一篇: Rust初步(三):使用atom搭配ra