链接和导航

单一的页面本身是一个孤岛。链接是将页面连接成网络的东西：它们让访问者移动到另一个页面、跳转到更下方的部分，或打开电子邮件应用来给你写信。所有这一切背后的元素是锚，<a>，它与一个叫做 href 的属性配合工作。如果元素和属性这些词对你来说还很陌生，可以查看什么是 HTML 章节。

锚元素

链接是用**锚元素**制作的，写作 <a>。你给它一个 href 属性，这是链接指向的位置，而在开启标签和关闭标签之间的文本是访问者看到并点击的内容。

html

<a href="https://scrimba.com">访问 Scrimba</a>

文字 "访问 Scrimba" 会显示为一个可点击的链接。点击它，浏览器就会加载 href 中的地址。

想象 href 是写在路标上的目的地，而链接文本是涂在标志牌上的标签。标签是人们读的东西；目的地是箭头指向的地方。

Juno锚元素锚是 <a href="...">：href 是它指向的地方，标签之间的文本是人们点击的东西。这就是整个元素。掌握这两个部分，你就可以链接到网络上的任何地方。

每个链接都需要一个指向的地址，有两种。绝对 URL 是完整的地址，以 https:// 开头，和你在地址栏中输入的地址一样。用它来链接到另一个网站：

html

<a href="https://scrimba.com">Scrimba 主页</a>

相对 URL 是到你自己网站上另一页的快捷方式。你给的是从现在的位置出发的路径，而不是完整的地址：

html

<a href="about.html">关于我们</a>

这个链接在与当前页面相同的文件夹中查找 about.html 文件。绝对 URL 是一个带有国家和城市的完整邮寄地址；相对 URL 是 "从这里往下两扇门"。

Juno绝对和相对 URL 两种地址：绝对 URL 是其他网站的完整 https://...，相对 URL 像 about.html 这样是到你自己网站上一个页面的快捷方式。完整邮寄地址对比 "从这里往下两扇门"。为你自己的页面开始使用相对链接，你会少输入很多。

默认情况下，点击链接在同一标签页中加载新页面，替换你所在的页面。有时你希望它在新标签页中打开，这样访问者可以保持你的页面打开。你用 target 属性设置为 _blank 来做到这一点：

html

<a href="https://scrimba.com" target="_blank">在新标签页中打开 Scrimba</a>

_blank 表示 "一个全新的空白标签页"。正常打开链接是穿过一扇门进入下一个房间；target="_blank" 打开第二扇门，这样第一个房间就保持原样了。

Juno链接目标、rel 和在新标签页中打开target="_blank" 在一个新标签页中打开链接，这样你的页面保持不变。省略它，链接在同一标签页中打开，这是大多数时候人们期望的。为指向其他网站的链接保留新标签页。

链接不只指向其他页面。它们也可以跳转到当前页面进一步下方的一个位置，就像目录所做的那样。首先，给你想到达的位置，例如一个标题，一个独特的 id 属性：

html

<h2 id="pricing">价格</h2>

然后通过在那个名字前面放一个 # 来链接到它：

html

<a href="#pricing">跳转到价格</a>

点击链接会将页面向下滚动到价格标题。#name 部分被称为**片段**。id 是你塞入页面中的书签，# 链接是你直接翻到它。

Juno页面内链接与片段 ID 给一个位置一个 id，然后用 # 和那个相同的名字链接到它，像 <a href="#pricing">。页面直接滚动到那里。把 id 想象成一个书签，把 # 链接想象成翻到它。

大多数网站在顶部有一行链接：首页、关于、联系。那是一个**导航**，它是一组聚集在一起的锚。HTML 有一个为它而生的元素，<nav>，它标记一个块为页面的导航：

html

<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系</a>
</nav>

每个链接都是一个普通的锚。把它们包装在 <nav> 中告诉浏览器和其他工具 "这个组是你如何在网站周围移动的"。

Juno构建导航导航是一组链接包装在 <nav> 中，像首页、关于、联系。<nav> 告诉所有东西 "这是你如何四处移动的"。里面的链接是普通的锚，没有新的东西要学。