锚点(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锚点(mao dian)--特殊的超链接的更多相关文章

  1. img图像标签和超链接标签a

    图像标签语法:<img src="" alt="".../> img属性:src=""  显示图像的URLalt="& ...

  2. html锚链接

    锚点(anchor):其实就是超链接的一种,一种特殊的超链接 普通的超链接,<a href="路径"></a> 是跳转到不同的页面 而锚点,<a hr ...

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

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

  4. Jsp页面设计易忘点

    文本标签: <b>文本加粗 <i>斜体 <u>下划线 <sub>作为下标 <sup>作为上标 样式: italic;斜体 text-deco ...

  5. 初始HTML

    了解HTML 1.1       HTML的作用 HTML就是用来制作网页 1.2       什么是HTML HTML是英文HyperText Markup Language的首字母缩写,即超文本标 ...

  6. 网络安全攻击与防护--HTML学习

    第一节. HTML基本语法(文末有对该文视频讲解) HTML的官方介绍什么的我就不说了,打字也挺累的,只简单介绍一下吧,其他的懂不懂都没关系. HTML全称为Hypertext Markup Lang ...

  7. Markdown

    1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: 这是一段斜体 这是一段粗体 这是一段加粗斜体 这是一段删除线 2. 分级标题 第一种写法: ...

  8. MarkDown常用语法记录

    目录 1. 斜体和粗体 2. 分级标题 3. 超链接 3.1 行内式(推荐) 3.2 行外式 3.3 自动链接 4. 锚点 5. 列表 5.1无序列表 5.2有序列表 6. 引用 7. 插入图像 8. ...

  9. DIV+CSS系统学习:转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. heartbeat+nginx搭建高可用HA集群

    前言: HA即(high available)高可用,又被叫做双机热备,用于关键性业务.简单理解就是,有2台机器 A 和 B,正常是 A 提供服务,B 待命闲置,当 A 宕机或服务宕掉,会切换至B机器 ...

  2. mysql group by 详解

    GROUP BY X意思是将所有具有相同X字段值的记录放到一个分组里. 那么GROUP BY X, Y呢? GROUP BY X, Y意思是将所有具有相同X字段值和Y字段值的记录放到一个分组里.

  3. 7z文件格式及其源码的分析(二)

    这是第二篇, 第一篇在这里: 这一篇开始分析7z的源码结构. 一. 准备工作: 1. 源码下载: 可以从官方中文主页下载:http://sparanoid.com/lab/7z/. 为了方便, 这里直 ...

  4. Python【运算符】

    本文介绍 1.Python运算符 运算符分类 运算符分为:算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算 一.算数运算:返回数字 假设变量a=10,b=20 运算符: + 相加a+ ...

  5. Jquery 【on事件】

    一.on事件的定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方 ...

  6. 聊聊 JDK 阻塞队列源码(ReentrantLock实现)

    项目中用到了一个叫做 Disruptor 的队列,今天楼主并不是要介绍 Disruptor 而是想巩固一下基础扒一下 JDK 中的阻塞队列,听到队列相信大家对其并不陌生,在我们现实生活中队列随处可见, ...

  7. Windows10使用

    1.常见问题 Win10 的操作中心如果不见了 Windows10电脑系统时间校准 实现windows与ubuntu的之间的复制与粘贴 安卓手机传递文件到Windows系统电脑 安卓手机高速传递文件到 ...

  8. QTREE5 - Query on a tree V(LCT)

    题意翻译 你被给定一棵n个点的树,点从1到n编号.每个点可能有两种颜色:黑或白.我们定义dist(a,b)为点a至点b路径上的边个数. 一开始所有的点都是黑色的. 要求作以下操作: 0 i 将点i的颜 ...

  9. WinServer下DNS随笔

    关于DNS:#hosts文件优先于dns解析.(同VIM注释)#SOA(权威记录)区域所有者包含NS(域名服务器记录)权威解析.关于SOA(权威记录)和NS(域名服务器记录)栗子:SOA爲什麼是dns ...

  10. struts中如何查看配置文件中是否存在某个返回值

    ActionConfig config = ActionContext.getContext() .getActionInvocation().getProxy().getConfig(); Resu ...