HTML元素中的屬性2(路徑詳解)——零基礎自學網頁製作

大魚與數字藝術 發佈 2020-02-03T16:34:27+00:00

——零基礎自學網頁製作初識meta標籤與SEO——零基礎自學網頁製作HTML中的元素使用方法1——零基礎自學網頁製作HTML中的元素使用方法2——零基礎自學網頁製作HTML元素中的屬性1——零基礎自學網頁製作相對路徑與絕對路徑的使用方法在《HTML元素中的屬性1——零基礎自學網頁

目錄

相對路徑與絕對路徑的使用方法

在《HTML元素中的屬性1——零基礎自學網頁製作》這一篇教程最後內容中,我們詳細展示了「絕對路徑」與「相對路徑」在寫法上的區別。示例代碼如下:

<img src="file:///D:/零基礎自學網頁製作/image1.jpg"/><!--絕對路徑-->
<img src="image1.jpg"/><!--相對路徑-->

那什麼時候使用「相對路徑」什麼時候使用「絕對路徑」呢?

搞清楚這個問題就要介紹一下網頁製作的最後一步,上傳伺服器的過程與要求。

我們所有的可以通過網絡在瀏覽器上顯示的頁面都是存儲在網絡伺服器中的文件。

網絡伺服器是什麼?大家可以理解為一台電腦,和我們使用的個人計算機在構造上差不多,但是功能更加強大、穩定。因此伺服器的價格相比個人電腦更加昂貴,可靠性也要更高。

如果我們的網頁或網站的製作完成後,需要去找一個網絡伺服器或是網絡伺服器中的部分內存(也可以自己搭建簡單伺服器用來測試),之後會給我們相關的帳號,我們自己設置密碼後,使用ftp工具上傳到網絡伺服器中,然後給我們分配一個臨時的域名用來測試網站。這樣我們就可以使用手機或電腦通過瀏覽器在線打開自己的頁面了。這是筆者做過的一個全景展館頁面----在線齊越教育館(http://qiyueehibitionhall.gz01.bdysite.com/indexWeiXin.html)。

那頁面或網站如何上傳呢?

還記得最開始我們建立的那個「零基礎自學網頁製作」文件夾嗎?簡單來說通過把這個文件夾上傳就可以了,把裡面「第一個頁面.html」改成「index.html」這個頁面就變成了我們的主頁。

如果,這個頁面中的所有路徑都是使用絕對路徑寫的,這時問題就來了,

<img src="file:///D:/零基礎自學網頁製作/image1.jpg"/><!--絕對路徑-->

頁面及其所在文件夾在我的電腦上是在D盤,我上傳伺服器之後,文件就不一定還在伺服器的D盤上,也許是在伺服器的F盤呢?或者把文件發給同事,同事接收後在C盤上打開,絕對路徑是不是就不能指示正確的位置了?因此頁面就不能正確的找到相應信息了。

為了解決因為上傳伺服器或者換電腦而不能正確找到資源路徑的問題,相對路徑的概念就產生了,相對路徑是不管你在哪個磁碟上,它只是遵循資源與頁面文件的相對位置,只要文件夾中的相對位置沒變,無論你把文件夾搬運到天涯海角,頁面依然可以循著路徑找到相關信息。

<img src="image1.jpg"/><!--相對路徑-->

下面為家具體展示一下相對路徑的寫法以及頁面文件與路徑指定文件的位置關係。

<img src="image1.jpg"/><!--相對路徑-->

這句代碼指的是頁面文件「第一個頁面.html」與圖片「image1.jpg」在一個文件夾中。如圖所示:


如果,圖片比較多,我們建立一個叫做「img」的文件夾來專門存放圖片,那代碼該怎麼寫呢?

如圖所示:

打開文件夾,裡面有一張圖片「image2.jpg」。如圖:


下面我們把這個文件召喚出來!

代碼示例:

<img src="image1.jpg"/><!--相對路徑-->
<img src="img/image2.jpg"/><!--相對路徑-->

效果如下:兩張圖片都進來了。

那如果我們圖片種類比較多,在img文件夾內部也要分文件夾,導入不同文件夾中的方法相信大家已經猜到了。圖片分類如下:

代碼如下:

<img src="image1.jpg"/><!--相對路徑-->
<img src="img/辦公室/image2.jpg"/><!--相對路徑-->
<img src="img/戰鬥機/image3.jpg"/><!--相對路徑-->

效果如圖:

大家發現書寫規律沒有?

相對於絕對路徑來說,相對路徑只需要寫工程文件夾(將要上傳伺服器並且包含頁面或網站所有內容的文件夾)內部的路徑就可以了。這裡「零基礎自學網頁製作」文件夾可以看做是工程文件夾。因此,包括「零基礎自學網頁製作」文件夾,以及以前的路徑信息在「相對路徑中」都不需要寫出。如圖:紅框以內的都不用寫了。

那什麼時候使用絕對路徑呢?一般情況下,在需要引入其他網站的圖片或頁面或其他信息時使用絕對路徑!

示例代碼如下:

<img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

這樣我們就通過訪問百度百科的地址在自己的頁面中打開了殲20的圖片,如圖:


這樣做的好處是可以節省自己伺服器的空間,減小工程文件夾的體積。

總結一下:

在頁面中顯示工程文件夾內的資源或信息使用「相對路徑」,不使用「絕對路徑」。

在頁面中顯示其他網站的資源或信息使用「絕對路徑」,不使用「相對路徑」。

今天的內容結束了。

疫情期間,請大家少出門,不聚會,沒事在家學學網頁製作,即抗擊疫情又提高自己!

喜歡的小夥伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

下一篇繼續為大家介紹常用元素的使用方法。

關鍵字: