锚点(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>

html锚链接的更多相关文章

  1. img,a,锚链接,超链接

    1.图片标签:img,单标签 图片属性: src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 title: 当鼠标停留在图片上的时候,显示提示的文字 alt ...

  2. HTML<a>标签作为锚链接

    1. 什么是锚链接? <a></a>标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中 ...

  3. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  4. HTML学习笔记——锚链接、pre标签、实体

    1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. themeleaf跳转锚链接

    <a class="lianjie3" th:href="@{/}+'#requires'"></a>

  6. wampserver 下载链接没反应的解决办法

    可能有很多小伙伴和我一样使用wampserver时,下载链接点击就是没有反应,当时我以为是因为网络原因,链接没有加载出来,或者是链接的请求不能得到响应,结果百度了一下才发现被“习惯”坑了一把,wamp ...

  7. css---3链接伪类与动态伪类

    链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚 链接伪类不可以加在div上 <!DOCTYPE html> <html> <head> <m ...

  8. HTML的链接标签

    网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...

  9. ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)

    原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...

随机推荐

  1. Android N API预览

    Android N for Developers 重要的开发人员功能 多窗体支持 通知 JIT/AOT 编译 高速的应用安装路径 外出瞌睡模式 后台优化 Data Saver 高速设置图块 API 号 ...

  2. Eclipse +Tomcat配置-【菜鸟学JAVA】

    说起来也惭愧,以前用(Unieap)工具搞了一年多的JAVA+Oracle,现在居然在Eclipse中配置tomcat都搞了半天时间,原来一直是做.NET的. 今天开始不再用集成的环境,话不多说,开始 ...

  3. centOS-64位通过YUM源安装nginx

    第一步:在 /etc/yum.repos.d/ 目录下,建立名叫nginx.repo的软件源配置文件.        文件 nginx.repo 的内容是: [nginx] name=nginx re ...

  4. LeetCode:删除排序链表中的重复元素【83】

    LeetCode:删除排序链表中的重复元素[83] 题目描述 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示 ...

  5. Android SDK上手指南 2:用户界面设计

    http://mobile.51cto.com/ahot-419184.htm 内容简介 我们将为应用程序项目添加布局方案,在这方面XML与Eclipse ADT接口将成为工作中的得力助手——不过在后 ...

  6. 第一天 格式化操作符 条件、for、while、break、continue语句

    python2和3的区别: 2中的print 不必加括号 3中的print变为函数 要加括号   2中的input不能输入字母(输入的字母被认为是变量,而之前又没定义,所以报错),默认只能计算数字,要 ...

  7. POJ 之 1002 :487-3279

    487-3279 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 242418   Accepted: 42978 Descr ...

  8. 利用Tkinter做的自动生成JSONSchema的小工具

    前面讲到可以使用JSONSchema做json数据校验, 但是每个接口数据都手动写jsonschema太痛苦了, 就写了个小脚本,可以直接复制接口文档的mock数据然后生成一个简单的jsonschem ...

  9. 自顶向下归并排序(Merge Sort)

    一.自顶向下的归并排序思路: 1.先把数组分为两个部分. 2.分别对这两个部分进行排序. 3.排序完之后,将这两个数组归并为一个有序的数组. 重复1-3步骤,直到数组的大小为1,则直接返回. 这个思路 ...

  10. Outlook 2010打开没反应,只有任务栏有图标的解决方法

    Outlook 2010打开没反应,任务栏图标显示如下: 解决方法: 按下Windows+R键,输入regedit: 按回车: 请在注册表编辑器中定位到以下键值,重命名以下4项(比如将outlook重 ...