#014_Apl_Anchors
在 HTML 文档中有一个特别重要的功能,就是超级链接,浏览网页的用户可以使用 HTML 上的超链接,与网络上的另一个文档相连,你几乎可以在所有的网页中找到链接。所以今天,我们就来学习如何创建一个超链接。
如何创建超链接?
我们通过使用 anchors 标签在 HTML 中创建链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
上面是创建一种——让当前页面跳转到别的网页的超链接
语法:[a href="跳转目标地址"]链接文字段[a/]
下面是效果图,浏览页面的用户可以点击带下划线的文字,让当前页面跳转到别的网页。
这个超链接和上一个类型的超链接只有一个属性 target="_blank" 的不同,这个属性会使得浏览页面的用户点击带下划线文字时,保留当前的页面,另外重新开启一张空白的页面/浏览器标签页,用该空白页面跳转到目标网页。
从效果图来说看不出差异,只有使用的时候会有明显的不同体验,当你的页面内容需要两个页面都保留作为互相参考和对比(比如一些资料网站),你可以悬着创建带有 target="_blank" 属性值的超链接。如果只是制作新闻类型看完即换的网页,可以悬着创建从当前页面跳转的超链接。
另外一种Anchors的用法
如我们所知,anchors的原意时船锚的意思,那么它也有船锚的作用。创建船锚就像时在创建 HTML 页面中的书签一样。这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
这种书签不会以任何特殊的方式显示,它对读者时不可见的。
要完成船锚,首先要定义一个锚的名称。
像刻舟求剑一样,呸呸呸...这是抛船锚求剑,例如上面示范的,我在 body 开头,<h1>元素附近掉落了一支宝剑,我就在这里用抛下一个船锚——[a name="船锚的名字" /],这样我就会记着这个地方,然后当我完成事情了,到达页面的底部了。
我就使用咒语——[a href="#船锚的名称"]链接文字段[/a]来启动这个船锚,然后我就可以通过点击【链接文字段】,回到我当初抛锚的地方了。(DOTA船长的X技能)
超链接在实际项目中的运用
例如在项目的HomePage页面下,设置一个超链接,链接到一个介绍网页作者的页面,我们就可以这样使用——
然后我们可以点击页面中下图的链接跳转到项目的作者介绍页面(当然,你得另外准备好这个页面)
记得 #012 课程中我们学习的项目文件夹嘛?在地址中Homepage位于项目根目录下,而建立的的about me 页面,放在了 inner-page文件夹的about分类里面,所以在 href 里要清楚的写好 about me.html 位于什么文件夹中。
同样的,我们可以在 abouy me.html 制作一个返回到 HomePage 的超链接,这样就可以实现来回传送了。