首页 > 软件开发 > HTML >

HTML 页内定位跳转 Internal Link 如何实现

来源:互联网 2023-03-16 19:16:32 版权归原作者所有,如有侵权,请联系我们

本经验介绍在写HTML页面时,如何实现页内跳转 Internal Link,以及如何使用跳转。qY6办公区 - 实用经验教程分享!

HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

工具/原料

  • Firefox

方法/步骤

  • 1

    首先,页内定位跳转只是定位跳转的一种特殊情况,而定位跳转又只是跳转的一种特殊情况,因此它们都是用a>标签加href实现的。qY6办公区 - 实用经验教程分享!

    一个普通a>标签如图,接下来我们将其改为定位跳转。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 2

    我们给要跳转到的元素添加id。注意是id,不是name。然后在a>标签的href里,写目标元素的id,前面加“#”。这样就成了。qY6办公区 - 实用经验教程分享!

    下面说一些注意事项。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 3

    注意,这个a>标签不能有 target="_blank"。否则,会新打开一个页面再定位到该元素,当然如果这是期望的效果也可。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 4

    也有一些特殊的href,比如#top,不需要手动添加id为top的元素,总是跳转到页面顶部。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 5

    注意引用的必须是id,不能是name。id和name有别。一个简单概括如图所示。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 6

    实际上,只要页面上有某个HTML元素有id,我们都可以新建页面,并在地址栏手动在url后面添加 #元素id 来定位跳转。qY6办公区 - 实用经验教程分享!

    注意是新建页面。直接在当前页面url上修改刷新不会跳转,会停留在刷新前的位置。qY6办公区 - 实用经验教程分享!

    HTML 页内定位跳转 Internal Link 如何实现qY6办公区 - 实用经验教程分享!

  • 6该信息未经授权抓取自百度经验
  • 注意事项

    • 如果遇到问题,可以在下面提出疑问。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!qY6办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号