- 说到锚点,我们也许会需要稍微的思考一下,什么是锚点?
官方的答案是这样的:
- 那么你可能就会有下面的疑问,锚点能做什么啊?
回答就是,锚点可以理解为一个标记,一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。
- 还有就是怎么在实际的开发中使用锚点呢?
下面先看一个简单的代码展示吧,为了演示出实际浏览网页时对一个超长网页的模拟,我故意添加了一些段落。:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点的使用</title>
</head>
<body>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<a name="anchor1">这里是锚点1</a>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<a name="anchor2">这里是锚点2</a>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<a name="anchor3">这里是锚点3</a>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
<p>此处是一个段落</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
-
接下来就是在实际中对锚点的测试了。测试的方法是在超链接的后面跟上”#anchor_idNumber“.井号后面的字母就是我们设计好的锚点的name值。如:
http://127.0.0.1:8020/CSS_Study/anchor.html#anchor3
-
结果如下:
我们可以发现,网页直接就跳到了我们想要进行访问的锚点的定义的位置。因此我们的关于锚点的测试便成功的完成了。
end!
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow