最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

6. html锚:用<a>元素创建html链接

HTML语言学习 林雍岷 294浏览

HTML <a> 元素(或称锚元素)可以创建通向其它网页、文件、同一页面内的位置、电子邮件地址或任何其它URL的超链接。 锚元素用于在源锚点(超链接指向的目标URI)和目标锚点(超链接起始的位置)之间创建超链接。源是链接到另一个资源的文本,图像或按钮,而目标是源锚链接到的资源。

超链接使Web成为信息高速公路的基础技术之一,而了解如何使用锚元素是学习HTML时需要掌握的首要知识之一。

锚元素

锚元素标签是字母“ a”,用尖括号包围,如下所示:<a> 。开头和结尾属性都是必需的,并且标签之间的所有内容都构成锚源。

语法

<a 属性="属性值">标签内容</a>

说明

a元素的“标签内容”定义了锚定位。name属性为当前锚点命名,使其成为其它链接的链接目标(目标锚点)。href属性使当前锚点成为某个链接的源锚点,也就是说当前锚点称为超链接的起始点,设置其跳转终点的URI。可见,a元素只是用来定义超链接的锚点位置,至于是目标锚点(超链接指向的目标URI)还是源锚点(超链接起始的位置)则由name属性和href属性决定;如果定义了name属性,则以别处作为源锚点的超链接可以链接到此处(锚点位置),当然,name属性只是预先定义一个目标锚点,至于是否真的有链接指向它都无所谓;如果定义了href属性,那么当前锚点称为源锚点,超链接可以指向href属性指定的目标锚点(表现为某个确切的URI)a元素是一个行内元素,它可以出现在文档主体内的任何位置,而且出现次数没有限制,但是不能相互嵌套终止标签不可省略。

锚元素代码实例

See the Pen anchor- by Peter (@linyongmin) on CodePen.default

尽管上面的代码实例生成锚元素,但它们没有多大用处,因为我们没有包含附加说明。现在这些锚元素没有链接到任何地方,要将源锚链接到目标锚,我们需要将一些附加属性添加到锚元素。

最常用的锚元素属性

我们需要知道创建超链接功能的三个固定属性:href,target和download。

指定超链接目标:href

超文本引用或href属性用于指定锚元素的目标或目的地。它最常用于定义锚元素应链接到的URL。

See the Pen specify-hyperlink-target-href by Peter (@linyongmin) on CodePen.default

href不仅可以链接到另一个网站,还有以下作用:

  • 它可以直接链接到网页上已分配ID的任何元素。
  • 它可以使用http以外的协议链接到资源。
  • 它可以用来运行脚本。

以下HTML包括上述三个作用的示例:

See the Pen href-beyond-hyperlink-target by Peter (@linyongmin) on CodePen.default

在上面的框中,你将看到在浏览器中呈现的HTML,请尝试点击每个链接查看会发生什么。href元素使用非常容易,接下来我们开始了解target属性使用方法。

指定位置打开链接:target

让我们回顾上一个示例创建的mailto链接,再次使用下面的代码:

See the Pen anchors-href-mailto by Peter (@linyongmin) on CodePen.default

虽然mailto链接很有用,但打开方式并不理想。根据你的计算机和浏览器的配置方式,单击该文本创建的链接可能会将你的浏览器窗口从该网站重定向到基于Web的电子邮件应用程序,例如Gmail或Yahoo邮件。当然我们希望访客不离开我们网站就能够联系我们。

这个问题的解决方法就是使用target属性与_blank值配对:

See the Pen anchors-href-mailto-target by Peter (@linyongmin) on CodePen.default

当我们在链接中添加target属性和_blank属性时,我们告诉访问者新的浏览器标签或窗口中打开链接,当访问者单击链接时,它将在新选项卡中打开。

指定要下载的资源:download

链接也用于告诉浏览器开始下载文件。download属性用于标识启动下载的链接,分配给下载属性是要下载文件的名称。

在设置启动下载的锚点元素时,href属性也会起作用。 当download属性为文件命名时,href属性指向文件的托管位置。

这是一个下载启动锚元素的示例:

See the Pen anchors-href-download by Peter (@linyongmin) on CodePen.default

如果以上示例中的href指向实际文件,则在下载完成后,下载的文件将称为6.5_using_prepared_statements.zip,其中.zip将是下载文件的格式。 不必再分配给download属性的值中包括文件类型扩展名。当浏览器下载文件扩展名时,将自动识别该文件扩展名,并将其自动附加到下载的文件名之后。

内部链接和外部链接

我们可以使用a元素链接到两种资源:内部和外部。内部链接是指向我们网站其他页面的链接。外部链接指向不属于我们网站的网页。

建立内部链接很重要,原因有几个:

  • 内部链接用于创建导航菜单,帮助网站访问者浏览我们的网站。
  • 内部链接用于网站内容中,帮助网站访问者找到相关内容。
  • 搜索引擎根据内部链接来定位网站的页面,并与网站其它页面共享权限(也称为链接源)。

不要过度编写内部链接,任何给定网页的链接源在页面上的链接之间共享。 因此,你在页面上放置的链接越多,传递给每个链接的权重被稀释。一般每页的链接数不能超过100个,但对于非常大和复杂的网站则例外。

外部链接也很重要,原因有几个:

  • 可推荐的外部链接,或者只是最佳实践,一个想法或资源的来源提供适当的归属。
  • 外部链接使我们可以向网站访问者推荐有用的相关内容。
  • 当其它网站发布指向我们网站称为反向链接,我们的网站获得链接权重,并提高我们网站在搜索引擎结果页面(SERP)的位置排名。

在编写外部链接时,请尽量避免链接到直接竞争的对手。我们不想帮助竞争对手网站链接到的锚文本关键字词在SERP提升排名。在编写外部链接时使用target =“ _ blank”属性也是一个好主意,在新标签中打开外部链接,可以使访问者在你的网站上停留的时间更长。

永远不要“点击这里”

你肯定见过,甚至创建看起来像这样的链接:

See the Pen never-use-click-here-anchor by Peter (@linyongmin) on CodePen.default

使用“点击这里”锚文本是一种糟糕的做法,至少有以下三个充分理由:

  • 依靠辅助技术(例如屏幕阅读器)的网站访问者很难理解 “点击这里”通用锚文本的含义。
  • 浏览阅读的访问者需要花费额外几秒钟时间来研究链接周围的文本才能了解链接到的内容。
  • 搜索引擎将锚文本与链接URL关联,正确使用锚文本可帮助搜索引擎确定网页与特定关键字的相关性。 “点击这里”通用锚文本不会告诉搜索引擎有关链接网页的任何信息。

理想的锚文本应该简洁,可用标识与网页相关的一个或多个关键字。 这句话包含正确选择的链接文本的两个示例:

See the Pen how-to-write-good-anchor-text by Peter (@linyongmin) on CodePen.default

第一个链接告诉搜索引擎网络爬虫和网站访问者,网站https://www.google.com与关键字“搜索引擎”有关。第二个告诉访问者和搜索引擎,在绝对URL https://www.linyongmin.com/google-seo/的页面与关键字“ SEO教程”相关。

绝对URL与相对URL

绝对URL是包含链接目标的完整(绝对)描述的URL。绝对URL包括协议(http)以及到达目标锚点所需的完整域名和文件路径,例如https://www.google.com。

相对URL通过描述页面相对于当前页面位置的位置链接到网页。在编写指向同一网站其它页面的内部链接时,我们可以选择编写相对URL而不是绝对URL。

<a href="/products/blue-product/">蓝色产品!</a>
<a href="../blue-product/">蓝色产品!</a>

第一种相对URL的意思是:“在文件目录的最低级别中查找文件产品,并在该文件中查找蓝色产品”。 第二种相对URL是:“在products目录的父文件夹中查找名称为blue-product的目录。这两个锚元素都指向URL:http://example.com/products/blue-product/。

假设我们要链接到“关于我们” 作为主页的后辈而存在的页面:

<a href="/about-us/">了解有关我们的更多信息。</a>

该语法表示“返回文件目录树的最低层,然后查找名为about-us的目录”。

最后一个示例,假设我们位于以下地址:http://example.com/products/red-product/,并且我们想要链接到/red-products/类别中存在的子类别页面:

<a href="fullRed.php">查看所有可用的红色大商品!</a>

相对URL的作用是告诉浏览器在当前文件夹中查找名为fullRed.php的文件,并将解析为以下URL:http://example.com/products/red-product/fullRed.php。

总而言之,当我们编写相对URL时,我们有三个选择:

  • 当我们以“/”开始相对URL时,告诉浏览器在文件目录的最低级别中查找指定的文件或文件夹。
  • 如果我们以“../”开头一个相对URL,则告诉浏览器在目录树返回一级中查找 指定的文件或文件夹。
  • 如果我们以文件或文件夹名称开头相对URL,则告诉浏览器在当前文件中查找指定的资源。

为什么使用相对URL

Web开发人员非常流行使用相对URL。网站通常在临时服务器上开发时使用的域名与最终的永久域名不同。如果使用了相对URL,则当站点从临时服务器转移到线上服务器时,所有相对URL都将继续正常运行。但是如果使用绝对URL,则开发团队将不得不查找站点绝对URL修复所有的URL。

虽然在临时服务器上开发站点期间使用相对URL的好处不容小,但这是有代价的。尽管你知道相对URL的工作原理,但许多经验丰富的开发人员和SEO专家建议你尽可能使用绝对URL。

其它有用的锚元素属性

到目前为止我们已经介绍的三个属性,你可以完成在网络上遇到的每个超链接任务。但是还有一些其它属性可以用来告诉访问者的Web浏览器和搜索引擎,这些属将对我们网站内容进行搜索引擎索引有关。

指定目标锚点的语言:hreflang

hreflang标记可用于告诉Web浏览器锚链接到文档的语言。 例如如果我们链接到URL,并且想告诉浏览器目标锚是西班牙语,我们将使用ISO 639-1格式的语言代码作为hreflang属性的值。

告诉浏览器<a href="http://example.com" hreflang="es">链接</a>指向位于不同的语言,我们可以使用<code>hreflang</code>属性。

指定源锚点和目标锚点之间的关系:rel

rel属性用于描述源锚点和目标锚点之间的关系。例如我们可以使用以下代码将目标标识为关于作者的目标锚点资源。

本文由<a href="https://www.facebook.com/linyongmin" rel="author">林雍岷</a>撰写。

有几个不同的值用于描述源链接和目标链接之间的关系,以下是一些最常见的方法:

  • rel =“ nofollow”: 用于告诉搜索引擎不要追踪特定的网页链接。 可以用于阻止在PR值高的网站上以留言等方式添加链接从而提高自身网站排名的行为,以改善搜索结果的质量,防止垃圾链接的蔓延。
  • rel =“ alternate”:如果你的网站有多个版本(例如翻译成另一种语言),请使用此值将链接的资源标识为当前页面的备用版本。
  • rel =“ bookmark”: 通常用在指向文章内容的永久链接上,并可用于添加书签。
  • rel =“ help”:使用此值将链接的资源标识为当前页面的帮助文件。
  • rel =“ license”:链接到公认的版权许可证时,请使用此属性。
  • rel =“ next”: 记录文档的下一页。(浏览器可以提前加载此页) 。
  • rel =“ prev”: 记录文档的上一页。(定义浏览器的后退键) 。
  • rel =“ noreferrer”:如果要链接到外部网站,但又避免让目标网站知道推荐人是谁,请使用此值。

指定网络媒体类型:type

type属性是可选属性,可用于标识目标文档的网络媒体类型或MIME类型。 例如,如果链接到以HTML呈现的网站,则可以添加属性type =“text/html”来告诉访问者的浏览器该链接指向HTML文档。

目前,该属性没有任何作用,但我们认为,将来该属性中包含的信息可用于以某种方式向网站访问者传达他们将要链接的内容类型,然后再点击链接。

类型值必须是有效的IANA媒体类型。一些最常用的值是:text/html,text/css,application/javascript和multipart/form-data。

用链接构建万维网

最好将万维网描述为庞大的超链接文档库,其中锚元素用于相关文档之间建立链接桥梁。锚元素将Web粘合在一起的胶水,以及使Web用户从一个文档访问到相关文档。

转载请注明:林雍岷 » 6. html锚:用<a>元素创建html链接