锚点(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. MyBaits面试题

    原文地址 Mybatis技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用Mybatis的文章,所以,一些参数使用细节略掉了,我们的 ...

  2. 配置asp.net IIS服务器遇到的问题以及详细图例解决方案

    原来配置过IIS服务,但是没有将自己的程序放在IIS服务器上,今天突发奇想,看看自己写的程序怎么样啊,能否在服务器上运行一下,说干就干,但是遇到了很多困难,今天把陪孩子过程以及遇到的问题给大家说说,希 ...

  3. 基于WebServices简易网络聊天工具的设计与实现

    基于WebServices简易网络聊天工具的设计与实现 Copyright 朱向洋 Sunsea ALL Right Reserved 一.项目内容 本次课程实现一个类似QQ的网络聊天软件的功能:服务 ...

  4. Python 3 并发编程多进程之进程与线程

    Python 3 进程与线程 进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的 ...

  5. java常用注解(更新中)

    注解根据来源可分为: 系统注解(自带的,取决于JDK版本).自定义注解及第三方注解 系统注解根据用途又可分为: java内置注解和元注解 根据运行机制(保留到什么时候)可分为: 源码注解.编译注解和运 ...

  6. Spring 相关

    1. spring的bean的scope属性范围  参考:http://jiangshuiy.iteye.com/blog/1667316 原理分析(bean的scope属性范围) scope用来声明 ...

  7. 算法(Algorithms)第4版 练习 1.5.2

    0 1 2 3 4 5 6 7 8 9 10 components 9 0 0 1 2 3 4 5 6 7 8 9 components 3 4 0 1 2 4 5 6 7 8 0 8 compone ...

  8. JavaScriptr -- 常用对象 String, date, prototype

    <script type="text/javascript"> //给已有的对象添加自定义功能 function getMax() { var max = this[0 ...

  9. matlab画圆

    MATLAB rectangle函数1 语法说明rectangle('Position', pos)rectangle('Position', pos, 'Curvature', cur)rectan ...

  10. angularjs $http提交数据探索

    前两天在搞自己的项目,前端js框架用的是angularjs框架:网站整的差不多的时候出事了:那就是当我用$http.post()方法向服务器提交一些数据的时候:后台总是接收不到数据: 于是采用了其他方 ...