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

在《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>標簽實現文本內鏈接——零基礎自學網頁制作

著移動設備的普及，響應式網站已經成為了現代網頁設計的標配。響應式網站可以自動適應不同設備的屏幕大小，提供更好的用戶體驗。如果你想學習如何制作響應式網站，下面是一些簡單的步驟和技巧，幫助你開始這個過程。

一、計劃和設計

在制作響應式網站之前，你需要先進行計劃和設計。你可以先確定你的網站主要的布局和功能，然后細化到不同設備的屏幕大小。考慮到不同設備的視覺和交互需求，你可以使用流式布局、媒體查詢、彈性圖片和自適應字體等技術來實現響應式設計。

二、使用流式布局

流式布局是指網頁的布局隨著屏幕大小的變化而自動調整。你可以使用百分比單位來設置元素的寬度和間距，而不是固定像素值。這樣，當屏幕的大小改變時，元素的大小和布局也會自動適應。

三、使用媒體查詢

媒體查詢是一種CSS3的功能，可以根據設備的特性來應用不同的樣式。你可以使用媒體查詢來設置不同屏幕大小下的元素樣式，如字體大小、圖片大小、列數等。通過媒體查詢，你可以為不同設備提供最佳的顯示效果。

四、彈性圖片

在響應式網站中，圖片也需要自適應屏幕大小。你可以使用CSS3的max-width屬性來限制圖片的最大寬度，使其在小屏幕上不會溢出。同時，你也可以使用srcset屬性來為不同屏幕大小提供不同分辨率的圖片，以提高加載速度和顯示質量。

五、自適應字體

字體大小在不同屏幕大小下也需要自適應。你可以使用CSS3的rem單位來設置字體大小，它相對于根元素的字體大小。通過設置根元素的字體大小和使用rem單位，你可以讓字體在不同屏幕大小下按比例自動調整。

六、測試和優化

制作響應式網站后，你需要在不同設備和瀏覽器上進行測試，以確保它能夠在各種情況下正常顯示和操作。你可以使用瀏覽器的開發者工具來模擬不同設備的屏幕大小和觸摸操作。同時，你也可以利用一些在線工具和服務來測試網站的響應式性能和兼容性。

七、使用示例

家好，我是 Echa。

前段時間，老鐵們私信我有么有又免費又好用的在線代碼編輯器，最近找了找。終于找到了。給老鐵們安排上。創作不易，喜歡的老鐵們轉發加個關注，點個贊，速速收藏，謝謝！

今天來推薦六個好用又免費的在線代碼編輯器！

CodeSandbox

在線地址：https://codesandbox.io/

CodeSandbox 是一個在線代碼編輯器，主要用于創建 Web 應用項目，其提供了多種模塊：

CodeSandbox 為前端開發提供了完整的代碼編輯器體驗和沙盒環境。其包含了很多實用功能：

• Npm 支持：可以添加幾乎任何 npm 上可用的包；
• 支持 TypeScript、熱更新、GitHub 導出、靜態文件托管等；
• 使用 Monaco 編輯器構建，Monaco 是為 VSCode 的提供支持的代碼編輯器，有很多相似的體驗；
• 集成的 DevTools、linting、錯誤覆蓋、測試框架 (Jest)等；
• 強大的 CLI 可以直接將本地項目導入 CodeSandbox。

Codepen

在線地址：https://codepen.io/

CodePen 是一個在線的HTML、CSS 和 JavaScript 代碼編輯器，能夠編寫代碼并即時預覽效果，可以利用它來構建和分享代碼。CodePen 支持使用 Less、Sass、PostCSS 等來編寫CSS。CodePen 不僅是一個在線編輯器，還是一個龐大的前端社區，上面有來自全球開發者分享的各種各樣炫酷的效果，并且這些代碼都是開源和共享的。

Stackblitz

在線地址：https://stackblitz.com/

Stackblitz 和 VSCode 非常像，使用簡單可以一鍵創建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等項目：

Stackblitz 具有以下特性：

• 在瀏覽器中集成了一個 Dev Server，在離線的情況下仍然可以進行開發；
• 除了支持前端項目外，還支持在瀏覽器中運行 Node.js 環境；
• 支持連接 GIthub 倉庫，可以直接將代碼 push 到 Github 上，也可以拉取 Github 項目進行查看和編輯；
• 所有應用程序都會自動部署在其服務器上。

JSFiddle

在線地址：http://jsfiddle.net/

JSFiddle 是一個在線代碼編輯器，允許用戶在單個頁面上編輯和運行 HTML、JavaScript 和 CSS 代碼。JSFiddle 使用 CodeMirror 構建，其提供了多游標、語法高亮、語法驗證（linter）、大括號匹配、自動縮進、自動完成、代碼/文本折疊、搜索和替換以協助開發人員的操作。JSFiddle 被廣泛用于共享簡單的測試和演示。

JS Bin

在線地址：https://jsbin.com/

JS Bin 是一個開源的協同 web 開發調試工具。主要用于幫助測試 JavaScript 和 CSS 的代碼片段，功能與 jsFiddle 類似。可以實時分享在 JS Bin 中輸入的內容，在任何平臺上的任何設備上查看 JS Bin 的輸出，都是實時更新的。

碼上掘金

在線地址：https://code.juejin.cn/

碼上掘金是一個為廣大開發者提供代碼在線 Playground 的平臺，具備輕量簡單、易使用、現代標準、模塊化、實時編輯，所見即所得等特性。內置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。