关于前端:SAP-电商云-footer-区域-Link-Component-HTML-源代码的详细讲解

12次阅读

共计 1218 个字符,预计需要花费 4 分钟才能阅读完成。

如下图所示:

这个 link Component 生成的 a 元素的 HTML 代码:

<a href="http://www.twitter.com/SAP_CX" target="_blank" rel="noopener"> Twitter-j <!--bindings={"ng-reflect-ng-template-outlet": "[object Object]"
}--></a>

在这个 HTML a 元素示例中,咱们能够看到有 href、target 和 rel 属性,以及一个 HTML 正文。让咱们具体解释每个属性的含意:

  1. href 属性:

href 属性是一个超链接,它定义了链接的指标 URL。当用户点击该链接时,他们将被疏导至这个 URL。在这个例子中,链接指向了 Twitter 上的一个特定用户 SAP_CX 的主页。href 这个词来源于 “hypertext reference”,示意这是一个超文本援用。

<a href="http://www.twitter.com/SAP_CX">Twitter-j</a>
  1. target 属性:

target 属性定义了链接在哪里关上。在这个例子中,它的值是 “_blank”,这意味着链接将在一个新的浏览器窗口或选项卡中关上。这有助于在用户浏览网站时保留以后页面,因为他们在新窗口中查看链接内容。target 属性有以下几个可选值:

  • _blank: 在新窗口或选项卡中关上链接。
  • _self: 在雷同的框架或窗口中关上链接(这是默认行为,除非另行指定)。
  • _parent: 在父框架中关上链接,如果没有父框架,则在以后窗口中关上。
  • _top: 在顶层窗口或框架中关上链接,即便没有顶层窗口,也会在以后窗口中关上。
  • <frame_name>: 在指定名称的框架中关上链接。
<a href="http://www.twitter.com/SAP_CX" target="_blank">Twitter-j</a>
  1. rel 属性:

rel 属性定义了以后文档与链接指标之间的关系。在这个例子中,它的值是 “noopener”。这个值的目标是在新窗口关上链接时,确保新窗口中的 JavaScript 不能拜访原始窗口(例如,通过 window.opener 属性)。这有助于避免跨站脚本攻打和进步安全性。

rel 属性能够有多个值,用空格分隔。一些常见的 rel 属性值包含:

  • nofollow: 通知搜索引擎不要跟踪此链接以及不要将链接权重传递给指标页面。
  • noopener: 在新窗口中关上链接时,确保新窗口中的 JavaScript 不能拜访原始窗口。
  • noreferrer: 不将 referrer 信息传递给指标页面,即不让指标页面晓得这个链接来自哪个页面。
  • author: 批示链接指向文档的作者。
  • alternate: 批示链接指向与以后文档相干的备用版本。
<a href="http://www.twitter.com/SAP_CX" target="_blank" rel="noopener">Twitter-j</a>
正文完
 0