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

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

笔记今天,所有浏览器仍然将“ # ”视为移动到页面顶部或底部的可行方式。但是,此方法已被弃用,并且可能在未来版本的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>
本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考。 用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权,请联系我们反馈本站将在三个工作日内改正。
(0)
上一篇 2023年10月5日
下一篇 2023年10月5日

相关推荐

  • Win10用网线直接连接两台电脑,让你的网络连接更牢靠!

    在这篇文章中,您将学习如何在 Windows 10 中使用以太网电缆将两台计算机连接在一起。建立连接后,这将帮助您使用计算机的文件共享设置将文件从旧计算机传输到新计算机. 使用此技…

    2023年4月17日
  • 如何在Gmail中安排电子邮件:分步指南

    这是一本快速指南,介绍如何在Gmail上安排电子邮件以及如何在需要时取消电子邮件。 Gmail是目前世界上最受欢迎的电子邮件服务之一。为了使其更具吸引力和用户友好性,Google …

    2023年1月18日
  • 使用组策略编辑器禁用Windows10上的开始菜单

    Windows 中的开始菜单用于查找系统上所有已安装的应用程序。所有应用程序图标都将显示在“开始”菜单屏幕左侧的字母列表中。“设置”应用中的“开始”菜单设置提供了用户可以在“开始”…

    2023年7月6日
  • 如何从Windows建立对Ubuntu的远程桌面访问

    你在一个房间里,坐在一台电脑前;你想要的数据在另一台运行 Ubuntu 的计算机上。如果两台计算机在同一所房子里,没问题,但如果它们在不同的办公室怎么办?可能需要步行一段时间! 因…

    2023年6月27日
  • 打印机继续打印横向而不是纵向

    如果您的打印机一直打印横向而不是纵向,这篇文章将帮助您解决此问题。您的打印机保持横向打印而不是纵向打印可能有多种原因,例如打印机设置不正确、打印机驱动程序损坏等。 打印机继续打印横…

    2024年1月15日
  • 升级Windows时如何修复0x4005(16389)错误?

    在执行到 Windows 10 的就地升级时,由于升级未能完成,用户会遇到错误代码0x4005 16389 。当一个或多个应用程序与 Windows 10 不兼容,导致升级过程失败…

    2023年7月19日
  • 如何在Excel表格中添加或减去日期

    Microsoft Excel 以序列号的形式存储日期和时间,这使得它可以准确地加减日期。您将在下面找到在 Excel 中添加和减去日期的各种示例和有用的公式。 在 Microso…

    2023年1月21日
  • 什么是最好的键盘稳定器?

    键盘稳定器对于大多数机械键盘、复古键盘或顶级键盘来说至关重要。稳定器有助于防止按键在玩游戏和打字时摇晃、晃动或倾斜。但是键盘稳定器有不同的类型和尺寸。那么,最好的键盘稳定器是什么?…

    2023年2月11日
  • 如何使用焦点辅助在Windows10中静音通知

    虽然通知在某些情况下很有用,但有时您只是希望计算机保持安静。这就是为什么 Windows 10 包含焦点辅助功能,允许您在需要集中注意力或与他人共享屏幕时阻止所有或部分通知。 让我…

    2023年7月11日
  • WebM与MP4格式主要区别,详细比较哪个更好!

    技术每天都在不断发展。视频音频流就是最好的例子。不断的创新和进步为我们带来了编码、解码、共享和存储视频文件的新工具。除了所有的好处,这种创新的激增也让我们对哪种视频格式更适合什么目…

    2023年6月13日