html - HTML：如何使用页面中文本的内部链接？

Question

放置一个文本链接真的很简单：<a href=www.link.com> Text </a>，把那个链接做成图片也是如此，但我想知道怎么做，我还没有通过无数的谷歌搜索找到答案，我怎么会有一个表格顶部的内容，其中每个项目都是一个可点击的链接，可将您带到页面的下方。如何在同一页面上使用内部链接的文本？

Answer 1

我相信如果您创建 a<div id="section1">Text </div> 并将 #section1 放入 URL 中，浏览器会将页面设置为该部分。

你可以在这里阅读更多https://en.wikipedia.org/wiki/URI_fragment

Answer 2

这很简单。您只需为要链接到的任何元素添加一个 id。例如，<h1 id="Hello"></h1>。然后将您设置href为 a #，然后将 id设置为<a href="#Hello">Go to Hello</a>.

Answer 3

您可以为文本元素提供 id，然后通过在 id 前加上井号前缀，在目录中链接的 href 属性中链接到这些 id。例子：

#tableofcontents {
  background-color: #ccc;
}

<div id="tableofcontents">
  <ul>
    <li>
      <a href="#ref1">Reference 1</a>
    </li>
    <li>
      <a href="#ref2">Reference 2</a>
    </li>
    <li>
      <a href="https://en.wikipedia.org/wiki/URI_fragment#Examples">You can even point the link to a specific element on another website</a>
    </li>
  </ul>
</div>
<p id="ref1">A paragraph with much text inside. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy.</p>
<p id="ref2">The second paragraph; it still has much content, but less than the previous one. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy.</p>