学习超链接的基础知识

链接或超链接是将一个网页连接到另一个网页的关联。 将您的页面相互连接非常重要,这样用户和搜索引擎才能了解相关页面的相关性。 除了连接您自己的网页之外,您可能还需要链接到外部网站以提供有关相关内容的更多信息。

本文介绍了超链接结构的基础知识、链接类型以及链接网页时应注意的事项。

超链接结构

超链接由两个简单的部分组成:

  • 一个称为统一资源定位器的 URL,它只是您要链接的网页的地址。
  • 锚文本是用户在浏览器窗口中可见的文本。

超链接结构

超链接结构

超链接类型

根据网页中的使用情况,超链接可分为以下类别之一:

  • 文字链接
  • 图片链接
  • 链接到文件
  • 链接到电子邮件 ID

创建文本超链接

网站的大部分导航都包含一个文本超链接,包括菜单和面包屑。 为了创建超链接,您需要使用 HTML 锚标记 。 创建文本链接的示例代码如下:

代码

<a href="https://www.webnots.com">A Knowledge Sharing Platform for Webmasters</a>

它看起来如何

网站管理员的知识共享平台

Href 是一种称为超链接引用的属性,用于链接所请求的资源,该资源可以是网页、文件或电子邮件 ID。 如下图所示,当将鼠标移到锚文本上时,用户只会看到内容中的锚文本,并且链接 URL 将显示在浏览器的右下角或左下角(或 Internet Explorer 的状态栏)。

文本链接示例

文本链接示例

图片链接

与文本链接类似,您可以链接图像以导航到任何其他网页,下面是将图像链接到网页的示例代码。

代码

<img border="2" src="https://mmys.club/wp-content/uploads/2022/04/Search-Engine-Submission.png" alt="Search Engine Submission" width="300" height="250">

它看起来如何

搜索引擎提交

搜索引擎提交

替代文本是图像中的一个重要元素,将用于搜索引擎理解图像。 如果图像不受支持,Web 浏览器将显示替代文本。

链接到文件

链接的另一个重要用途是将文本或图像连接到网络服务器中上传的文件。 例如,下面是与 HTML 按钮标签一起使用的示例代码,用于创建将下载 PDF 文件的文本链接。

代码

<button>
<a href="https://img.webnots.com/2014/05/Submit-Site-to-Search-Engines.pdf"> Download Site Submission Guide for Search Engines</a>
</button>

链接到电子邮件 ID

电子邮件 ID 也可以链接到文本或图像,以使用户能够通过单击文本或图像来发送邮件。 以下是将电子邮件 ID 链接到文本的示例代码。 单击锚文本将打开计算机上的默认电子邮件程序,其中包含“收件人”地址中提到的超链接参考电子邮件 ID。

代码

<a href="https://www.webnots.com/learn-basics-of-hyperlinks/mailto:[email protected]">Contact Us</a>

它看起来如何

联系我们

超链接的默认颜色

默认情况下,超链接以以下颜色显示:

关联 颜色
未访问的链接 蓝色的
访问链接 紫色的
活动链接 红色的

链接的所有属性都可以直接在任何特定网页的 HTML 内容中进行修改,也可以使用 CSS 进行修改以反映在您的所有页面中。

默认情况下,您链接的页面在同一窗口中打开,可以使用 target 属性修改为在新窗口中打开,如下所示:

<a href="https://www.webnots.com" target="_blank">
A Knowledge Sharing Platform for Webmasters
</a>

查看  Bing 网站管理员工具中的 Bingbot 抓取控制设置

类似文章