html锚点(mao dian)–特殊的超链接

html锚点(mao dian)–特殊的超链接

https://www.cnblogs.com/tommy-huang/p/4468574.html

锚点(anchor):其实就是超链接的一种,一种特殊的超链接

     普通的超链接,<a href=”路径”></a> 是跳转到不同的页面

     而锚点,<a href=”路径”></a> 可以在同一个页面中不同的位置间跳转

     可以看到,跳转到锚点的超链接跟普通的超链接格式是一样的,

1.使用锚点的步骤:

   1.1.先建立锚点目标,

        如上所述,锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转,

        常用的场景就是,页面很长,让用户方便在页面不同部分间跳转

        建立锚点目标,只需要给目标元素增加id或者name即可,推荐id:

        <div id=”test” name=”test”></div>

   1.2.要创建跳转到id=”test”的div的锚点,

           <a href=”#test”></a>

   注意:1.锚点的超链接路径一定包含”#”,而后面紧跟元素的id或者name

              (所以id和name必须一样,其实我试了有时name是不生效的)

2.锚点使用总结:

  2.1. 建立锚点的元素必须要有id或name属性,最好两个都有

  2.2. 锚点超链接一定包含井号”#”,锚点超链接都在链接的最末端,具体看后面例子

  2.3. 同一个页面不同部分的跳转,锚点的写法

            目标元素:<p id=”test”></p>     锚点超链接:<a href=”#test”></a>

  2.4. 不同页面跳转,同时存在锚点

           目标元素:a.html页面的<div id=”test”/>   锚点超链接:<a href=”a.html#test”></a>

           (先跳到a.html页面,然后再寻找id=test的元素)

  2.5. 不同页面带参数跳转,同时存在锚点

           目标元素:a.php?p=abc页面的<div id=”test”/>   锚点超链接:<a href=”a.php?p=abc#test”></a>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113499.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 原生js添加元素

    原生js添加元素今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。首先最简单的innerHTML,这个不想多说,入门新手喜欢这么用,但他的缺点也很明显:不管你渲染部分还是全部,始终需要替换原先所有的子元素,也就是需要重复渲染,会增加浏览器压力。接下来就是正题了,js推荐是这样…

    2022年6月22日
    71
  • 黑苹果MacOS Big Sur 11.0 安装教程及驱动工具

    黑苹果MacOS Big Sur 11.0 安装教程及驱动工具最新黑苹果MacOSBigSur11.0安装教程,附带各电脑EFI驱动合集、原版引导镜像,图文并茂简单易懂…一、准备工作1.一个8G以上的U盘(安装10.15Catalina必须要16G及以上的U盘);2.MacOS镜像、TransMac(刻录工具)、DiskGenius(分区工具)、EasyUEFI(引导工区)、EFI驱动文件。安装工具获取链接:https://pan.baidu.com/s/1pwUVVo1Ud4yxO29k_ckTBw提取码:qs05安装镜像

    2022年6月3日
    159
  • linux centos7配置网络教程,linux centos7配置网络「建议收藏」

    linux centos7配置网络教程,linux centos7配置网络「建议收藏」1.动态获取ip(前提是你的路由器已经开启了DHCP)修改网卡配置文件vi/etc/sysconfig/network-scripts/ifcfg-ens32(最后一个为网卡名称)动态获取IP地址需要修改两处地方即可(1)bootproto=dhcp(2)onboot=yes修改后重启一下网络服务即可systemctlrestartnetwork2、配置静态IP地址设置静态IP地…

    2022年5月8日
    46
  • win10专业工作站版命令提示符激活【中文破解版】2022.01.24

    (win10专业工作站版命令提示符激活)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月31日
    91
  • hibernate Java 时间和日期类型的 Hibernate 映射

    hibernate Java 时间和日期类型的 Hibernate 映射

    2021年11月29日
    50
  • 监督学习、无监督学习、自监督学习和强化学习

    监督学习、无监督学习、自监督学习和强化学习监督学习监督学习是目前最常见的机器学习类型。给定一组样本(通常由人工标注),他可以学会将输入数据映射到已知目标。一般来说,近年来过度关注的深度学习应用几乎都属于监督学习,比如光学字符识别、语音识别、图像分类和语言翻译。监督学习主要包括分类和回归,但还有更多的奇特变体,主要包括如下几种:1、序列生成(sequencegeneration)。给定一张图像,预测描述图像的文字。序列生成有时可…

    2025年11月15日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号