前台编程之路逐个HTML锚点的用法

作者 : 开心源码 本文共718个字,预计阅读时间需要2分钟 发布时间: 2022-05-13 共155人阅读

锚点的作用及用法
HTML中的a标签大家都非常熟习,它是超链接标签,通过a标签能够跳转到href中指定的页面及指定的位置,a标签可以做到单页面跳转或者多页面跳转,锚点能够跳转到当前页面中指定的位置,也能够跳转到指定的其余页面或者其余页面中指定的位置。
锚点有2种使用方法,第一种方法是跳转到当前页面中指定的位置,即单页面跳转;第二种方法是跳转到其指定的其余页面。

  • 使用方法一:单页面跳转到指定位置。
    //a标签中的代码:    <a href="#demo1">跳转1</a>    <a href="#node2">跳转2</a>    <a href="#node3">跳转3</a>
    //跳转到的代码    <p>00000000</p>    <p>00000000</p>//…省略    <p id="demo1">11111111</p>    <p>00000000</p>    <p>00000000</p>    <p>00000000</p>//…省略    <p id="node2">22222222</p>    <p>00000000</p>//…省略    <p id="node3">33333333</p>    <p>00000000</p>//…省略

以上代码得到的效果:

跳转的效果

  • 方法二:跳转到其余页面:
<a href="file:///……跳转页面的路径……/index.html">跳转到其余页面</a>

以上代码得到的效果:

跳转的效果

在路径后面加上对应属性名称,就可跳转到其余页面的指定位置:

<a href="file:///……跳转页面的路径……/anchor.html#node2">跳转到其余页面的指定位置</a>

以上代码得到的效果:

跳转的效果

a标签通过锚点就可达到单页面或者多页面跳转,并能够达到多需指向的位置。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台编程之路逐个HTML锚点的用法

发表回复