Html链接标签解释(+所有属性和值)

HTMLtags有助于定义网站上资源之间的关系。

在这篇文章中，我们将探讨HTML链接标签是什么，如何使用它们，以及在将它们添加到您的网站或网页时要避免的常见错误。

什么是HTML链接标签？

HTMLtag是一个HTML标签（一段代码），在您所在的文档与其外部资源（文件或其他资产）之间建立连接。

你应该把HTML链接标签放在HTML文档的

节。像这样:

html格式>

目前支持HTML链接标签的浏览器包括:

铬合金
边缘
野生动物园
歌剧
火狐浏览器

不支持HTML链接标记的浏览器可能无法正确呈现它们。这意味着他们可能会完全忽略标签，根本不显示任何内容。

HTML链接标签的7个用途

让我们来看看HTML中链接标签的几个常见示例。

1. 链接外部样式表

外部样式表是具有级联样式表(CSS)代码的文件。此代码定义了类似网页的背景颜色的样式和布局。

要使样式表工作，您必须将其链接到要设置样式的页面。否则，浏览器不会知道它，也不会按您的预期显示。

以下是如何使用HTML链接标签链接到样式表:

html格式>

2. 显示图标

Fav图标是显示在浏览器选项卡或书签中的小图标。

这里有一个:

使用HTML链接标签，如下例所示，在各种浏览器中显示您的图标:

html格式>

3. 设置规范网址

A 规范网址指示网页的主要版本重复内容存在于整个站点。并告诉搜索引擎在有机（未付费）搜索结果中优先排序和排名哪个页面。

要指定规范页面，请使用HTML链接标签，如下所示:

html格式>

4. 设置页面的语言

该赫弗朗属性指定文档的语言和（可选）预期区域。如果您有不同语言的内容，这很有用。

为啥?

因为借助赫弗朗属性，搜索引擎可以向不同国家/地区的用户显示最相关的搜索结果。

例如，如果你在美国谷歌"semrush博客"，你会看到这个结果:

Google's result for “semrush blog” in the United States

但如果你在西班牙，你会看到这个:

Google's result for “semrush blog” in Spain

您可以使用HTML链接标签定义不同国家和语言的页面，如下所示（这一个有备用的西班牙语和法语版本）:

html格式>

5. 预加载特定资源

预加载指示浏览器在页面开始加载时（或之后不久）请求并将资源存储在其缓存中。这可以提高网站的性能、速度和用户体验。

一个常见的预加载请求是字体。你可以设置一个字体预加载与HTML链接标签像这样:

html格式>

您可以将资源设置为逐页预加载。

6. 连接您的RSS源

一个非常简单的聚合（RSS）提要是网站共享内容和更新的一种方式。

用户可以通过RSS阅读器订阅不同的网站，就像这样:

这可以让他们看到网站何时发布新内容。

使用HTML链接标签链接到您的RSS提要，以便用户可以订阅您的提要。

html格式>

7. 链接到外部字体

HTML链接标签允许您链接到外部字体（如Google字体中的字体）以在您的网站上使用。

下面是要使用的代码:

html格式>

其他HTML链接标签属性和值

链接标签属性提供附加信息并在开始和结束标记之间进行。

和价值指示分配给属性的特定内容。

属性及其值都指导HTML链接标记执行其指定的任务。换句话说，他们告诉它如何表现。

以下是当前HTML链接标签属性及其常用值:

属性	价值	定义	例子：
as	音频文件嵌入式取货/取货字体图像对象剧本风格轨道短片工人	指定链接资源的类型或角色。使用"预加载"属性时需要它。
[医]十字交叉	匿名使用-凭证	指示浏览器是否应以匿名方式获取[医]十字交叉请求-即不发送凭据（如cookie）
[医]优先权	高低汽车	帮助浏览器优先处理如何获取资源。这可以提高您的网站的性能时，正确处理。
href	网址	以链接资源的绝对或相对术语指示网址
赫弗朗	你可以使用ISO639-1或ISO3166-1阿尔法-2国家和语言代码	指示链接资源的语言（可能还有预期的国家/地区）
想象；想象	高x阔 or 视口宽度百分比(vw)	帮助预加载响应图像。仅与雷尔="预紧力"和as="图像一起使用。"
影像集	网址	指定图像列表。浏览器将选择最合适的图像来显示。仅与雷尔="预紧力"和as="图像一起使用。"
诚信正直	加密哈希值	提供用于验证链接资源完整性的哈希值。这可以在加载资源时为您提供额外的安全层。
媒体报道	全部印刷业屏幕演讲辞纵横比颜色颜色索引网格身高单色方向感决议案扫描阔度	指定链接资源设计用于的设备类型或屏幕大小
推荐政策	无推荐人无推荐人-降级时产地来源起源-当-交叉起源不安全-url	指定在获取资源时要包含多少引用信息
雷尔	候补作者规范,规范 dns-预取救命！图标许可证下一个平背,平背预连接,预连接预取,预取预紧力普雷伦德上一篇搜索样式表	指定当前文档与链接资源之间的关系
尺寸	任何高度x宽度尺寸	用于指示图标的大小。它只能与雷尔="图标一起使用。”
标题	文本	定义默认或备用样式表以跟踪链接的样式表。它不会影响浏览器如何应用它们。
类型	各种媒体类型，如: 文本/css 文本/java剧本图像/svg+xml	描述链接资源的媒体类型

实现链接标签时要避免的常见错误

以下是人们在将网站添加到他们的网站时经常犯的错误。通过避免它们，您可以确保您的链接标签运行良好，并且浏览器可以读取它们。

将标签添加到页面的正文部分

HTML链接标签属于

你的HTML文档的部分。

为啥?

因为根据语义HTML,的

HTML文档的部分是元数据应该去的地方. （元数据是描述数据的信息。和HTML链接标签被认为是元数据元素。)

如果将HTML链接标签添加到

例如，将样式表HTML链接标记放在

节可能会导致加载该网页样式的延迟。

您可以通过查看页面的源代码来检查链接标签的位置。右键单击浏览器中的页面，然后选择"查看页面源.”

然后，按Ctrl+F（Mac上的Command+F）并搜索

（你也可以搜索找到

节结束。)

查看代码以确保HTML中的链接标签位于

和标签。如果他们没有，请移动他们或联系您的web开发人员寻求帮助。

使用不正确的属性或值

只能使用与每个属性关联的特定值。而某些属性只能与其他属性一起工作。

例如，如果您在链接标签中使用"雷尔=预紧力"，您必须也使用as属性。

请参考我们上面的HTML链接标签属性及其值列表，以确保您使用的是正确的。

合并已弃用的属性

弃用-意味着过时-属性可能不起作用。因为现代浏览器通常会逐步淘汰对它们的支持。

像万维网联盟(W3c)这样的组织可能会出于各种原因决定弃用属性。就像改变技术一样。

例如，rev属性以前用于显示当前文档和链接文档之间的反向关系。例如:

这个HTML链接标签表示链接的文档(相关文档).html格式）是由当前文档制作的。

但由于rev属性只考虑反向关系，W3C弃用了它. 它现在建议人们使用雷尔属性，这更灵活。

下面是如何使用当前雷尔属性重做上面的示例:

HTML链接标记的其他不推荐使用的属性包括:

[医]字符：定义链接资源的编码
方法:提供有关可对链接对象执行的函数或操作的信息
目标：指定链接的文档是否应加载到窗口或框架中

检查您的代码中是否有任何这些属性。并在需要时用更合适的东西替换它们。

检查网站上的HTML链接标签问题

使用像Semrush这样的诊断工具现场审核跟踪网站上的技术问题。包括那些由HTML链接标签中的错误引起的.

下面是如何做到的。

打开现场审核. 输入你的域名网址，然后按"开始审核.”

这将打开一个菜单，您可以在其中配置所有设置。

接下来，点击"开始现场审核.”

审核完成后，您将收到一份关于需要改进的详细报告。

点击"问题"tab。

这将显示您网站的技术问题列表。

例如，具有重复内容的页面-这将受益于具有规范属性的HTML链接标签。

网站审核还会发现赫弗朗错误，规范标签错误和慢页。（慢速页面可能会受益于在HTML链接标记中使用[医]优先权属性。)

您可以点击"为什么以及如何解决它"在每个问题旁边，以更好地理解和解决问题。

清理这些问题有助于您在网站上创建出色的用户体验。并优化您的网页，以便搜索引擎可以轻松地抓取，索引和排名他们在搜索结果。

免费试用网站审核。