关于HTML对"锚"的YY名词解释

最新推荐文章于 2021-09-22 17:59:21 发布

球意迹

最新推荐文章于 2021-09-22 17:59:21 发布

阅读量666

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/dandelion_qiu/article/details/77282185

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML中的锚点概念，通过与生活中船锚的比喻帮助理解其定位作用。锚点主要通过a标签的name或id属性创建，用于创建书签并实现页面内部跳转，方便用户快速定位到所需内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在刚开始学HTML时候有接触到"锚"这个东西,当时没怎么认真思考就大致知道是怎样一种存在,今晚在学后面的一个实例中再次出现了"锚"然而我却丁点都记不起这个东西.于是最快的方法找了下度娘,发现没答案都没讲清楚HTML的"锚"是何方神圣.嗯,摸索了下,大致应该是这样的.

首先,提下个人想法,我觉得代码的一些名词都是从生活中来,因为机器语言本来就是人创造的.所以当我们碰到一个新名词不理解的时候,不妨先去了解下在生活中它是什么意思,有些单词不懂扔进百度翻译过来也就知道了,可是就算是中文的锚,可能我见识少,我也不知道.百度百科了下(学术性的东西个人觉得百度百科还是别看了,一个名词反绕过来解释名词,解释的名词你也不懂,至少我是不懂,一些生活性的常识还是可以的)百科上的船锚图片就是下面这种东西.大概,锚,就是可以帮助你实现到达目的地的吧,话语解释不清,还是直接去图片感受吧.

回到HTML的锚中,对锚不熟,我们可以从我们熟悉的跟它关系密切的a标签入手.a标签,我们都知道,HTML实现链接的工具,普遍的情形,也是我们初学者熟悉的利用a标签的href属性链接到另一个页面上嘛,那要跟锚扯上关系,还得先看一个实例.

<!DOCTYPE html>
<html>
<head>
	<title>锚</title>
	<meta charset="utf-8">
</head>
<body>
<p ><a href="#rear">跳转到底部</a></p>
<p> <a name= "top"> 锚记位置 </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> 　 </p>
<p> 　 </p>
<p> 　 </p>
<p> <a id= "rear"> 尾部锚记位置 </a> </p>
<p> <a href= "#top"> 返回顶部 </a> </p>
</body>
</html>

这段代码,就是创建了两个锚点.引用W3School里的原话,链接 http://www.w3school.com.cn/html/html_links.asp#tips

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

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

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

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

命名锚的语法：

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

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

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

再给一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚</title>
</head>
<body>

<a name="html">HTML 教程</a><br>
<a name="css">CSS 教程</a><br>
<a name="xml">XML 教程</a><br>
<a href="/js/">JavaScript 教程</a>

<p>锚的数量:
<script>
document.write(document.anchors.length);
</script>
</p>

</body>
</html>