网页设置锚点

锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接。

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

实例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4       <meta charset="utf-8" />
 5       <title>
 6        锚点
 7      </title>
 8     </head>
 9     <body>
10         <a name="top">11</a>
11       <br><br/>
12       <br><br/>
13       <br><br/>
14       <br><br/>
15       <br><br/>
16       <br><br/>
17       <br><br/>
18       <br><br/>
19       <br><br/>
20       <br><br/>
21       <br><br/>
22       <br><br/>
23       <br><br/>
24       <br><br/>
25       <br><br/>
26       <br><br/>
27       <br><br/>
28       <br><br/>
29       <br><br/>
30       <br><br/>    <br><br/>
31       <br><br/>
32       <br><br/>
33       <br><br/>
34       <br><br/>
35
36       <br><br/>
37       <br><br/>
38       <br><br/>
39       <br><br/>
40       <br><br/>
41       <br><br/>
42       <br><br/>
43       <br><br/>
44       <br><br/>
45       <br><br/>
46       <br><br/>
47       <br><br/>
48       <br><br/>
49       <br><br/>
50       <br><br/>    <br><br/>
51       <br><br/>
52       <br><br/>
53       <br><br/>
54       <br><br/>    <br><br/>
55       <br><br/>
56       <br><br/>
57       <br><br/>
58       <br><br/>
59
60       <br><br/>
61       <br><br/>
62       <br><br/>
63       <br><br/>
64       <br><br/>
65       <br><br/>
66       <br><br/>
67       <br><br/>
68       <br><br/>
69       <br><br/>
70       <br><br/>
71       <br><br/>
72       <br><br/>
73       <br><br/>
74       <br><br/>
75       <br><br/>
76       <br><br/>
77       <br><br/>
78       <br><br/>
79       <br><br/>    <br><br/>
80       <br><br/>
81       <br><br/>
82       <br><br/>
83       <br><br/>
84
85       <a href="#top" >头部</a>
86     </body>
87 </html>

2.同一页面跳转到不同位置

查看 Chapter 4。