• 说到锚点，我们也许会需要稍微的思考一下，什么是锚点？

官方的答案是这样的：

  • 那么你可能就会有下面的疑问，锚点能做什么啊？

回答就是，锚点可以理解为一个标记，一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。

  • 还有就是怎么在实际的开发中使用锚点呢？

下面先看一个简单的代码展示吧，为了演示出实际浏览网页时对一个超长网页的模拟，我故意添加了一些段落。：

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>锚点的使用</title>
  7.     </head>
  9.     <body>
  10.         <p>此处是一个段落</p>
  11.         <p>此处是一个段落</p>
  12.         <p>此处是一个段落</p>
  13.         <p>此处是一个段落</p>
  14.         <p>此处是一个段落</p>
  15.         <p>此处是一个段落</p>
  16.         <a name="anchor1">这里是锚点1</a>
  17.         <p>此处是一个段落</p>
  18.         <p>此处是一个段落</p>
  19.         <p>此处是一个段落</p>
  20.         <p>此处是一个段落</p>
  21.         <p>此处是一个段落</p>
  22.         <p>此处是一个段落</p>
  23.         <p>此处是一个段落</p>
  24.         <p>此处是一个段落</p>
  25.         <a name="anchor2">这里是锚点2</a>
  26.         <p>此处是一个段落</p>
  27.         <p>此处是一个段落</p>
  28.         <p>此处是一个段落</p>
  29.         <p>此处是一个段落</p>
  30.         <p>此处是一个段落</p>
  31.         <p>此处是一个段落</p>
  32.         <p>此处是一个段落</p>
  33.         <p>此处是一个段落</p>
  34.         <p>此处是一个段落</p>
  35.         <p>此处是一个段落</p>
  36.         <p>此处是一个段落</p>
  37.         <p>此处是一个段落</p>
  38.         <p>此处是一个段落</p>
  39.         <p>此处是一个段落</p>
  40.         <p>此处是一个段落</p>
  41.         <p>此处是一个段落</p>
  42.         <p>此处是一个段落</p>
  43.         <p>此处是一个段落</p>
  44.         <a name="anchor3">这里是锚点3</a>
  45.         <p>此处是一个段落</p>
  46.         <p>此处是一个段落</p>
  47.         <p>此处是一个段落</p>
  48.         <p>此处是一个段落</p>
  49.         <p>此处是一个段落</p>
  50.         <p>此处是一个段落</p>
  51.         <p>此处是一个段落</p>
  52.         <p>此处是一个段落</p>
  53.         <p>此处是一个段落</p>
  54.         <p>此处是一个段落</p>
  55.         <p>此处是一个段落</p>
  56.         <p>此处是一个段落</p>
  57.         <p>此处是一个段落</p>
  58.         <p>此处是一个段落</p>
  59.         <p>此处是一个段落</p>
  60.         <p>此处是一个段落</p>
  61.         <p>此处是一个段落</p>
  62.     </body>
  64. </html>

  • 接下来就是在实际中对锚点的测试了。测试的方法是在超链接的后面跟上”#anchor_idNumber“.井号后面的字母就是我们设计好的锚点的name值。如：http://127.0.0.1:8020/CSS_Study/anchor.html#anchor3

  • 结果如下：



    我们可以发现，网页直接就跳到了我们想要进行访问的锚点的定义的位置。因此我们的关于锚点的测试便成功的完成了。

end!

HTML中锚点的使用的更多相关文章

  1. Page Scroll Menu (页面中锚点菜单)

    Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长   当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll ...

  2. MarkDown中锚点的使用

    在文档中创建锚点: <A NAME="ROP_ON_ARM">Davi L, Dmitrienko A, Sadeghi A R, et al. [Return-ori ...

  3. 【转】cocos2d-x中锚点设置及定位方式

    http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...

  4. MarkDown中锚的使用

    经常使用Markdown配合Mou编辑器来些点总结和文档,但是其中需要前后引用或链接时markdown木有提供直接的方式.当然,Markdown支持嵌入式HTML语法,so..实现起来也没啥问题. 具 ...

  5. Cocos2d-x中锚点的介绍

    什么是锚点?  只需要记住一句话就可以,锚点就是你指定的那个坐标究竟是图像的哪个点,也就是你setPosition的坐标 eg: 新建工程:在HelloWorld中写上如下代码: CCSprite * ...

  6. word转HTML在layuiadmin中锚点调转问题

    前言: 在以前我们讲过把word转成HTML移植入自己的web项目使用:Word转html并移植到web项目 正文: 发现如果在layuiadmin框架中,页面里锚点跳转时会不正常(会跳转到新页面): ...

  7. cocos2d-x中锚点设置及定位方式

    问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...

  8. SpriteBuilder中锚点的一般用法

    注意:改变节点的锚点(anchor point)将会影响缩放和旋转操作,也会影响边界边框和碰撞的检测. 锚点仅仅挪动节点的视觉表现,这种改变可能与物理表现不一致. 你绝不应该错误的挪动锚点去改变节点的 ...

  9. Unity中锚点的动态设置

    问题背景 在做签到系统时,需求给的效果图如下 效果图像这样,中间是模型,周围其他是签到框这样的布局,我想动态生成各个动态框,涉及到一个定位问题,锚点的设置(动态去设置每个item的位置) 实现方法 S ...

随机推荐

  1. Mac下Git安装及配置

    Mac下: 1.下载git版本并安装 运行终端 查看git版本: bogon:~ yan$ git --version git version 2.16.3 配置gitconfig文件 vim ~/. ...

  2. MFC 程序入口和执行流程

    MFC(微软基础类库)以C++类的形式封装了Windows API,给开发者提供了便利,但是初学者常常会疑惑MFC程序的入口在哪里?下面给大家简单介绍一下MFC 程序入口和执行流程. 一 MFC程序执 ...

  3. C语言程序设计第三次作业——选择结构（1）

    一.改错题 1.题目计算f(x)的值:输入实数x,计算并输出下列分段函数f(x)的值,输出时保留1位小数. 源程序(有错误的程序): #include <stdio.h> int main ...

  4. JS 中判断空值 undefined 和 null

    1.JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正 ...

  5. Java HashMap的扩容

    最近博主参加面试,发现自己对于Java的HashMap的扩容过程理解不足,故最近在此进行总结. 首先说明博主德Java为1.8版本 HashMap中的变量 首先要了解HashMap的扩容过程,我们就得 ...

  6. 【python进阶】Garbage collection垃圾回收1

    前言 GC垃圾回收在python中是很重要的一部分,同样我将分两次去讲解Garbage collection垃圾回收,此篇为Garbage collection垃圾回收第一篇,下面开始今天的说明~~~ ...

  7. windows下cmd中命令操作

    windows下cmd中命令:   cls清空 上下箭头进行命令历史命令切换 ------------------------------------------------------------- ...

  8. ajax跨域请求问题及解决办法总结

    1.浏览器的同源策略及规避方法 目前,所有浏览器都实行同源政策.即协议.域名.端口都相同的URI称为"同源".不同源的url之间: a.无法读取cookie.localstorag ...

  9. python中修改字符串的几种方法

    在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符.因此改变一个字符串的元素需要新建一个新的字符串.常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用join组 ...

  10. [Java笔记]继承

    继承只是继承框架,而数据没有继承!. 继承不改变父类数据!