前端必知必会-html链接

---

HTML 链接

几乎所有网页中都有链接。链接允许用户通过点击从一个页面跳转到另一个页面。

HTML 链接 - 超链接

HTML 链接是超链接。

您可以单击链接并跳转到另一个文档。

当您将鼠标移到链接上时，鼠标箭头将变成一只小手。

注意：链接不一定是文本。链接可以是图像或任何其他 HTML 元素！

HTML 链接 - 语法

HTML <a> 标签定义超链接。它具有以下语法：

<a href="url">链接文本</a>

<a> 元素最重要的属性是 href 属性，它指示链接的目的地。

链接文本是读者可见的部分。

单击链接文本，将把读者发送到指定的 URL 地址。

示例
此示例显示如何创建指向 baidu.com 的链接：

<a href="https://www.baidu.com/">访问 baidu.com！</a>

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

未访问的链接带有下划线且为蓝色
已访问的链接带有下划线且为紫色
活动链接带有下划线且为红色
提示：可以使用 CSS 设置链接样式！

HTML 链接 - target 属性

默认情况下，链接页面将显示在当前浏览器窗口中。要更改此设置，您必须为链接指定另一个目标。

target 属性指定在何处打开链接的文档。

target 属性可以具有以下值之一：

_self - 默认值。在单击时所在的同一窗口/选项卡中打开文档
_blank - 在新窗口或选项卡中打开文档
_parent - 在父框架中打开文档
_top - 在窗口的整个主体中打开文档
示例
使用 target=“_blank” 在新浏览器窗口或选项卡中打开链接的文档：

<a href="https://www.baidu.com/" target="_blank">访问 百度！</a>

绝对 URL 与相对 URL
上述两个示例都在 href 属性中使用绝对 URL（完整的网址）。

本地链接（指向同一网站内页面的链接）使用相对 URL（不带“https://www”部分）指定：

示例

<h2>绝对 URL</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.baidu.com/">百度</a></p>

<h2>相对 URL</h2>
<p><a href="html_images.asp">HTML 图像</a></p>
<p><a href="/css/default.asp">CSS 教程</a></p>

HTML 链接 - 使用图像作为链接

要使用图像作为链接，只需将 标记放在 标记内：

示例

<a href="hello.html">
<img src="xxx.gif" alt="百度" style="width:42px;height:42px;">
</a>

链接到电子邮件地址

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

示例

<a href="mailto:xxx@qq.com">发送电子邮件</a>

按钮作为链接

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

示例

<button onclick="document.location='xxx.html'">HTML</button>

链接标题

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

示例

<a href="https://www.baidu.com/" title="转到百度">访问百度</a>

有关绝对 URL 和相对 URL 的更多信息
示例
使用完整 URL 链接到网页：

<a href="https://www.baidu.com/">访问百度</a>

示例
链接到当前网站 html 文件夹中的页面：

<a href="/html/xxx.html">HTML</a>

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

<a href="xxx.html">HTML</a>

HTML 链接 - 不同颜色

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 链接可用于创建书签，以便读者可以跳转到网页的特定部分。

在 HTML 中创建书签
如果网页很长，书签会很有用。

要创建书签 - 首先创建书签，然后添加指向书签的链接。

单击链接时，页面将向下或向上滚动到书签所在的位置。

示例
首先，使用 id 属性创建书签：

<h2 id="C4">第 4 章</h2>

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

示例

<a href="#C4">跳转到第 4 章</a>

您还可以添加指向其他页面上的书签的链接：

<a href="html_demo.html#C4">跳转到第 4 章</a>

---

总结

本文介绍了的html的超链接使用，如有问题欢迎私信和评论