如何在HTML中创建指向同一页面上的部分的链接

  • Z时代
  • 2024-03-07
  • 分类：电子

网络浏览器利用超链接从一个页面移动到另一页面。但是，您也可以移至同一页面上的不同区域。以下部分向您展示如何链接到网页的顶部、底部或特定部分。从以下列表中选择一种方法，或探索这两个选项。

笔记今天，所有浏览器仍然将“ # ”视为移动到页面顶部或底部的可行方式。但是，此方法已被弃用，并且可能在未来版本的HTML（超文本标记语言）中不起作用。我们建议使用 id 方法，因为它更流行且更通用。

  • 使用#top 或#bottom

  • 使用 id 选择器

  • 完整的 HTML 页面代码示例

使用#top 或#bottom

以下示例使用 #top 和 #bottom 以及<a> 标记和href 属性来链接到页面的该部分。此方法类似于使用“id”，但您不必选择特定元素。单击“结果”部分中的“顶部”或“底部”以查看会发生什么。

例子

<a href="#top">顶部</a>

<a href="#bottom">底部</a>

结果

顶部

底部

使用 id 选择器

在CSS（级联样式表）中，“ id ”是一个选择器，用于指定链接应指向的区域，类似于HTML中的锚点。使用 id 的好处是您可以创建指向页面上任何元素的链接，而不仅仅是顶部或底部。在以下部分中，我们将向您展示如何将 id 应用到HTML 标记，以及如何链接到它。以下两个示例链接到本页顶部的开头段落。

使用 #id 选择器

<p;网络浏览器利用超链接从一个页面移动到另一个页面...</p>

创建指向选择器的链接

<a href="#opening" >带我到开头段落。</a>

结果

带我看开头段落。

使用另一个页面的 #id 选择器

您还可以通过将#selector添加到页面的URL （统一资源定位符）来跳转到另一个网页的特定部分。

<a https://www.duotin.com/issues/ch000049.htm#opening" >带我到开头段落。</a>

结果

带我看开头段落。

完整的 HTML 页面代码示例

以下代码显示了如何在同一页面上使用 #top 和 #bottom 锚点以及 id 选择器。

<!DOCTYPE html> 
<html>
 <头>
  <title>内部链接示例</title>
 </头>
 <正文>
  <h3>内部链接示例</h3>
  <p> <a href="#bottom" >底部</a></p>
  <p>这是一个介绍性段落，附有选择器“opening”。</p>
  <p>这里有很多导致滚动的文本。</p>
  <p> <a href="#opening" >跳转到开头</a></p>
  <p> <a href="#top" >顶部</a></p>
 </正文>
</html>

以上是 如何在HTML中创建指向同一页面上的部分的链接 的全部内容， 来源链接： utcz.com/dzbk/943039.html

回到顶部