HTML链接代码允许您将网站上的元素（如文本和图像）转换为可点击的超链接。

这些超链接可帮助用户浏览网页。

当您正确地将它们用于内部链接时—从您网站上的一个页面链接到您网站上的另一个页面-它们也可以提供SEO好处。

本指南向您展示如何编写各种HTML链接。 以及如何使用简单的CSS设置链接的样式。

我们开始吧。

什么是超链接？

超链接，通常称为链接，是将一个资源链接到另一个资源的引用。 它包括一个可点击的元素，如单词、短语、图像或图标。

单击超链接会启动操作。 就像把用户带到不同的网页一样。 或者发起一个电话。

编写自己的超链接很容易。 只要你理解an的语法锚元素（也称为安标签).

锚元素语法

锚元素有四个组件:

1. 一个开始标签:这是锚元素的开始，表示链接元素的开始
2. 标签属性+属性值:在开始标记中，您可以包含不同的属性。 属性提供了额外的信息，如链接应该如何表现或它应该带用户去哪里。 （稍后我们将深入研究不同的属性。)
3. 锚文本或其他内容:这是用户点击的内容
4. 结束标签:这表示链接元素的结尾

让我们用一个简单的例子将所有四个点联系在一起。 下面的示例使用href属性. 它指定链接的目的地-在这种情况下，Semrush的主页。

目的地也可以是网页或可下载文档上的特定位置。

注意事项:您可以在锚点元素中使用一个或多个属性。

如何在HTML中编码链接

让我们通过如何编写一个简单的链接到您的网站的网页HTML.

首先，从你的锚标记开始:

接下来，使用href属性添加主页的URL:

现在，添加人们将点击的锚文本以转到您的链接:

你的锚文本应该是描述性的。 因此，当用户点击你的链接时，他们会知道他们最终会在哪里。

搜索引擎还使用锚文本来了解您链接到的页面。 所以好的锚文本可以提高你的搜索引擎优化。

从ConvertKit中获取以下"时事通讯最佳实践"的锚文本。 读者和搜索引擎知道，如果他们访问该链接，他们最终会出现在有关时事通讯最佳实践的页面上。

像"点击这里"这样的非描述性的东西没有给出足够的上下文。 让人和搜索引擎感到困惑。

塞姆鲁什氏现场审核工具可以检查您的网站与非描述性锚文本的链接.

首先，点击"+创建项目"按钮。

输入您的域并为您的项目命名。 然后点击"创建项目.”

接下来，配置您的设置。本网站审核配置指南给你一个详细的演练，如果你需要帮助。

然后，点击"问题"和搜索"描述性的。"这显示了具有非描述性锚文本的链接的报告:

单击链接以查看非描述性链接和没有锚文本的链接列表。

然后，更新列出的链接的锚文本，以帮助用户和搜索引擎更好地了解链接页面的内容。

现在您已经知道如何编写基本链接，让我们深入了解可以添加到HTML链接代码中的其他属性和值。

1. 与图像和媒体的链接

您可以通过向锚标记添加源来使图像或Gif等媒体可点击:

在这里，您包含指向媒体的链接（在本例中为图像），而不是锚文本。

在上面的代码中:

• src公司代表"源"并指定媒体的位置/URL
• 阿尔特包含阿尔特文本-屏幕阅读器使用的描述性文本，并在图像未加载时显示-如果使用图像作为链接（下图）

2. 链接到特定页面部分（锚点链接）

锚点链接-也称为跳转链接-使用此代码将用户带到页面上的特定位置:

它们帮助读者更好地浏览页面以找到他们需要的内容（如目录）。

首先，通过在开始标签中给它一个ID来标记锚点—链接将带读者的位置。 像这样:

您可以将ID分配给任何HTML元素. 在上面的例子中，我们将它分配给一个

标题标签。

现在，测试ID以确保它有效。 使用如下哈希将ID添加到URL的末尾:

将链接粘贴到浏览器的地址栏中。 按enter键以确保它将您引导到页面上分配的ID位置。

如果有效，您可以将链接添加到href属性。

3. 在新窗口/选项卡中打开链接

您可以选择是在同一窗口中打开链接，还是在具有目标属性的新选项卡中打开链接。

对于同一个窗口，使用target="_self"属性值，如下所示:

默认情况下，链接在同一窗口中打开。 所以，使用"_self"是没有必要的。 但它可以帮助您澄清特定超链接的意图。

要在新选项卡中打开链接，请将"_self"替换为"_blank":

出于可访问性原因，链接通常最好在同一选项卡中打开。

4. 连结至电邮地址

添加mailto值会在用户单击您的链接时打开他们的电子邮件提供商:

例如，链接到您的支持电子邮件，以便客户可以轻松提交他们的问题。

只要确保你的锚文本表明一个电子邮件应用程序将打开从点击链接. 像"给我们发电子邮件"或"发送电子邮件"这样的东西清楚地传达了信息。

这样，当意外的应用程序打开时，用户就不会措手不及。

5. 连结至电话号码

发起呼叫

连接电话号码发起呼叫。 您可以使用tel值链接到电话号码:

发起短信

您还可以使用"sms"值启动文本消息:

与电子邮件属性一样，请确保用户知道点击时会启动电话或短信。

6. 创建下载链接

用于创建下载的HTML代码类似于链接到URL，如下所示:

当用户点击链接时，他们的设备将自动下载该文件。

在选择要用于链接的文件时，请记住一些事情:

• 在锚文本中包含文件类型，以便用户知道他们正在下载什么
• 使用广泛支持的文件类型，这样用户就不需要额外的软件来打开它们
• 提及文件大小，以便用户可以确定他们是否有足够的文件空间

7. 使用辅助功能属性链接

Aria-label属性允许您描述指向屏幕阅读器的链接。 像这样:

当锚文本不是描述性的时，它很有用。

例如，假设您显示内容片段并包含"阅读更多"链接:

使用"咏叹调标签"，您可以在"阅读更多"链接后面添加更多上下文。

这样，使用屏幕阅读器的人就会知道链接的用途。

8. 与标题属性链接

当用户将鼠标悬停在链接上时，title属性显示文本:

你可以通过添加标题属性来获得这个文本:

使用它为您的链接提供额外的上下文。

例如，告诉用户，如果他们点击链接，他们最终会在哪里。 在这个例子中，标题文本可以这样说："单击此链接以获取有关此主题的深入指南www.example.com。"

9. 向链接添加关系

向链接添加关系有助于搜索引擎和浏览器了解链接文档与当前文档之间的连接。

例如，如果您与其他企业合作，则会将rel="sponsored"属性值添加到锚点元素，如下所示:

这告诉搜索引擎该链接是广告/赞助合作的一部分。

以下是一些其他常见的关系属性:

• 诺弗洛:指示搜索引擎忽略该链接以进行搜索排名。 当您链接到您不一定认可的内容时，或者当您想要阻止搜索引擎将链接公平传递到链接页面时，请使用。
• 没有开瓶器:防止打开的页面访问来自原始页面的信息的安全措施。 使用target="_blank"属性值时使用。 它有助于保护您的网站免受潜在的安全漏洞。
• 诺菲勒:阻止浏览器将原始页面的地址作为引用者发送。 当您不希望链接页面跟踪您网站的推荐流量时使用。

使用CSS样式和设计链接

使用CSS，您可以通过更改链接的颜色和设计来设置链接的样式以匹配您的品牌。

CSS代表层叠样式表。 它是一种样式表语言，告诉web浏览器如何显示用html等标记语言编写的web文档。

我们将讨论两种编辑CSS的方法:

1. 内联CSS
2. 外部CSS文件

内联CSS

内联CSS允许您在单个元素的HTML代码中添加样式。

只需添加一个style属性。 像这样:

在这段代码中，我们使用"样式"来添加颜色。

您可以使用以下方法更改颜色:

• 颜色关键字（如红色）
• 十六进制代码
• RGB和RGBA值
• HSL值

如果要删除超链接的下划线，可以使用"text-decoration:none;"属性。 像这样:

当您需要使一个超链接看起来与其他超链接不同时，内联CSS可以工作。

例如，假设您的链接都是绿色的。 但是你有一个可下载的文件，你希望链接是橙色的。 为此，请使用内联CSS。

外部CSS文件

外部CSS文件允许您设置全局样式。

在外部CSS文件中，添加以下代码:

与内联CSS一样，您可以使用颜色关键字，十六进制代码，RGB和RGBA值或HSL值来设置链接的颜色。

检查网站审核的超连结

为了给用户一个很好的体验，请确保您的超链接在任何时候都工作。

这样，用户就不会陷入死胡同，可以找到他们需要的东西。

使用Semrush的现场审核工具来检查您的网站损坏的链接。

点击"问题"和搜索"破碎。”

这显示您哪些链接需要您的注意。 修复它们，以便用户可以轻松导航您的网站，并单击指向外部网站的链接。

今天免费试用网站审核。