首页 > 代码库 > 网页设置锚点

网页设置锚点

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

    

HTML 链接 - name 属性

 

name 属性规定锚(anchor)的名称。

 

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

 

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

 

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

 

命名锚的语法:

 

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

 

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

 

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

 

实例

 

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

 

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

 

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

 

<a href="http://www.mamicode.com/#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=http://www.mamicode.com/"#top" >头部</a>
86     </body>
87 </html>

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

查看 Chapter 4。

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla

 

   

网页设置锚点