整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
好程序員分享html圖片絕對(duì)路徑改相對(duì)路徑，要弄懂相對(duì)路徑修改成絕對(duì)路徑那么必須要知道路徑的基本概念。
html中的路徑：指文件存放的位置，在網(wǎng)頁中利用路徑可以引用文件，完成：插入圖像、視頻等功能。表示在html中路徑的使用方式有兩種：相對(duì)路徑，絕對(duì)路徑。
1、相對(duì)路徑：
html中的相對(duì)路徑的概念是：指當(dāng)前html頁面引用的文件 相對(duì)于 當(dāng)前html頁面文件的路徑，在html網(wǎng)頁開發(fā)過程中多采用這種方法來引用我們所想使用的內(nèi)容。
相對(duì)路徑有多種使用的方法，這些方法標(biāo)識(shí)表示的意義也不相同。那么接下來我們來看一下是如何使用的。
./ ：代表文件所在的目錄（通常情況下可以省略不寫）
../ ：代表文件所在的父級(jí)目錄（也就是上一級(jí)目錄）
../../ ：代表文件所在的父級(jí)目錄的父級(jí)目錄（也就是上一級(jí)上一級(jí)目錄）
/ ：代表文件所在的根目錄
如：<img src=’images/1.jpg’/>表示此代碼所在html文件的路徑下的images文件夾下的1.jpg文件。
<img src=’../images/1.jpg’/>表示此代碼所在html文件的路徑的上一級(jí)的images文件夾下的1.jpg文件。
2、絕對(duì)地址：
就是直接從磁盤的位置去定位文件的地址。類似于我們通過我的電腦一盤符的方式來尋找想要的指定內(nèi)容，或者說直接帶著協(xié)議、域名，
3、如何把html圖片絕對(duì)路徑改為相對(duì)路徑
可以使用html當(dāng)中給我們提供的<base/>標(biāo)簽來完成。<base> 標(biāo)簽為頁面上的所有路徑的引用設(shè)置了默認(rèn)地址或默認(rèn)目標(biāo)。 通常情況下，瀏覽器會(huì)從當(dāng)前文檔的 URL 中獲取到相應(yīng)的元素來填寫相對(duì)的引用路徑。
首先<base/>標(biāo)簽是一個(gè)單標(biāo)簽，同時(shí)所有的瀏覽器都支持 <base/>這一個(gè)標(biāo)簽標(biāo)簽所以兼容性上大家不用考慮。同時(shí)在使用<base/>標(biāo)簽的時(shí)候必須注意<base/>標(biāo)簽，必須放置到html網(wǎng)頁的<head></head>標(biāo)簽當(dāng)中，同時(shí)每一個(gè)html頁面當(dāng)中最多只能有一個(gè)<base/>標(biāo)簽，它的作用也很明顯。就是用來為html頁面上的所有路徑引用來規(guī)定默認(rèn)地址或默認(rèn)目標(biāo),是一種設(shè)置網(wǎng)頁中引用路徑的標(biāo)記。
剛才我們已經(jīng)在前面提到了 在html中常見的路徑形式有相對(duì)路徑和絕對(duì)路徑，那么在這個(gè)時(shí)候使用了<base/>標(biāo)簽指定了目標(biāo)的話，那么我們的用戶使用的客戶端瀏覽器就會(huì)把這個(gè)內(nèi)容解析成為當(dāng)前html中引用大的所有相對(duì)路徑，同時(shí)包括<a></a>超鏈接標(biāo)簽、<img/>圖片標(biāo)簽、<link>css引用標(biāo)簽、<form></form> 表單標(biāo)簽中的地址。也就是說，瀏覽器解析的時(shí)候會(huì)在引用的路徑的前面會(huì)自動(dòng)的加上<base/>上面綁定的地址，同時(shí)在這個(gè)時(shí)候頁面中的相對(duì)路徑也都會(huì)被轉(zhuǎn)換成為絕對(duì)路徑。
使用語法：
<head>
<base href="目標(biāo)路徑" />
</head>
計(jì)算機(jī)科學(xué)中，路徑是指向文件系統(tǒng)中某個(gè)位置的字符串。路徑可以是絕對(duì)的也可以是相對(duì)的。這篇文章將詳細(xì)解釋絕對(duì)路徑和相對(duì)路徑的區(qū)別，并通過例子來展示它們的使用。
絕對(duì)路徑是從文件系統(tǒng)的根目錄（在Windows系統(tǒng)中是驅(qū)動(dòng)器的根，如C:\，在UNIX系統(tǒng)中是/）開始的完整路徑。它包含了從根目錄到目標(biāo)文件或文件夾的所有目錄名，并以文件或文件夾名結(jié)束。
假設(shè)我們有一個(gè)位于Windows系統(tǒng)D盤的圖片文件，其路徑可能是：
D:\Photos\Holiday\beach.jpg
在UNIX系統(tǒng)中，如果有一個(gè)配置文件位于根目錄下的etc文件夾中，其路徑可能是：
/etc/nginx/nginx.conf
無論當(dāng)前位置在哪里，上述路徑都準(zhǔn)確指向了特定的文件。
相對(duì)路徑是相對(duì)于當(dāng)前工作目錄的路徑。它不是從根目錄開始，而是從當(dāng)前目錄開始描述如何到達(dá)目標(biāo)文件或文件夾。
假設(shè)當(dāng)前工作目錄是D:\Photos，要引用Holiday文件夾中的beach.jpg圖片，相對(duì)路徑將是：
Holiday\beach.jpg
如果需要引用同一級(jí)別目錄下的另一個(gè)文件夾中的文件，例如當(dāng)前工作目錄是D:\Photos\Holiday，要引用Work文件夾中的report.docx文件，相對(duì)路徑將使用..來表示上一級(jí)目錄：
..\Work\report.docx
在UNIX系統(tǒng)中，如果當(dāng)前工作目錄是/etc/nginx，要引用同一級(jí)別的apache2目錄下的apache2.conf文件，相對(duì)路徑將是：
../apache2/apache2.conf
在相對(duì)路徑中，有兩個(gè)特殊符號(hào)經(jīng)常使用：
使用這些符號(hào)，可以在文件系統(tǒng)中向上或向下導(dǎo)航。
在創(chuàng)建網(wǎng)頁時(shí)，鏈接到CSS文件、JavaScript文件、圖片或其他網(wǎng)頁通常需要使用路徑。使用絕對(duì)路徑或相對(duì)路徑取決于資源的位置和你的特定需求。
假設(shè)網(wǎng)站的根目錄結(jié)構(gòu)如下：
/ (根目錄)
|-- index.html
|-- about.html
|-- css
| |-- styles.css
|-- images
| |-- logo.png
|-- js
|-- scripts.js
如果在index.html中引用styles.css，相對(duì)路徑將是：
<link rel="stylesheet" type="text/css" href="css/styles.css">
如果在index.html中引用logo.png，相對(duì)路徑將是：
<img src="images/logo.png" alt="Logo">
如果網(wǎng)站的URL是http://www.example.com，那么引用logo.png的絕對(duì)路徑將是：
<img src="http://www.example.com/images/logo.png" alt="Logo">
絕對(duì)路徑和相對(duì)路徑都是定位文件系統(tǒng)中文件和文件夾的有效方式。絕對(duì)路徑提供了明確的位置，不依賴于當(dāng)前工作目錄，而相對(duì)路徑則更加靈活，可以簡化文件的鏈接，尤其是在網(wǎng)頁設(shè)計(jì)和軟件開發(fā)中。理解這兩種路徑的差異和應(yīng)用場(chǎng)景，對(duì)于任何與文件系統(tǒng)交互的活動(dòng)都是至關(guān)重要的。
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
無論種子散落在何處
都會(huì)長出一棵樹
向著天空，掙扎生長
- 2024.03.15 -
HTML圖片標(biāo)簽和超鏈接標(biāo)簽是網(wǎng)頁開發(fā)中常用的兩種標(biāo)簽，它們分別用于在網(wǎng)頁中插入圖片和創(chuàng)建超鏈接。
我們每天都在互聯(lián)網(wǎng)世界中與各種形式的信息打交道。你是否好奇過，當(dāng)你點(diǎn)擊一篇文章中的圖片或鏈接時(shí)，是什么神奇的力量讓你瞬間跳轉(zhuǎn)到另一個(gè)頁面？
今天，就讓我們一起揭開HTML圖片標(biāo)簽和超鏈接標(biāo)簽的神秘面紗。
HTML圖片標(biāo)簽是一種特殊的標(biāo)記，它可以讓網(wǎng)頁顯示圖像。通過使用圖片標(biāo)簽，我們可以在網(wǎng)頁上展示各種圖片，從而讓網(wǎng)頁更加生動(dòng)有趣。
1、語法結(jié)構(gòu)
HTML圖片標(biāo)簽的語法結(jié)構(gòu)非常簡單，只需要使用<img>標(biāo)簽，并在其中添加src屬性，指定圖片的路徑即可。
例如：
<img src="image.jpg" alt="描述圖片的文字">2、圖片格式
HTML支持多種圖片格式，包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點(diǎn)，可以根據(jù)需要選擇合適的格式。
3、圖片屬性
除了src屬性外，HTML圖片標(biāo)簽還有其他一些常用的屬性，如：
4、網(wǎng)絡(luò)圖片的插入
當(dāng)需要插入網(wǎng)絡(luò)上的圖片時(shí)，可以將圖片的URL地址作為src屬性的值。例如：
<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">5、本地圖片的插入
當(dāng)需要插入本地圖片時(shí)，可以將圖片的相對(duì)路徑或絕對(duì)路徑作為src屬性的值。
6、相對(duì)路徑與絕對(duì)路徑
在這里再給大家介紹兩個(gè)概念，相對(duì)路徑與絕對(duì)路徑，搞懂它們，我們?cè)诓迦氡镜貓D片時(shí)也能得心應(yīng)手。
相對(duì)路徑：
相對(duì)于當(dāng)前HTML文件所在目錄的路徑，包含Web的相對(duì)路徑（HTML中的相對(duì)目錄）。例如，如果圖片文件位于與HTML文件相同的目錄中，可以直接使用文件名作為路徑：
<img src="pic.jpg" alt="本地圖片">絕對(duì)路徑：
圖片文件在計(jì)算機(jī)上的完整路徑（URL和物理路徑）。例如：
<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">超鏈接標(biāo)簽是HTML中另一個(gè)重要的元素，它可以實(shí)現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)。通過使用超鏈接標(biāo)簽，我們可以將文本、圖片等內(nèi)容設(shè)置為可點(diǎn)擊的鏈接，方便用戶在不同頁面之間自由切換。
1、語法結(jié)構(gòu)
超鏈接標(biāo)簽使用<a>標(biāo)簽表示，需要在href屬性中指定鏈接的目標(biāo)地址。
<a href="目標(biāo)地址" title="標(biāo)題">文本內(nèi)容</a>例如：
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(wǎng)站</a>示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p>這是一個(gè)簡單的HTML頁面，用于展示一個(gè)網(wǎng)站的結(jié)構(gòu)和內(nèi)容。</p>
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(wǎng)站</a>
</body>
</html>2、鏈接目標(biāo)
超鏈接可以鏈接到不同的目標(biāo)，包括其他網(wǎng)頁、電子郵件地址、文件下載等。通過設(shè)置href屬性的值，可以實(shí)現(xiàn)不同的鏈接目標(biāo)。
3、鏈接屬性
超鏈接標(biāo)簽還有一些其他常用的屬性，如：
想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
4、錨點(diǎn)鏈接標(biāo)簽
錨點(diǎn)標(biāo)簽用于在網(wǎng)頁中創(chuàng)建一個(gè)可以點(diǎn)擊的錨點(diǎn)，以便用戶可以通過點(diǎn)擊錨點(diǎn)跳轉(zhuǎn)到頁面中的其他部分。
錨點(diǎn)標(biāo)簽的語法為：
<a name="錨點(diǎn)名稱"></a>例如，可以在頁面中的一個(gè)段落前添加一個(gè)錨點(diǎn)：
<a name="section1"></a>
<p>這是一個(gè)段落。</p>然后，可以在頁面的其他位置創(chuàng)建一個(gè)指向該錨點(diǎn)的超鏈接：
<a href="#section1">跳轉(zhuǎn)到第一節(jié)</a>當(dāng)用戶點(diǎn)擊“跳轉(zhuǎn)到第一節(jié)”鏈接時(shí)，頁面將滾動(dòng)到名為“section1”的錨點(diǎn)所在的位置。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來到云端源想！</h1>
<p><a href="#section1">跳轉(zhuǎn)到第一節(jié)</a></p>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
<a name="section1"></a>
<p>這是第一節(jié)的內(nèi)容。</p>
</body>
</html>HTML圖片標(biāo)簽和超鏈接標(biāo)簽是構(gòu)建網(wǎng)頁的兩個(gè)重要元素，它們不僅豐富了網(wǎng)頁的內(nèi)容，還為網(wǎng)頁添加了動(dòng)態(tài)和互動(dòng)性。
通過學(xué)習(xí)和掌握這兩個(gè)標(biāo)簽的使用方法，我們可以創(chuàng)建更加豐富和互動(dòng)的網(wǎng)頁，為用戶提供更好的瀏覽體驗(yàn)。無論是展示精美的圖片，還是實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)，HTML圖片標(biāo)簽和超鏈接標(biāo)簽都能幫助我們實(shí)現(xiàn)更多的創(chuàng)意和功能。
讓我們一起探索HTML的奇妙世界，創(chuàng)造出更加精彩的網(wǎng)頁吧！
我們下期再見！
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由：云端源想分享
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
