数据结构
网络
关系数据库管理系统 (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.com/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.com/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.com/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.com/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+ 次浏览
