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

官方的答案是这样的：

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

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

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

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

<!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. Java连接FTP成功，但是上传是失败，报错：Connected time out

    Java代码在本机上传文件到FTP服务器的时候成功,但是部署到测试服务器的时候出现,连接FTP成功但是上传失败,并且报Connected time out错误: 测试服务器和FTP服务都在阿里云上:( ...

  2. 如何彻底删除mysql

    MySQL的卸载确实很让人头疼,很多时候都无法彻底卸载干净,这样会导致我们无法重新安装新的MySQL. 下面介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL ...

  3. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...

  4. return、break和continue

    return.break和continue 这三个关键字有一个共同点,那就是读能让后面的语句不执行,不同的地方就是挑的距离不一样. return很强大,如果一个函数中有一个return,并且执行了,那 ...

  5. c++ 深入理解虚函数

    为什么使用虚函数?什么是虚函数?虚函数是为了解决什么问题? 面向对象的三大特征: 封装 多态 继承 普通虚函数 虚析构函数 纯虚函数 抽象类 接口类 隐藏 vs 覆盖 隐藏与覆盖之间的关系 早绑定和晚 ...

  6. Python3 JSON 数据解析

    JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. Python3 中可以使用 json 模块来对 JSON 数据进 ...

  7. 虚拟机克隆，并设置新的ip

    6.1克隆新的虚拟机 选中某个虚拟机-à右键à管理à克隆 选择下一步 选择下一步 点击完成 6.2修改主机名 [root@hadoop3 ~]# vim/etc/sysconfig/network 将 ...

  8. 准备在CSDN知识库建立一个Ext JS的知识库

    CSDN近期正在建立一个知识库,目标是打造身边的技术百科全书 ,我觉得这创意挺好,就像stackoverflow一样,常见的问题在里面基本都有了,只要通过搜索就能找到所需的答案. 现在,大家对于Ext ...

  9. linux TCP头部的构造的简单分析

    TCP的头部的构造是在函数tcp_transmit_skb()中进行的 函数片段如下: /* Build TCP header and checksum it. */ th = tcp_hdr(skb ...

  10. Servlet - Listener、Filter、Decorator

    Servlet 标签 : Java与Web Listener-监听器 Listener为在Java Web中进行事件驱动编程提供了一整套事件类和监听器接口.Listener监听的事件源分为Servle ...