锚点(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. 程序运行之ELF文件结构

    ELF目标文件格式的最前部是ELF文件头.包含了整个文件的基本属性.比如ELF文件版本,目标机器型号,程序入口地址等.然后是ELF的各个段,其中ELF文件中与段有关的重要结构就是段表.段表描述了ELF ...

  2. SAP ATP邏輯可用性檢查

    [转http://tqmeng.blog.163.com/blog/static/169263916201162002414612/]SAP ATP邏輯可用性檢查1.可用性檢查群組OVZ2主要用於檢查 ...

  3. 图片oom问题

    1.什么是OOM? 程序申请内存过大,虚拟机无法满足我们,然后自杀了.这个现象通常出现在大图片的APP开发,或者需要用到很多图片的时候.通俗来讲就是我们的APP需要申请一块内存来存放图片的时候,系统认 ...

  4. xutils3文件上传、下载、get、post请求

    @ContentView(R.layout.activity_xutils3_net) public class XUtils3NetActivity extends Activity { @View ...

  5. php输入输出

    php是服务器脚本语言,js是客户端脚本语言 php用表单接收数据,echo 输出数据,$定义变量. <?php echo $_POST["sub"]; // POST后是表 ...

  6. 每天一个Linux命令(21)find命令_xargs参数

    xargs 与 exec 的作用类似,但是xargs与find 一起使用时,一般配合管道一起使用. 前面的输出转换为后方指令的参数输入,使用exec和xargs可以使用户对所匹配到的文件执行几乎所有的 ...

  7. Python 3 mysql 表操作

    Python 3 mysql 表操作 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标题,称为表的字段 id,name,qq,age称为字段,其余的,一行内容称为 ...

  8. 20165101刘天野 2018-2019-2《网络对抗技术》Exp7 网络欺诈防范

    目录 20165101刘天野 2018-2019-2<网络对抗技术>Exp7 网络欺诈防范 1.实验内容 1.1 简单应用SET工具建立冒名网站 1.2 ettercap DNS spoo ...

  9. SrpingCloud 之SrpingCloud config分布式配置中心

    Config架构 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务,才能使得新的配置文件生效,spring cloud config可以实现微服务中的所有系统的配置文件的统一管理,而且还可 ...

  10. java深入探究05

    通讯录小程序 需求说明: 功能: 添加联系人 修改联系人 删除联系人 查询所有联系人 要求: console控制 数据保存在xml 1.创建联系人类 /** * 联系人实体对象 * @author A ...