HTML 链接是超链接。可以单击链接并跳转到另一个网页。当将鼠标移到链接上时，鼠标箭头将变成一只小手（链接不必是文本。链接可以是图像 或任何其他 HTML 元素）

网页链接语法：<a>

语法是：

<a href="url">link text</a>

元素最重要的属性是 href 属性，它指示链接的目标。<a>链接的文字是读者可见的部分。单击链接文字，会将读者发送到指定的URL地址。

例子：

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

默认情况下，链接将在所有浏览器中显示如下：

• 未访问的链接带有下划线和蓝色
• 访问过的链接带有下划线和紫色
• 活动链接带有下划线和红色

HTML 链接 - target

默认情况下，链接的页面将显示在当前浏览器窗口中。 若要更改此设置，必须为链接指定另一个目标。指定打开链接网页的位置使用target属性，target属性可以具有以下值之一：

• _self - 默认，在该链接被点击时在相同的窗口/选项卡打开网页
• _blank - 在新的窗口/选项卡打开网页
• _parent - 在父框架中打开网页
• _top - 在窗口的整个正文中打开文档

例子：

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

绝对URL与相对URL

上面的两个示例都在属性中href使用绝对 URL（完整的网址）。本地链接（指向同一网站内页面的链接）可以使用相对 URL（没有 “https://www”部分）：

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

使用完整的 URL 链接到网页：

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

链接到位于当前网站上的 html 文件夹中的页面：

<a href="/html/default.asp">HTML tutorial</a>

链接到与当前页面位于同一文件夹中的页面：

<a href="default.asp">HTML tutorial</a>

使用图片作为链接

要将图片用作链接，只需将标签·<img>放在标签<a>内

例子：

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

链接到电子邮件地址

在属性中使用以创建打开用户电子邮件程序的链接 （到 让他们发送一封新电子邮件）： mailto: href

<a href="mailto:someone@example.com">Send email</a>

按钮作为链接

要使用HTML按钮作为链接，必须添加一些JavaScript代码。JavaScript 允许您指定在某些事件中发生的情况，例如单击按钮：

例子：

<button onclick="document.location='default.asp'">HTML Tutorial</button>

链接标题

title属性指定有关元素的额外信息。 当鼠标移到元素上时，信息通常显示为工具提示文本。类似hint。

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

链接颜色

HTML 链接以不同的颜色显示，具体取决于 它是否已访问、未访问或处于活动状态。

默认情况下，链接将显示如下（在所有浏览器中）：

• 未访问的链接带有下划线和蓝色
• 访问过的链接带有下划线和紫色
• 活动链接带有下划线和红色

可以使用 CSS 更改链接状态颜色：

例如设置未访问的链接将为绿色，没有下划线。访问过的链接 将为粉红色，不带下划线。活动链接将为黄色并带有下划线。 此外，当鼠标悬停在链接上（a.hover）时，它将变为红色并带有下划线：

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

链接按钮颜色

也可以通过使用 CSS 将链接样式设置为按钮：

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

html书签

HTML链接可用于创建书签，以便读者可以跳转到网页的特定部分。

如果网页很长，书签可能很有用。要创建书签 - 首先创建书签，然后添加链接 到它。单击链接时，页面将向下或向上滚动到带有书签的地方。

首先，使用该属性id创建一个书签：

<h2 id="C4">Chapter 4</h2>

然后，从同一页面中添加指向书签的链接（“跳转到第 4 章”）：

<a href="#C4">Jump to Chapter 4</a>

还可以在另一个页面上添加指向书签的链接：

<a href="html_demo.html#C4">Jump to Chapter 4</a>