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.首先我们必须要安装,接 ...
随机推荐
- KVM---虚拟机网络管理
在上篇博客中我们完成了 KVM 虚机的安装,但是我发现虚机内的网络是不通的(当然了,在写这篇博客的时候已经把上篇博客中的配置文件修改好了,网络也是通的了,嘻嘻),所以这篇博客总结了一下虚机的网络连接方 ...
- 富文本编辑器Tinymce的示例和配置
Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...
- HDU重现赛之2019CCPC-江西省赛
本人蒟蒻,5个小时过了5道,看到好几个大佬AK,%%%%%%% http://acm.hdu.edu.cn/contests/contest_show.php?cid=868 先放大佬的题解(不是我写 ...
- 四十三、LAMP与LNMP web架构深度优化实战-第二部
1. 配置nginx gzip压缩功能 服务器对发出的内容进行压缩,带宽少了,体验好,速度快,但是服务端压,会使cpu使用高,压缩比高的进行压缩:文本.程序文件.数据文件.图片视频不要压缩,一般 ...
- 吴裕雄--天生自然 pythonTensorFlow图形数据处理：windows操作系统删除tensorflow
输入:pip uninstall tensorflow Proceed(y/n):y
- poj1386单词连接（欧拉欧拉欧拉）
///单词连接,欧拉回路通路都可以(有向图) ///主要构图:比如possibilities就构造p->s的边////题目大意:给你若干个字符串,一个单词的尾部和一个单词的头部相同那么这两个单词 ...
- Appium获取元素的方式
1.apk包名和launcherActivity 1.1.获取包名 所有应用包名列表 adb shell pm list packages 第三方应用包名列表 adb shell pm list pa ...
- ZJNU 1129 - The sum problem——中级
枚举区间可能的长度len,将m减去1~len构成的序列和后如果结果是len的倍数,则可以构成答案区间. /* Written By. StelaYuri */ #include<stdio.h& ...
- mock简单的json返回
针对非常简单的json返回串,我们也不一定非得通过freemarker模板的方式来构造返回数据,这里看实际的需求,如果返回的内容是固定的,而且json又非常简单,我们也可以直接写在程序里面,下面的接口 ...
- java高并发之线程池
Java高并发之线程池详解 线程池优势 在业务场景中, 如果一个对象创建销毁开销比较大, 那么此时建议池化对象进行管理. 例如线程, jdbc连接等等, 在高并发场景中, 如果可以复用之前销毁的对 ...