基本上每个网页上都能找到链接（link）。链接允许用户通过点击它们跳转到一个新的网页或者当前网页的另一个位置，所以又称为“超链接”（hyperlink）。这东西有点儿像游戏里的“传送门”，是联系网络不同位置的重要手段。

下面简单介绍 HTML 中（超）链接及其特性，然后简单介绍 1. 如何创建到其它页面的链接；2. 如何创建页面内部链接。

0. 超链接¶¶

超链接使用 HTML 标记语言的 <a> 来标记。使用 <a></a> 标记包裹的内容可以是一个单词、一组单词（句子）或者是图片。点击之后可以跳转到另外一个文档，也可以跳转到当前文档内部的其它位置。这取决于 <a> 的属性设置。

默认情况下，当鼠标指针移到一个超链接（链接）上的时候，原来的“箭头”会变成“小手”。但是这可以通过 CSS 来控制和改变。

默认情况下，所有浏览器中链接的外观都是如下表现（当然也可以通过 CSS 来控制和改变）：

• 未被访问的链接带有下划线而且是蓝色的
• 已被访问的链接带有下划线而且是紫色的
• 活动链接带有下划线而且是红色的

做为一个 HTML 标签（元素），<a> 也支持很多 HTML 属性（attribute），包括 HTML 标准属性（所有 HTML 和 XHTML 标签都支持的属性，仅有少数例外）和 HTML 事件属性（使 HTML 事件触发浏览器中的行为，例如当鼠标滑过或者悬停，或者当用户点击某个 HTML 元素时启动一段 JavaScript）。

常用的 <a> 的属性有：

• 自有属性
  • href – 指定超链接的目的地址（url）（最重要的属性）
  • rel – 规定当前文档与目标 URL 之间的关系，一般不用设置，属性值可以是
    • alternate – 可相互替代的内容
    • author – 文档作者
    • bookmark – 书签
    • nofollow – 告诉搜索引擎不要此链接到的权重（可以理解为表示虽然链接了目标网页，但是却不认可目标网页）
  • target – 指定超链接的打开方式，一般不设置该属性，属性值可以是
    • _blank – 在新的窗口打开
    • _self – 在当前窗口打开
  • name – 规定锚的名称（此属性在 HTML5 中已被去掉。）
• 标准属性
  • class – 规定元素的类名（classname）
  • id – 规定元素的唯一 id，常用于制作页面内部链接（锚点）
  • style – 规定元素的行内样式（inline style）
  • title – 规定元素的额外信息（标题，可在工具提示中显示）
• 事件属性
  • onclick – 鼠标点击时的动作

1. 创建到其它页面的链接¶

HTML 链接的使用语法如下（尽量包含了上面的各个属性），

<a class="example-class" id="example-a-id" style="text-decoration: none; font-weight: bold;" title="这是一个 HTML 链接示例，链接到网站首页" href="https://cnzhx.net/" target="_blank" rel="alternate bookmark">水景一页</a>

显示到网页上就是这个样子：

水景一页

点击上面的链接会打开本站首页。鼠标悬停时能看到提示语，也就是 title 属性的值。

提示：

1. 上面示例中的四个字”水景一页“也可以是图片，或者其它 HTML 元素。
2. 如果目标地址是个目录（或目录形式），最好总是给链接的结尾加上一个 / 符号。例如，如果链接是

   href="https://cnzhx.net/blog"

   点击后服务器需要响应两次请求，第一次会将链接转变为

   href="https://cnzhx.net/blog/"

   第二次才打开转变后的网址（过程应该很快，但是我们应该尽量避免这种不必要的过程）。

2. 创建页面内部链接¶

前面提到过，id 属性常被用于创建到当前页面（文档）内部的链接，其作用类似于锚点（anchor）。也因此，HTML5 中将用于制作锚点的 <a> 的属性 name 取消了。

例如，在下面的位置创建一个”内部链接锚点位置“：

内部链接锚点位置

<a id="tips">内部链接锚点位置</a>

在同一个文档的其它位置创建一个到”内部链接锚点位置“的链接就是：

<a href="#tips">访问”内部链接锚点位置“</a>

显示出来就是，

访问”内部链接锚点位置“

而如果在别的文档中，还需要在 #tips 前面加上到目标文档的链接地址：

<a href="https://cnzhx.net/blog/html-links/#tips">访问 ”HTML 链接“ 页面上的”内部链接锚点位置“</a>

显示出来就是，

访问 ”HTML 链接“ 页面上的”内部链接锚点位置“

提示：

1. 所有支持 id 属性的 HTML 标签都可以做为锚点，直接创建到该锚点的链接就可以了。如，

   <h1 id="h1anchor">标题一</h1>

   就有了一个锚点 h1anchor。比如本文内部的几个小标题都设有锚点，并且在标题后面还用一个符号建了个超链接到当前锚点的位置。这主要是因为在页面上是看不到锚点的，查看页面源文件才能看到，不方便。可以点击这里跳转到 1. 创建到其它页面的链接 试试看。

2. 同一个页面内部不能有重复的 id 属性值。
3. 如果创建了一个指向页面内部位置的超链接，但是却没有写锚点文本，如

   <a href="https://cnzhx.net/blog/html-links/#">本文</a>

   就会指向该页面的顶部。例如本站页面底部的”TOP“按钮就是用这种方式制作的（查看回到顶部按钮的制作方法）。

另外，本站给文档内部锚点都用一个符号 ¶ 标记出来了，将下面的代码放到锚点后面就可以了（注意将其中 # 号后面的文本 anchor 改成对应的猫点名称）：

<span class="anchorlink"><a href="#anchor">¶</a></span>

其中 anchorlink 类的 CSS 样式是：

.anchorlink {
    background-color: transparent;
    color: transparent;
    text-decoration: none;
    font-size: smaller;
    margin-left: 0.25em;
    margin-right: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.anchorlink a:link {
    background-color: transparent;
    color: transparent;
    text-decoration: none;
}
h1:hover .anchorlink a,
h2:hover .anchorlink a,
h3:hover .anchorlink a {
    color: lightgray;
}

因为主要是针对 <h1> <h2> 等 HTML 标记使用页面内部链接。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/html-links/>。转载请保留此信息及相应链接。