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

来源:互联网 发布:sql sever设置主键自增 编辑:程序博客网 时间:2024/05/11 17:47

在刚开始学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>



这是运行结果,可以自行改变代码看看结果.


大概我的理解就是,锚点就是你的目的点,也就是你要链接跳转到的那个地方,而这个行为就称之为锚,并且,在HTML中,称之为锚的行为只是发生在本页面中(我也不知道为啥哇).

有不同更好的理解的,欢迎评论交流.

原创粉丝点击