html中的锚点介绍和使用
以下资料整理自网路
1.锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
示例代码
2.html 锚点 到底是干吗的?
通俗简单地说,比如一篇很长的文章,你想按分段精确来看,那就可以用到锚点了。
代码:
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略
其实锚点只需name就可以可,加id是为了让它兼容性更好.
href的值要跟name \ i d 一致,前面必须加"#",以上代码在ie6/7,ff中都可以兼容,但在ie8中就不行。
因为我们锚点的<a></a>值为空,为不影响美观我们加个空格就行了,
如以下代码,就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略
另一问题,想显示某页面(如:123.html)的某锚点内容呢?
代码如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略
这是昨天在做后台时候,想实现“修改定位”,就把锚点标记搬了出来(平常它都被我遗忘)。
但是程序那边说他们要取值,连接中必须要有“?”或“&”,那这样我的锚点就不兼容了...
呵呵!以后会有解决方法的!
虽然在jsp页面中锚点兼容有问题,但是在静态页面中是没有问题的,还是值得学下的!
3.在 WEB 开发中,会使用到页面锚点。HTML 页面锚点用于链接到一个页面的某一章节。W3School 中说到,创建锚点使用 <a> (锚)标签和 name 属性,但这不是创建页面锚点的唯一方法。下面简要说一下制作 HTML 页面锚点的两种方式。
我们可以利用 W3School 的在线测试工具来进行测试。打开链接后的测试代码使用的是 <a href=”#C4″> 和 <a name=”C4″>,测试没有问题。再将“ <h2> <a name=”C4″>Chapter 4 </a> </h2>”改为“ <h2 id=”C4″>Chapter 4 </h2>” 后进行测试,效果一样。
说明,制作页面锚点除了使用 锚点标签 name 属性之外,还可以使用 id 属性。锚点 <a> 标签中 href 属性的值为 # 开头加上目标的 name 或 id 的值:
<html>
<body>
<p>
<a href="#method1">页面锚点方法一</a>
</p>
<p>
<a href="#method2">页面锚点方法二</a>
</p>
<h2><a name="method1">方法一</a></h2>
<p>使用锚标签的 href 和 name 属性</p>
<h2 id="method2">方法二</h2>
<p>使用锚标签和 id 属性</p>
</body>
</html>
html中的锚点介绍和使用的更多相关文章
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- asp.net中缓存的使用介绍一
asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...
- lua解析脚本过程中的关键数据结构介绍
在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...
- linux中ldconfig的使用介绍
linux中ldconfig的使用介绍 ldconfig是一个动态链接库管理命令,其目的为了让动态链接库为系统所共享. ldconfig的主要用途: 默认搜寻/lilb和/usr/lib,以及配置文件 ...
- 讨论SEO中是锚文本有效,还是纯文本有效呢?
现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 【js】IE、FF、Chrome浏览器中的JS差异介绍
如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject ff ...
- Apache中 RewriteRule 规则参数介绍
Apache中 RewriteRule 规则参数介绍 摘要: Apache模块 mod_rewrite 提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求.它支持每个完整规则可以拥有不限数量 ...
- 使用Memcache在PHP中调试方法的介绍及应用
使用Memcache在PHP中调试方法的介绍及应用 如果我们在网络开发中,特别是大访问量的web项目开发中,为了提高响应速度,减少数据查询运算,那么我们都会选用memcahce.首先我们必须要安装,接 ...
随机推荐
- Java 开发者必须了解的 16 个Java 顶级开源项目!
本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb/JavaGuide ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核 ...
- Python中比较特殊的几种数据类型list、tuple、dict、set
list list(列表)是Python内置的一种数据类型,它是一种有序.可变的集合,可以随时添加和删除其中的元素. >>> classmates = ['Li', 'Tom', ' ...
- CSS知识点小结
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现. 一.nobr语法 <nobr>内容</nobr> 不 ...
- jupyter notebook的扩展插件
具体安装使用,请参考 https://github.com/ipython-contrib/IPython-notebook-extensions
- Educational Codeforces Round 80 (Rated for Div. 2)D E
D枚举子集 题:https://codeforces.com/contest/1288/problem/D题意:给定n个序列,每个序列m个数,求第i个和第j个序列组成b序列,b序列=max(a[i][ ...
- 静态、动态cell区别
静态cell:cell数目固定不变,图片/文字固定不变(如qq设置列表可使用静态cell加载) 动态cell:cell数目较多,且图片/文字可能会发生变化(如应网络请求,淘宝列表中某个物品名称或者图片 ...
- Springboot配置注入
springboot中如何将yml 配置文件中配置,在类中注入使用 ①第一种使用@value方式 ################## 配置文件 ######################### d ...
- 线程池-进程池-io模型
一.线程池与进程池 什么是池?简单的说就是一个容器,一个范围 在保证计算机硬件安全的情况下最大限度的充分利用计算机, 池其实是降低了程序的运行效率,但是保证了计算机硬件的安全,也是实现了一个并发的效果 ...
- VS IDE调试下将打印日志输出到输出窗口
int aBeginTime = GetTickCount(); TRACE("Current time begin:%d \n", aBeginTime); 查看输出窗口:
- Flume(三) —— 断点续传 与 事务
断点续传 # Name the components on this agent a1.sources = r1 a1.sinks = k1 a1.channels = c1 # Describe / ...