HTML 锚点

锚点标签 <a> 是一个至关重要的 HTML 元素，它构成了超链接，允许人们在各种网页、文件或网页的某个部分之间导航。它是 Web 的支柱之一，提供了关联内容的方式，并带来了浏览的便捷性。Href，通常缩写为 hypertext reference（超文本引用），是此标签最重要的属性，因为它包含了 URL 或路径的目的地。

什么是超文本和超链接？

在深入探讨锚点标签本身之前，了解超文本的概念总是很有益的。超文本是指在浏览器中显示并包含超链接的文本。超链接，也称为链接，使用户能够跳转到页面、文档，甚至单个页面内的不同位置。

HTML 锚点标签的 href 属性

href 属性用于定义要链接文件的地址。换句话说，它将用户导向目标页面。

语法

其中 *href* 代表包含目标地址的属性，*链接文本*代表用户可见的可点击文本。

链接到另一个 HTML 页面

说明

这将形成一个超链接，当激活时，默认情况下会在同一标签页中打开给定的文件（second.html）。

使用 target 属性为链接指定位置

如果我们希望将该链接打开到另一个页面，则可以使用 <a> 标签的 target 属性。借助此链接，您将被导向下一页。

注意：target 属性只能与锚点标签中的 href 属性一起使用。如果我们不使用 target 属性，则链接将在同一页面中打开。

使用 target 属性在新标签页中打开

您可以使用 target="_blank" 属性在另一个标签页或新窗口中打开链接。

示例

输出

Visit TPointTech (opens in new window)

说明

Target="_blank" 是一个指令，告知浏览器在新标签页中打开链接，而不会影响原始标签页。

使用 HTML body 属性自定义链接颜色

示例

说明

这将以十六进制颜色代码设置背景为红色，普通文本为黄色，未访问链接为蓝色，活动链接为黄色，已访问链接为粉红色。

带图片的锚点标签

锚点标签不仅可以用于文本，还可以用于创建图片链接。

示例

输出

The logo becomes clickable and redirects to the TPointTech website.

说明

图像被包含在 <a> 标签内而不是文本，图像本身就是一个超链接。

电子邮件和电话链接

电子邮件和电话链接也可以是锚点标签，这使得用户更容易与您个人联系。

示例（电子邮件链接）

输出

end email (opens the user's default email client with a new email to prachet@tpointtech.com).

说明

mailto: 方案会打开一个邮件客户端，并在地址字段中插入目标地址。

示例（电话链接）

输出

Call us (prompts a phone call on devices with calling capabilities).

说明

tel: 会通过智能手机或应用程序发起通话，从而允许拨号。

HTML 锚点标签的外观

• 未访问的链接显示为蓝色并带下划线。
• 已访问的链接显示为紫色并带下划线。
• 活动链接显示为红色并带下划线。

内部页面链接（锚点）

内部锚点也可以通过站点其他位置的锚点标签在同一网页上使用。

示例

输出

Clicking "Go to Section 1" scrolls down to the heading labelled "Welcome to Section 1."

说明

href="#id" 格式用于引用位于同一页面且具有相同 id 的元素。

使用锚点标签执行 JavaScript

通过 javascript: 协议，可以在锚点标签中执行 JavaScript 代码。

示例

输出

Clicking the link displays a browser alert that says, "Hello, user!"

说明

href=" javascript:..." 语法允许在锚点标签本身中使用内联 JavaScript。

其他锚点标签属性

可下载文件

示例

输出

Clicking the link starts downloading file.pdf.

说明

download 属性会提示浏览器下载文件而不是打开它。

rel 属性

示例

输出

Opens an external site in a new tab while ensuring security via rel.

说明

rel="noopener noreferrer" 的使用在链接在新标签页中打开时，可以防范安全威胁，例如反向标签劫持。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<a>	是的	是的	是的	是的	是的

结论

HTML 锚点标签是一个有用的标签，它使您能够将网页链接在一起，通过链接下载文件，并链接到电子邮件、电话号码，甚至 JavaScript。根据 href、target、download 和 rel 等特定属性，开发人员可以调整链接的行为以满足各种需求，从而创建最有效的功能和用户体验。

无论是纯文本链接、可点击的图片，还是主要的内部导航，锚点标签都是一个 Web 开发人员 需要掌握的关键技能之一。