html 网页页面中的锚点(取名锚记)的应用详细介绍

下列材料梳理自网路

1.锚点是网页页面制做中非常连接的1种,又叫取名锚记。取名锚记像1个快速精准定位器1样是1种网页页面内的非常连接,应用非常广泛。
英文名:anchor
应用取名锚记能够在文本文档中设定标识,这些标识一般放在文本文档的特殊主题处或顶部。随后能够建立到这些取名锚记的连接,这些连接可迅速将浏览者带到特定部位。
建立到取名锚记的连接的全过程分成两步。最先,建立取名锚记,随后建立到该取名锚记的连接。

示例编码

在HTML网页页面中适度部位界定以下的锚点:
<a name="top">这里是TOP一部分</a>
<a name="content">这里是CONTENT一部分</a>
<a name="foot">这里是FOOT一部分</a>
(您可使用 id 特性来取代 name 特性,取名锚一样合理。[1])
针对如上锚点的浏览有两种方式
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 锚点 究竟是干嘛的?
通俗化简易地说,例如1篇很长的文章内容,你想按分段精准看来,那便可以用到锚点了。

编码:
<a href="#001">跳到001</a>
...文本省略
<a name="001" id="001" ></a>
...文本省略

实际上锚点只需name便可以可,加id是以便让它适配性更好.
href的值要跟name \ i d 1致,前面务必加"#",以上编码在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 网页页面锚点用于连接到1个网页页面的某1章节。W3School 中说到,建立锚点应用 <a> (锚)标识和 name 特性,但这并不是建立网页页面锚点的唯1方式。下面扼要说1下制做 HTML 网页页面锚点的两种方法。

大家能够运用 W3School 的线上检测专用工具来开展检测。开启连接后的检测编码应用的是 <a href=”#C4″> 和 <a name=”C4″>,检测沒有难题。再将“ <h2> <a name=”C4″>Chapter 4 </a> </h2>”改成“ <h2 id=”C4″>Chapter 4 </h2>” 落后行检测,实际效果1样。

表明,制做网页页面锚点除应用 锚点标识 name 特性以外,还能够应用 id 特性。锚点 <a> 标识中 href 特性的值为 # 开始再加总体目标的 name 或 id 的值:

拷贝编码
编码以下:

<html>
<body>
<p>
<a href="#method1">网页页面锚点方式1</a>
</p>
<p>
<a href="#method2">网页页面锚点方式2</a>
</p>
<h2><a name="method1">方式1</a></h2>
<p>应用锚标识的 href 和 name 特性</p>
<h2 id="method2">方式2</h2>
<p>应用锚标识和 id 特性</p>
</body>
</html>