对于网页制作初学者来说锚点应当是个很新鲜的词,但是在我们浏览网页的时候确实经常可以见到的。现在就给大家介绍一下锚点以及如何使用锚点吧

一、锚点的用法

锚点的用法有两种,但性质同样,都是通过链接标签<a></a>以及其href属性实现的:

一种是:页内跳转;

一种是:跳到其他页面的某个区域。

下面我们看具体的操作。我做了一个示例,代码如下:

1)现在我们来看页内跳转的锚点用法:

我给每个每个div添加了ID号,然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意:href属性后的ID号必须有“#”,否则无效。】

在浏览器预览下,点击第四个,就跳到下面的第四个div了

2)现在我们来看页外跳转的锚点用法:

加入我在一个名为“示例”的文件夹中见了两个HTML文档

第一个名为index.html

第二个名为index2.html

里面的代码都一样,跟我贴出的“锚点的用法”这一步骤中的第二个步骤所贴出的图片一样。

现在我把index.html当中第一个a标签把其中的href="#1",更改为href=“index.html/#1”并保存之后,我们再在浏览器打开,这时候会发现,页面会跳转到index2.html中的ID=1的div所在的区域。

没错这就是页外的锚点跳转。

所以当我们需要跳转到其他页面的某个区域时,只要把href的属性值设置“跳转页面的URL+所想跳转到区域的ID(或者说锚点名称)”即可。

这里我需要说明,我的示例均使用的ID锚点,给div添加ID的时候就为该div设置了锚点。

早前的html版本规范是支持name属性的,即个元素添加name属性,比如name="anchor1",然后通过a标签来实现锚点跳转。这种方法我不建议使用。因为在最新版本的规范中或者说是严格的版本中通过name属性来实现锚点的跳转这种方式已经不被支持了。

所以推荐使用ID属性。

转载于:https://www.cnblogs.com/supermeimei/p/5756084.html

什么是锚点?锚点应该如何用?相关推荐

  1. IOS 2D游戏开发框架 SpriteKit--续(postion,锚点,游戏滚动场景)

    一. Postion 这里的postion和app开发中的layer.postion是一样的,postion的值代表该视图在父节点中的相对位置, 比如一个试图的父节点是self.view, 这里我们想 ...

  2. 中心点 unity_32-Unity入门学习11「UI锚点与自适应」

    #原创文章##Unity引擎##游戏# 一.锚点与自适应 介绍: ①锚点是相对于父容器的一种相对定位技术,是实现屏幕自适应的一种解决方案: ②中心点则是控件本身进行各种旋转的位置依据:如下图所示: ​ ...

  3. 0927锚框(Anchor box)

    锚框(Anchor box) 目标检测算法中,通常会在输入图像中采样大量的区域,然后判断这些区域中是否包含所感兴趣的目标,并调整区域边界从而更加准确地预测目标的真实边界框(ground-truth b ...

  4. 动手学深度学习之锚框

    锚框 锚框就是一个框,边缘框就是一个物体的真实的位置的一个框,锚框是对这个边缘框位置的一个猜测.算法先给我们画出一个框,然后看这个框里面有没有物体.如果有的话,算法就基于这个物体进行预测,它到我们真实 ...

  5. Fabric系列 - 锚节点

    锚节点 锚节点是定义在一个已经加入到通道的组织的节点.该节点主要用于节点的发现. 在一个通道中,锚节点可以被这个通道的其他任何节点发现和通信.因此,每一个加入到管通内的组织都至少有一个锚节点,一个组织 ...

  6. PIXI_锚点图片位控

    PIXI_锚点&图片位控 锚点 元素合并 图片图层 锚点 概念:元素与坐标所对齐的位置,应用中所有元素默认的锚点为左上角 修改锚点 1. 元素.anchor.x=x方向锚点 元素.anchor ...

  7. HTML 锚点的作用及用法

    什么是锚点 锚点是网页制作中超级链接的一种,又叫命名锚记,像一个迅速定位器一样,是一种页面内的超级链接,运用相当普遍. 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可 ...

  8. SSD目标检测的个人总结(1)—— 锚框的生成

    SSD目标检测的个人总结(1)-- 锚框的生成 前言 锚框 锚框的生成 锚框的绘制 前言 沐神的代码看了很久.B站上的视频也刷了很多遍,感叹下自己的基础确实不怎么扎实,锚框部分的底层代码几乎是一行行撸 ...

  9. 定位、锚点、精灵图、帧动画详解

    1.定位 1.定位 position 说法 文档流 偏移位置(top left right bottom)时候的参照物 1.position:static; 默认值 默认值 默认 2.position ...

  10. HTML:图片,超链接,锚链接

    知识总结: HTML图片: HTML路径: 相对路径:相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系. 绝对路径:HTML绝对路径(absolute path)指带域名的文件 ...

最新文章

  1. 可持续农业生态系统中的核心微生物组
  2. android自定义弹框效果合集,android 自定义弹出框AlertDialog ,很炫的哦
  3. 一个或多个实体的验证失败。 有关更多详细信息,请参见“ EntityValidationErrors”属性
  4. 可以ping通但远程桌面不行_【第1624期】HTML5:lt;agt;的ping属性之死亡ping与隐私追踪...
  5. Android日志拦截器,Retrofit2日志拦截器的使用
  6. python运维常用模块-运维常用python库模块
  7. 不容错过!大咖坐镇直播间,分享主题:智能几何计算
  8. 【软件测试】单元测试是软件测试的最基础环节
  9. 程序设计c语言文件,文件C语言程序设计.pdf
  10. OPENCV+VS+QT,导入生成别人的.pro文件时提示opencv文件找不到,C1083:无法打开包括文件 opencv2/opencv.hpp
  11. H83601D直插DIP千兆双口网络接口隔离滤波脉冲变压器
  12. QT语言开发的软件界面UI自动化方法
  13. 网页聊天室php无数据库_无需数据库的PHP聊天室程序
  14. Mp4Box 常用指令
  15. windows server 2008共享文件夹
  16. 2020年主流服务器主板,电脑主板怎么选(2020电脑主板选购指南及检测)
  17. JS判断对象是否为空(个人常用)
  18. 加载调用本地百度地图资源,附地图下载器及黑龙江省1-16级瓦片地图,加载显示marker
  19. 遗传算法中的变异和交叉
  20. 关于调用阿里云短信服务接口实现短信验证码的过程

热门文章

  1. 网络互撕是群体极化的典型症状
  2. 点击类名方法名如何连接到相应的Android源代码
  3. java静态代码审查工具
  4. poj - 1509 Glass Beads
  5. 推荐阅读20100708
  6. Effective C# 原则42:使用特性进行简单的反射(译)
  7. flex 还有人用么_那些北京人用过的老物件,能认出10个说明您老了!
  8. oracle 手动链库,Oracle 数据库干数据库链(Database links)的两个例子
  9. python打开chrome浏览器登录用户名密码_[工具]Python获取Chrome浏览器已保存的所有账号密码...
  10. python三大库_Python 经典库汇总(3)