如何在 HTML 中添加“返回主页按钮的链接”？答案

【问题标题】：How to add a 'link back to homepage button' in HTML?如何在 HTML 中添加“返回主页按钮的链接”？
【发布时间】：2020-10-14 17:29:16
【问题描述】：

我正在尝试构建我的第一个博客网页。

到目前为止我在问题底部编写的代码。

我希望它有一个功能，当我点击“我的名字”或“主页”时，它可以转到最开始的主页。当我点击“博客”时，它可以链接到有图片或文字的区域。

但是，到目前为止，我的代码还没有这样的功能，而是显示为文字（无法点击）。

这是我尝试遵循的模板

经过比较，我发现我需要有 href: / 才能使它们成为按钮。而且我意识到他们的链接是例如“https://www.personname.com/”。

但是，这让我觉得我应该首先拥有一个个人网页，以便将该链接作为返回主页按钮。但是...这就是我正在做的，我正在尝试建立一个网页...

我厌倦了添加下面的代码，它链接到错误的位置。 :(

<a href="/">
                "Home"
                <span class="sr-only">(current)</span>
              </a>

我也尝试了按钮功能，但它在图片中显示为这个灰色的三角形框，也无法点击。

我该如何解决这个问题？

下面是我目前写的代码

【问题讨论】：

一般来说，网站是在网络服务器上运行的，而不是作为文件系统上的单个文件。因此，像 Stack Overflow 这样的站点在服务器上运行，当请求位置“/”时，服务器将其解释为“网站的根目录”（即主页）。由于您使用file:// 而不是http:// 运行该页面，因此这是行不通的。相反，只需将文件名（例如 index.html）放在 href 属性中。这将在两个地方都有效。
@HereticMonkey 谢谢你的解释！如何链接到博客的另一页？并链接到图片？我看到别人的博客都是style="background-image：url('/img/header-slides/bg.jpg')" 就我而言，应该放哪个网址呢？如果我有本地图片。我应该先把它们上传到网上的某个地方吗？
这是一个完全不同的问题。听起来你可以通过一些关于 HTML 和 CSS 的教程来做。链接到另一个页面；将其他页面文件的名称放在href 中。链接到图片；将图像文件的名称放在href 中。感知模式？ :) 如果你想与其他人分享这些东西，你需要获得某种网络服务器，在那里你将上传 HTML、CSS、JS、图像和任何其他文件。这超出了这个问题的范围，并且可能包含在有关创建您应该研究的网站的教程中。

标签： javascript html

【解决方案1】：

您可以使用named anchor tags 来获取此行为。

html {
  scroll-behavior: smooth;
}

<a name="top"></a>
<a href="#top">Home</a>
<a href="#blog">Blog</a>

<section style="height: 100vh">
  <h1>Welcome Home</h1>
</section>

<section style="height: 100vh">
  <a name="blog"></a>
  <h1> Blog </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <a href="#top">Back to Top</a>
</section>

【讨论】：

非常感谢您提供详细示例和链接的帮助。还有一个问题，如果我有本地图片。我应该先将它们上传到在线某个地方，然后再添加到 HTML 中吗？ IE。那我应该写什么href？（我看到其他人使用 style="background-image：url('/img/header-slides/bg.jpg')" 但原来这也是一个链接如 www. personname.come/pictures 我不能使用）
很难说，因为这取决于您提供文件的方式。浏览器有充分的理由不允许简单地查看用户文件系统。所以通常这些文件是由服务器提供的。当且仅当文件从与您的 HTML 页面相同的服务器提供时，您可以像尝试 /img/header-slides/bg.jpg 一样编写它。如果它是从其他地方提供的，您需要提供完整的 url，包括提供文件的服务器名称，即https://my-file-server/my-picutre.png。
尝试使用它，直到您更好地理解它 -> marketplace.visualstudio.com/… 。所以你可以专注于构建东西。当它是托管的时候，你可以更多地研究它。 pages.github.com 是一个很好的开始。

【解决方案2】：

“a”元素上的类中必须有一些东西才能使链接不可点击。尝试这样做：

<a href="~/">"Home"
     <span class="sr-only">(current)</span>
</a>

【讨论】：

感谢您的帮助！刚刚尝试更新有问题的图片部分。它链接到错误的地方...（链接到我的本地/C）
代码已更新。我在 href 属性中添加了“~”字符