HTML 超链接

超链接，即 hyperlink，是网页中很常见的元素，超链接能够让我们在各个独立的页面之间方便的跳转。

一、超链接简介

1、a 标签

使用方式：<a href=""> </a>，href 属性用来指明想要跳转到的地址或页面的路径，可以为相对路径，也可以为绝对路径。

• 文本超链接：

<a href = "https://juejin.cn/user/3826721310116519">Like_Frost 的掘金主页</a>

效果如下： Like_Frost 的掘金主页

• 图片超链接：

<a href = "https://juejin.cn/user/3826721310116519">
    <img 
    src="https://pics5.baidu.com/feed/42a98226cffc1e17ea273e1a00e82605728de984.jpeg?token=4cbdbe3238d0761dcc71727d73aae348" 
    alt="Like_Frost 的掘金主页" 
    title="Like_Frost 的掘金主页" />
</a>

在浏览器中显示为：

2、target 属性

默认情况下，超链接是在当前浏览器窗口打开新页面，可以用 target 属性来定义超链接打开窗口的方式。

使用方式：<a href=" " target=" "> </a>，其中，target 属性的取值如下：

属性值	备注
_self	默认值，在当前窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开链接

举例：<a href = "https://juejin.cn/user/3826721310116519" target="_blank">在新窗口打开 Like_Frost 的掘金主页</a>

效果如下：在新窗口打开 Like_Frost 的掘金主页

二、内部链接

通常使用的链接一般为外部链接，但要实现文件内部不同页面的跳转（不使用 router 的情况下），可以以 <a href = "page.html"> </a>的方式实现跳转，类似于图片的引用方式，在此处使用相对路径。

三、锚点链接

有些页面内容比较多，导致页面过长，用户需要不断拖动浏览器中的滚动条才能看到下面的内容，为了方便用户操作，可以使用锚点链接来优化用户体验。

锚点链接即使用链接来跳转到当前页面中的某一部分，是内部链接的一种，其使用方式如下：

    <a href = "#box"> 转到 box </a>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    ……
    <div id = "box"> 这是 box </div>

在浏览器中的效果为： 转到 box

当点击“转到 box”时，页面就会定位到 id 为 box 的地方，这里的 href 中要加入 #，说明这是一个锚点链接。

后记——关于页面中示例的跳转问题

在第一部分的文本超链接、图片超链接和第三部分的锚点链接中的三个示例，本意是展示在当前页面跳转的效果，但是掘金在文章发布后会再次进行排版和编译，文档中所有的超链接的 target 属性被设定为 “_blank”，所以会出现点击文章中的超链接会在新窗口打开的现象，在实际的应用中是不会存在这种情况的。

在 markdown 中使用的代码如下：

文章发布后的页面源码为：

所以会出现在新窗口打开页面的情况。