資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 a-href 標籤返回上一級資料夾？
有時，任務是從子資料夾中獲取頁面，然後返回父資料夾中的頁面。本文使用 HTML 程式碼演示了使用 <a> 標籤和 href 標籤提供返回上一級資料夾連結的過程。這透過兩個不同的示例來說明。第一個示例使用具有相對路徑的文字連結返回父資料夾的頁面。第二個示例使用帶有 SVG 連結的 <a> 標籤返回上一級資料夾。在這個第二個示例中，使用了絕對路徑。
示例 1：使用具有相對路徑的文字連結返回父資料夾中的頁面
資料夾和頁面設計步驟 −
步驟 1 − 建立一個名為 FolderRef 的資料夾。這將被稱為父資料夾。
步驟 2 − 在 FolderRef 內建立一個名為 FolderOne 的資料夾。這將被稱為子資料夾。
步驟 3 − 在 FoderRef 內建立一個 html 檔案。將檔案命名為 parentFolderFile。
步驟 4 − 在 FoderOne 內建立一個 html 檔案。將檔案命名為 subFolderFile。在錨點標籤內的 href 中使用相對路徑。
步驟 5 − 編寫 parentFolderFile 和 subFolderFile 中的 HTML 程式碼，如下所示。
步驟 6 − 在瀏覽器中開啟 parentFolderFile.html 並單擊連結以轉到 subFolderFile。現在，單擊 subFolderFile 中的連結返回父資料夾及其中的頁面。檢查結果。
此處使用的資料夾和檔案 −
父資料夾：FolderRef
子資料夾：FolderOne
FolderRef 內的檔案：parentFolderFile.html
FolderOne 內的檔案：subFolderFile.html
parentFolderFile.html 程式碼
<!DOCTYPE html>
<html>
<head>
<title>Demo for Coming Back to This folder</title>
</head>
<body>
<h2>Go to the page in sub folder now</h2>
<a href="https://tutorialspoint.tw/index.htm">GoToChildFolderPage</a>
</body>
</html>
subFolderFile.html 程式碼
<!DOCTYPE html>
<html>
<head>
<title>Demo for Going To Back folder</title>
</head>
<body>
<h1>Going to the parent folder from here...</h1>
<a href="https://tutorialspoint.tw/index.htm">GoBackToParentFolder <a/>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟 parentFolderFile.html。現在單擊連結以轉到子資料夾中的 HTML 檔案。透過單擊子資料夾頁面中的連結返回父資料夾中的頁面。
示例 2：使用帶有絕對路徑的 SVG 圖片連結返回父資料夾中的頁面
資料夾和頁面設計步驟 −
步驟 1 − 建立一個名為 FolderRef 的資料夾。這將被稱為父資料夾。
步驟 2 − 在 FolderRef 內建立一個名為 FolderTwo 的資料夾。這將被稱為子資料夾。
步驟 3 − 在 FoderRef 內建立一個 html 檔案。將檔案命名為 parentFolderImgPage。
步驟 4 − 在 FoderTwo 內建立一個 html 檔案。將檔案命名為 subFolderImgFile。在帶有 SVG 圖片的錨點標籤內的 href 中使用絕對路徑。
步驟 5 − 編寫 parentFolderImgPage 和 subFolderImgFile 中的 HTML 程式碼，如下所示。
步驟 6 − 在瀏覽器中開啟 parentFolderImgPage.html 並單擊圖片連結以轉到 subFolderImgFile。現在，單擊 subFolderImgFile 中的圖片連結返回父資料夾及其中的頁面。檢查結果。
此處使用的資料夾和檔案 −
父資料夾：FolderRef
子資料夾：FolderTwo
FolderRef 內的檔案：parentFolderImgPage.html
FolderTwo 內的檔案：subFolderImgFile.html
parentFolderImgPage.html 程式碼
<!DOCTYPE html>
<html>
<head>
<title>Demo for Coming Back to This folder</title>
</head>
<body>
<h2>Click the blue circle and go to the page in sub folder now</h2>
<svg width="4cm" height="4cm" viewBox="0 0 6 6">
<a href="https://tutorialspoint.tw/index.htm">
<ellipse cx="2" cy="2" rx="1.5" ry="1.5" fill="blue" />
</a>
</svg>
</body>
</html>
subFolderImgFile.html 程式碼
<!DOCTYPE html> <html> <head> <title>Demo for Going To Back folder</title> </head> <body> <h1>Going to the parent folder from here...</h1> <h2>Click the red circle and go to the page in parent folder now</h2> <svg width="4cm" height="4cm" viewBox="0 0 6 6"> <a href="https://tutorialspoint.tw/index.htm"> <ellipse cx="2" cy="2" rx="1.5" ry="1.5"fill="red" /> </a> </svg> <a/> </body> </html>
檢視結果
要檢視結果，請在瀏覽器中開啟 parentFolderImgPage.html。現在單擊圓形圖片以轉到子資料夾中的 HTML 檔案。透過單擊子資料夾頁面上的圓形圖片返回父資料夾中的頁面。
在這篇關於 HTML a-href 的文章中，透過兩個不同的示例，展示瞭如何返回包含 HTML 檔案的資料夾並轉到父資料夾中的頁面的方法。首先，給出了使用帶有相對路徑引用的文字連結的方法，然後給出了使用圖片連結和絕對路徑的方法。
1K+ 次瀏覽
