HTML 锚点跳转使用

2020-12-17 17:32

阅读:841

标签:class   cal   htm   段落   rgba   锚点   dev   scale   set   

第一种方式:

 1 DOCTYPE html>
 2 html lang="en">
 3   head>
 4     meta charset="UTF-8" />
 5     meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     title>第一种锚点跳转title>
 7   head>
 8   body>
 9     
10     a href="#标题1">跳转标题1锚点a>br />
11     a href="#标题2">跳转标题2锚点a>br />
12     a href="#标题3">跳转标题3锚点a>br />
13  
14     h2 id="标题1">标题1h2>
15     p>这是一个段落p>
16     p>这是一个段落p>
17     p>这是一个段落p>
18     p>这是一个段落p>
19     p>这是一个段落p>
20     p>这是一个段落p>
21     h2 id="标题2">标题2h2>
22     p>这是一个段落p>
23     p>这是一个段落p>
24     p>这是一个段落p>
25     p>这是一个段落p>
26     p>这是一个段落p>
27     p>这是一个段落p>
28     h2 id="标题3">标题3h2>
29     p>这是一个段落p>
30     p>这是一个段落p>
31     p>这是一个段落p>
32     p>这是一个段落p>
33     p>这是一个段落p>
34     p>这是一个段落p>
35   body>
36 html>

第二种方式:

 1 DOCTYPE html>
 2 html>
 3   head>
 4     meta charset="utf-8" />
 5     title>第二种锚点跳转title>
 6   head>
 7   body>
 8     a href="#标题1">跳转标题1a>
 9     a href="#标题2">跳转标题2a>
10     a href="#标题3">跳转标题3a>
11     p>duanluop>
12     p>duanluop>
13     p>duanluop>
14     p>duanluop>
15     p>duanluop>
16     p>duanluop>
17     p>duanluop>
18     p>duanluop>
19     p>duanluop>
20     p>duanluop>
21     a name="标题1">a>
22     h1>标题1h1>
23     p>duanluop>
24     p>duanluop>
25     p>duanluop>
26     p>duanluop>
27     p>duanluop>
28     p>duanluop>
29     p>duanluop>
30     p>duanluop>
31     p>duanluop>
32     p>duanluop>
33     a name="标题2">a>
34     h1>标题2h1>
35     p>duanluop>
36     p>duanluop>
37     p>duanluop>
38     p>duanluop>
39     p>duanluop>
40     p>duanluop>
41     p>duanluop>
42     p>duanluop>
43     p>duanluop>
44     p>duanluop>
45     p>duanluop>
46     a name="标题3">a>
47     h1>标题3h1>
48     p>duanluop>
49     p>duanluop>
50     p>duanluop>
51     p>duanluop>
52     p>duanluop>
53     p>duanluop>
54     p>duanluop>
55     p>duanluop>
56     p>duanluop>
57     p>duanluop>
58   body>
59 html>

 

HTML 锚点跳转使用

标签:class   cal   htm   段落   rgba   锚点   dev   scale   set   

原文地址:https://www.cnblogs.com/dengdingyue/p/14070384.html


评论


亲,登录后才可以留言!