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

官方的答案是这样的：

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

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

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

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>锚点的使用</title>
    </head>

    <body>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor1">这里是锚点1</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor2">这里是锚点2</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor3">这里是锚点3</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
    </body>

</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. spring+hibernate+struts2零配置整合

    说句实话,很久都没使用SSH开发项目了,但是出于各种原因,再次记录一下整合方式,纯注解零配置. 一.前期准备工作 gradle配置文件: group 'com.bdqn.lyrk.ssh.study' ...

  2. 【转】Java方向如何准备技术面试答案(汇总版)

    本文转载自:“Java团长”公众号 1.面向对象和面向过程的区别 面向过程优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采 ...

  3. Java8——快速入门手册（学习笔记）

    github博文传送门 Java8特性学习笔记 Java8中新增了许多的新特性,在这里本人研究学习了几个较为常用的特性,在这里与大家进行分享.(这里推荐深入理解Java 8用于理解基础知识)本文分为以 ...

  4. junit4.9测试用例 spring测试用例 Assert 注解

    junit4.9测试用例 测试基类 import org.junit.runner.RunWith; import org.springframework.test.context.ContextCo ...

  5. 初识Redis系列之三：Redis支持的数据类型及使用

    支持的数据类型有五种: string(字符串).hash(哈希).list(列表).set(集合)及zset(sorted set:有序集合): 下面分别对这几种类型进行简单的Redis存取操作 1: ...

  6. block的那些事（从懵懂到使用）

    从大学开始自学iOS,在iOS岗位已经两年了,遇到传值等操作,代理和block二选一的话,以前我会毫不犹豫选择代理.久而久之,入职到大公司之后,发现处处是block的天地,才慢慢的了解block并爱上 ...

  7. MacOS下Rails+Nginx+SSL环境的搭建(上)

    这里把主要的步骤写下来,反正我是走了不少弯路,希望由此需求的朋友们别再走类似的弯路.虽说环境是在MacOS下搭建,但是基本上和linux下的很相像,大家可以举一反三. 一.安装Rails 这个是最简单 ...

  8. TCP发送源码学习(1)--tcp_sendmsg

    一.tcp_sendmsg()函数分析: int tcp_sendmsg(struct kiocb *iocb, struct sock *sk, struct msghdr *msg, size_t ...

  9. Hadoop2动态调整Log级别-以datanode的heartbeat log为例

    在Hadoop中,有些log信息在正常情况下是不打印出来的.比如datanode发送heartbeat的日志. 代码位于BPServiceActor#sendHeartBeat方法中,如下图: 由于默 ...

  10. Linux 高性能服务器编程——socket选项

    socket选项函数 功能:用来读取和设置socket文件描述符属性的方法 函数: #include <sys/scoket.h> int getsockopt ( int sockfd, ...