3.3 HTML 链接（Links）

链接 是HTML的基础元素，因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。

HTML的 超文本（HyperText） 部分定义了链接的类型即：超文本链接（hypertext links）, 也就是 超链接（hyperlinks）。

在HTML中，链接是内联元素，使用 <a> 标签。

href（hypertext reference） 属性用来定义链接的目标地址（当点击时跳转或新打开的网页地址）。

<p>
  要搜索网页动画，请访问 <a href="https://www.xnip.cn">xnip</a>.
</p>

要搜索网页动画，请访问 xnip.

链接是网页的主要交互方式：通过点击链接，你可以在文档之间来回浏览。

你可以定义3种类型的目标。

• 锚点（anchor），用来在网页内部跳转。
• 相对 URL，用来在网站内部跳转。
• 绝对 URL，通常用来在不同网站页面之间进行跳转。

锚点

锚点（Anchor） 用来跳转到同一页面的不同位置。通过在href属性中添加 # 符号，你可以定位到具有特定 id 属性的HTML元素所在位置。

比如，<a href="#footer"> 可以导航到同一HTML页面中的 <div> 元素。

相对URL

在同一网站的不同页面之间的跳转，通常使用相对路径的链接地址。这个相对指的是相对于当前页面。

比如，你的网站包含如下目录结构的HTML文件：

• my-first-website
  • home.html
  • https://www.xnip.cn/contact.html
  • my-posts
    • p1.html
    • p2.html

在 home.html 中你可以添加到其他页面的跳转链接，其中 https://www.xnip.cn/contact.html在同级目录下，p1.html和p2.html在子目录my-posts下面，具体代码如下：

<p>
    <a href="https://xnip.cn/contact.html">联系我们</a>.
    <a href="https://xnip.cn/my-posts/p1.html">第一篇文章</a>.
    <a href="https://xnip.cn/my-posts/p2.html">第二篇文章</a>.
</p>

联系我们 第一篇文章 第二篇文章

相对URL的概念基于网站服务器上的文件目录结构，每个网站都有一个文档根目录，相对URL就是相对于这个根目录的HTML文件路径。

绝对URL

绝对URL用来在不同网站资源之间进行跳转，由于要标识不同的网站，所以绝对URL实际上就是在上述相对URL之前添加网站域名（或IP）以及访问协议。

一个完整的绝对URL包含3个部分：

• 协议 https://
• 域名 xnip.cn
• 文件路径 /hello.html

绝对URL是自满足（self-sufficient）的，包含了页面访问的全部必要信息，可被用于任意的HTML文档中：

<p>
  Just say hey <a href="//xnip.cn/hello.html">Say hey :)</a>!
</p>

绝对URL和相对URL的选择

如果要定义外部网站的资源，显然只能使用绝对URL，如果是内部网站的资源，建议使用相对URL，一来代码要简洁，二来在域名变迁时，只要目录结构保持不变，代码就不需要做出修改。