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

在《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的圖片，如圖：

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

總結一下：

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

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

今天的內容結束了。

最后請大家思考一個問題，為什么多個<p></p>標簽中的內容會自動換行，而多個<img>標簽卻并排顯示而不會換行呢？這個問題我們會在后面的講解中給出答案！

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

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

、內聯框架標簽

HTML的內聯框架元素<iframe>標簽可以將其他的HTML頁面嵌入到當前頁面中。

內聯框架的代碼結構：

<a href="www.abc.com" target="iframe"></a>

<iframe src="" srcdoc="" frameborder="0" name="iframe"></iframe>

• src 表示被嵌套的URL地址；
• srcdoc 該屬性可以是一段html代碼，這些代碼會被渲染到iframe中展示最終的樣式。
• name 與標簽和<form>標簽的target屬性可以配合使用，當點擊對應的標簽按鈕時，可以跳轉到點擊的標簽的URL地址。

拓展：使用iframe可以實現一個后臺管理系統的菜單導航。

二、CSS基礎語法

1.什么是CSS？

CSS全稱：Cascading Style Sheets，中文名稱叫層疊樣式表。它是用來表示HTML、XML等文件 樣式的計算機語言。

2.CSS相關術語：

CSS的規則由兩個部分組成：

• 選擇器：由html元素構成；
• 聲明塊：由一對“{…}”包裹的名、值對。

例如：

<style>

/* 聲明塊中的每一個名、值對，叫一個“樣式聲明” */

h1 {

    /* 前景色 */

    color: green;

    font-weight: 200;

}

</style>

<header class="page-header">

    <h1 id="page-title" class="title" style="color: green;">Web全棧開發入門課程</h1>

    <h2 id="page-title">大家晚上好，我是Hello World！</h2>

</header>

效果如下：

在Chrome瀏覽器中，通過F12打開控制臺工具，通過選擇工具選中h1標簽，我們可以看到一個元素的樣式會受到四個級別的影響：

• 繼承的：根據元素在文檔的結構和層級關系來確定它的最終樣式；
• 瀏覽器客戶端：用戶代理樣式（user agent style），基本上瀏覽器的表現樣式都是一致的；
• 用戶自定義：寫在HTML文檔<style>標簽中的樣式；
• 行內樣式（內聯樣式）：寫在元素的style屬性中的樣式。

3.CSS層疊與優先級

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS層疊與優先級</title>

    <!-- 如果CSS樣式僅僅用來控制當前頁面的元素，我們就用style標簽寫在當前頁面中。 -->

    <style>

        /* CSS（Cascading Style Sheets）：層疊樣式表 */

        /* 1.標簽選擇器 */

        h1 {

            color: green;

        }

        /* 2.屬性選擇器 */

        /* *：表示所有元素（標簽） */

        *[class="title"] {

            color: hotpink;

        }

        h1[class="title"] {

            color: indigo;

        }

        h2[class="title"] {

            color: mediumslateblue;

        }

        /* 3.類選擇器 */

        /* .title {

            color: lawngreen;

        } */

        /* 4.id選擇器 */

        /* #page-title {

            color: lightseagreen;

        } */

        /* 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 */

    </style>

</head>

<body>

    <header class="page-header">

        <h1 id="page-title" class="title">Web全棧開發入門課程</h1>

        <h2 id="page-title" class="title">大家晚上好，我是Hello World！</h2>

    </header>

</body>

</html>

效果圖：

由上述例子可以看出CSS的優先級是：

標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式

其中行內元素的優先級別是最高的，這點是需要注意的，其實這個優先級從控制臺也是能看出來的，如下圖：

通過學習CSS的基礎知識，我發現還是有好多屬性需要去記，這個內容實在是太多了，還是需要多寫，多練才可以熟能生巧。

TML元素的屬性

屬性是為HTML元素提供的附加信息。

為相同的HTML元素指定不同的屬性，會呈現不同的功能或效果。

舉個例子：

比如我們在上一篇中練習過的<a></a>標簽構成的超鏈接元素中有一個href屬性，這個屬性指定的是點擊后跳轉的頁面地址，相同的<a>標簽改變href屬性就能跳轉不同的頁面。例如

<a href="https://www.bilibili.com/read/cv2720755">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為href屬性不同，打開的頁面也不同。-->

小伙伴們自己寫的時候要注意使用半角符號，不然不能正確打開鏈接。

超鏈接元素中還有一個控制鏈接頁面打開的屬性叫做target，是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為target屬性不同，打開的頁面所在窗口不同。-->

測試后，target="_blank"時，新頁面在測試頁面窗口旁邊新建一個窗口打開。

target="_parent"時，新頁面在原有測試頁面窗口中打開。

如圖所示：

左邊為_blank,右邊為_parent,點擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：

點擊右側

新頁面在原窗口處打開。

<a>標簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測試。

一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個屬性會在CSS的講解中詳細學習。

下面我們通過練習來看看title屬性的作用。

HTML元素屬性使用練習1

NO.1: title

title屬性用于顯示元素的額外信息使用。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國最先進戰斗機">殲-20戰斗機</a>
</body> 
</html>

效果如圖：當鼠標移動到超鏈接上時，"中國最先進戰斗機"的說明就出現在下側。

NO.2:href/src/url

這三個屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。

例如<a>標簽中指定鏈接路徑使用的是href，而<img>標簽中導入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習大家可以翻看《HTML中的元素使用方法2——零基礎自學網頁制作》一文。

這里要介紹的是關于網頁中的路徑的兩個重要概念：絕對路徑、相對路徑。

絕對路徑是指文件在硬盤上真正存在的路徑。

相對路徑就是相對自己的目標文件的位置。

怎么理解這兩個概念呢？舉個例子：

如果我們要在"第一個頁面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎自學網頁制作"這個文件夾中。如圖：

如果用絕對路徑導入寫法是這樣的：

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/>

相對路徑這樣寫：

<img src="image1.jpg"/>

大家觀察一下，也看出了絕對路徑與相對路徑的區別了。

另外，這樣的鏈接也屬于絕對路徑：href="https://www.bilibili.com/read/cv2720755"

那么什么時候使用相對路徑什么時候使用絕對路徑呢？這個問題我會在明天深入為大家講解，這涉及到網頁或網站上傳服務器的問題。

做教程確實是沒什么人看，但是我依然會堅持，我是一名高校教師（認證資料等疫情結束后去辦公室拍攝上傳吧），把自己的知識寫出來對自己來說是一個提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對完全沒有基礎的網頁制作學習者，利用碎片時間學習，只要我們堅持，必然可以完成網頁制作的學習，為未來學習更加復雜的內容打下基礎！

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作