如何使用 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://www.cainiaomax.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://www.cainiaomax.com/index.htm">GoBackToParentFolder <a/>
</body>
</html>
查看结果
要查看结果，请在浏览器中打开 parentFolderFile.html。现在点击链接转到子文件夹中的 HTML 文件。点击子文件夹文件中的链接，返回父文件夹中的上一页。
示例 2:使用带有绝对路径的 SVG 图像链接返回父文件夹中的页面
文件夹和页面设计步骤 −
步骤 1 − 创建一个名为 FolderRef 的文件夹。该文件夹将被称为父文件夹。
步骤 2 − 在 FolderRef 内创建一个名为 FolderTwo 的文件夹。该文件夹将被称为子文件夹
步骤 3 − 在 FolderRef 内创建一个 html 文件。将文件命名为 parentFolderImgPage。
步骤 4 − 在 FoderTwo 中创建一个 html 文件。将文件命名为 subFolderImgFile。在锚标签内的 href 中使用绝对路径，并添加 SVG 图像。
步骤 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://www.cainiaomax.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://www.cainiaomax.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 文件的文件夹并跳转到父文件夹中的页面。首先，我们介绍了使用文本链接和相对路径引用的方法，然后我们介绍了使用图像链接和绝对路径的方法。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
