以下资料整理自网路

1.锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

英文名：anchor
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

示例代码

在HTML页面中适当位置定义如下的锚点：
<a name="top">这里是TOP部分</a>
<a name="content">这里是CONTENT部分</a>
<a name="foot">这里是FOOT部分</a>
（您可以使用 id 属性来替代 name 属性，命名锚同样有效。[1]）
对于如上锚点的访问有两种方法
一种是利用超链接标签<a></a>制作锚点链接，主要用于页面内的锚点访问
<a href="#top">点击我链接到TOP</a>
<a href="#content">点击我链接到CONTENT</a>
<a href="#foot">点击我链接到FOOT</a>
另一种方式是直接在页面地址后面加锚点标记，主要用于不同页面之间的锚点访问
假如本页面的地址是http://文件路径/index.html，要访问foot锚点只要访问如下链接即可
http://文件路径/index.html#foot

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中的锚点介绍和使用的更多相关文章

  1. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  2. asp.net中缓存的使用介绍一

    asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...

  3. lua解析脚本过程中的关键数据结构介绍

    在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...

  4. linux中ldconfig的使用介绍

    linux中ldconfig的使用介绍 ldconfig是一个动态链接库管理命令,其目的为了让动态链接库为系统所共享. ldconfig的主要用途: 默认搜寻/lilb和/usr/lib,以及配置文件 ...

  5. 讨论SEO中是锚文本有效，还是纯文本有效呢？

    现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...

  6. html中设置锚点定位的几种常见方法（#号定位）

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  7. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  8. Apache中 RewriteRule 规则参数介绍

    Apache中 RewriteRule 规则参数介绍 摘要: Apache模块 mod_rewrite 提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求.它支持每个完整规则可以拥有不限数量 ...

  9. 使用Memcache在PHP中调试方法的介绍及应用

    使用Memcache在PHP中调试方法的介绍及应用 如果我们在网络开发中,特别是大访问量的web项目开发中,为了提高响应速度,减少数据查询运算,那么我们都会选用memcahce.首先我们必须要安装,接 ...

随机推荐

  1. 01 语言基础+高级：1-8 File类与IO流_day10【缓冲流、转换流、序列化流】

    day10[缓冲流.转换流.序列化流] 主要内容 缓冲流 转换流 序列化流 打印流 教学目标 能够使用字节缓冲流读取数据到程序 能够使用字节缓冲流写出数据到文件 能够明确字符缓冲流的作用和基本用法 能 ...

  2. C++---类成员变量定义为引用

    摘要:类成员变量是可以定义为引用类型的,但是我们需要注意一下用法 note1:在类中定义引用变量, 必须要在初始化列表中初始化该成员变量(const 类型数据成员也必须在初始化列表中进行初始化) #i ...

  3. Mybatis配置文件无故报错、无自动完成提示的解决方法，及自动生成主要配置项

    1.引子 Mybatis配置文件显示红叉有错误,而实际检查又没有错误,这是因为开发环境不能识别这种类型的xml文件.要解决这个问题,就要让IDE开发环境能够“认识”这个文件类型,我们要让IDE环境将这 ...

  4. Adaboost算法及其代码实现

    . . Adaboost算法及其代码实现 算法概述 AdaBoost(adaptive boosting),即自适应提升算法. Boosting 是一类算法的总称,这类算法的特点是通过训练若干弱分类器 ...

  5. shell时间函数

    function getlastday(){ if [ $# -lt 2 ]; then echo "usage: getlastday month dayofweek" echo ...

  6. G. Minimum Possible LCM

    https://codeforces.com/contest/1154/problem/G #include<bits/stdc++.h> using namespace std; typ ...

  7. 解决UITextView无法滚到底部

    程序中有一个UITextView控件 @property (weak, nonatomic) IBOutlet UITextView *textView; 一般情况下,以下代码可实现UITextVie ...

  8. 再来看看Java的新特性——其他新特性

    关于剩余Java8新特性知识点总结,包含:默认方法.Optional.CompletableFuture.时间相关. 默认方法 默认方法皆在帮助Java新功能可以兼容低版本JDK已开发的程序. 比如说 ...

  9. windows10使用npm安装vue、vue-cli

    从网上下载了一个免费的vue.js前端模板,准备和Django整合出一个项目出来,然后发现前端代码都是.vue文件,已经整合过.html,很容易,感觉这个.vue的前端稍微复杂一些 本文主要参考博客及 ...

  10. 随机函数rand（）的使用方法——C语言

    原理: 引用自百度百科: 所需包含的头文件: #include <stdlib.h> rand()函数是按指定的顺序来产生整数,因此每次执行上面的语句都打印相同的两个值,所以说C语言的随机 ...