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

网络浏览器利用超链接从一个页面移动到另一页面 。但是,您也可以移至同一页面上的不同区域 。以下部分向您展示如何链接到网页的顶部、底部或特定部分 。从以下列表中选择一种方法,或探索这两个选项 。
笔记今天,所有浏览器仍然将“ # ”视为移动到页面顶部或底部的可行方式 。但是,此方法已被弃用,并且可能在未来版本的HTML(超文本标记语言)中不起作用 。我们建议使用 id 方法,因为它更流行且更通用 。

  • 使用#top 或#bottom
  • 使用 id 选择器
  • 完整的 HTML 页面代码示例
使用#top 或#bottom以下示例使用 #top 和 #bottom 以及<a> 标记和href 属性来链接到页面的该部分 。此方法类似于使用“id”,但您不必选择特定元素 。单击“结果”部分中的“顶部”或“底部”以查看会发生什么 。
例子<a href="https://www.duotin.com/en/#top">顶部</a><a href="https://www.duotin.com/en/#bottom">底部</a>结果顶部
底部
使用 id 选择器在CSS(级联样式表)中,“ id ”是一个选择器,用于指定链接应指向的区域,类似于HTML中的锚点 。使用 id 的好处是您可以创建指向页面上任何元素的链接,而不仅仅是顶部或底部 。在以下部分中,我们将向您展示如何将 id 应用到HTML 标记,以及如何链接到它 。以下两个示例链接到本页顶部的开头段落 。
使用 #id 选择器<p;网络浏览器利用超链接从一个页面移动到另一个页面...</p>创建指向选择器的链接<a href="https://www.duotin.com/en/#opening" >带我到开头段落 。</a>结果带我看开头段落 。
使用另一个页面的 #id 选择器您还可以通过将#selector添加到页面的URL (统一资源定位符)来跳转到另一个网页的特定部分 。
<a href="https://www.computerhope.com/issues/ch000049.htm#opening" >带我到开头段落 。</a>结果带我看开头段落 。
完整的 HTML 页面代码示例【如何在HTML中创建指向同一页面上的部分的链接】以下代码显示了如何在同一页面上使用 #top 和 #bottom 锚点以及 id 选择器 。
<!DOCTYPE html> <html> <头><title>内部链接示例</title> </头> <正文><h3>内部链接示例</h3><p> <a href="https://www.duotin.com/en/#bottom" >底部</a></p><p>这是一个介绍性段落,附有选择器“opening” 。</p><p>这里有很多导致滚动的文本 。</p><p> <a href="https://www.duotin.com/en/#opening" >跳转到开头</a></p><p> <a href="https://www.duotin.com/en/#top" >顶部</a></p> </正文></html>