HTML中锚点的使用
- 说到锚点,我们也许会需要稍微的思考一下,什么是锚点?
官方的答案是这样的:
- 那么你可能就会有下面的疑问,锚点能做什么啊?
回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。
- 还有就是怎么在实际的开发中使用锚点呢?
下面先看一个简单的代码展示吧,为了演示出实际浏览网页时对一个超长网页的模拟,我故意添加了一些段落。:
<!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中锚点的使用的更多相关文章
- Page Scroll Menu (页面中锚点菜单)
Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长 当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll ...
- MarkDown中锚点的使用
在文档中创建锚点: <A NAME="ROP_ON_ARM">Davi L, Dmitrienko A, Sadeghi A R, et al. [Return-ori ...
- 【转】cocos2d-x中锚点设置及定位方式
http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...
- MarkDown中锚的使用
经常使用Markdown配合Mou编辑器来些点总结和文档,但是其中需要前后引用或链接时markdown木有提供直接的方式.当然,Markdown支持嵌入式HTML语法,so..实现起来也没啥问题. 具 ...
- Cocos2d-x中锚点的介绍
什么是锚点? 只需要记住一句话就可以,锚点就是你指定的那个坐标究竟是图像的哪个点,也就是你setPosition的坐标 eg: 新建工程:在HelloWorld中写上如下代码: CCSprite * ...
- word转HTML在layuiadmin中锚点调转问题
前言: 在以前我们讲过把word转成HTML移植入自己的web项目使用:Word转html并移植到web项目 正文: 发现如果在layuiadmin框架中,页面里锚点跳转时会不正常(会跳转到新页面): ...
- cocos2d-x中锚点设置及定位方式
问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...
- SpriteBuilder中锚点的一般用法
注意:改变节点的锚点(anchor point)将会影响缩放和旋转操作,也会影响边界边框和碰撞的检测. 锚点仅仅挪动节点的视觉表现,这种改变可能与物理表现不一致. 你绝不应该错误的挪动锚点去改变节点的 ...
- Unity中锚点的动态设置
问题背景 在做签到系统时,需求给的效果图如下 效果图像这样,中间是模型,周围其他是签到框这样的布局,我想动态生成各个动态框,涉及到一个定位问题,锚点的设置(动态去设置每个item的位置) 实现方法 S ...
随机推荐
- solr6.6初探之分词篇
关于solr6.6搭建与配置可以参考 solr6.6初探之配置篇 在这里我们探讨一下分词的配置 一.关于分词 1.分词是指将一个中文词语拆成若干个词,提供搜索引擎进行查找,比如说:北京大学 是一个词那 ...
- SpringBoot多环境部署,在启动时动态设置相应的配置文件
项目中,往往在测试环境和正式环境拥有不同的配置,例如数据库连接,第三方库的appkey等.这时候,我们就要在不同的环境启用不同的配置 下面新建三个文件,分别表示开发环境,生产环境和测试环境的配置文件 ...
- python3全栈开发-并发编程,多进程的基本操作
一 .multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程. ...
- Maven之自定义archetype生成项目骨架
Maven之自定义archetype生成项目骨架(一) http://blog.csdn.net/sxdtzhaoxinguo/article/details/46895013
- 剖析Vue原理&实现双向绑定MVVM
转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...
- SpringMVC mock测试详解
@RunWith(SpringRunner.class) @SpringBootTest(classes = WebmanagerApplication.class) //配置事务的回滚,对数据库的增 ...
- Servlet生命周期与工作原理(转载)
Servlet生命周期分为三个阶段: 1,初始化阶段 调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...
- jQuery 效果 – 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动 演示 jQuery stop() 方法. jQuery s ...
- Linux中MySQL忽略表中字段大小写
linux 下,mysql 的表面默认是区分大小写的,windows 下默认不区分大小写,我们大多数在windows 下开发,之后迁移到linux(特别是带有Hibernate的工程),可以修改配置是 ...
- Hibernate之SchemaExport的使用
@Test public void testCreateDB(){ Configuration cfg = new Configuration().configure(); SchemaExport ...