阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML 链接类型

      链接类型

      在超文本标记语言中,在两种文档之间可以指定<a>, <area><link> 元素使一个页面链接到另一个页面。

      下面是链接类型及其在 HTML 中的意义

      下面是链接类型及其在 HTML 中的意义
      链接类型描述支持的元素不被支持的元素
      alternate
      • 如果是<link>元素,并且rel属性包括stylesheet, 则这个link定义为alternate样式表;那样的话 title 属性不能为空.
      • 如果type设置为application/rss+xml或者application/atom+xml, 则link被定义为syndication feed. 页面中第一个被定义的为默认的。
      • 其它情况link定义为alternate页面:
        • 另一种介质,例如手持设备(如果设置了 media 属性),
        • 另一种语言 (如果设置了hreflang 属性),
        • 另一种格式, 例如PDF (如果设置了type 属性),
        • 或者是以上这些的集合.

      (译注:link的alternate定义了一个可替换的样式表,它和第一个link元素同时使用,第一个定义了首选样式,而alternate则让用户可选择替换的样式。但这个替换操作需要 浏览器支持,但很多浏览器比如IE都是不支持的。

      所以使用到替换样式的网页,一般都用一些样式表切换的JS,让用户可以自由切换界面样式。这个应该大家都见过,一些网站会给网页定义多种配色。 稍高阶的一些,还可以利用 JS弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。

      <a>, <area>, <link>

      None.

      archives

      定义文档的超链接,该文档包含此文件的存档链接. 例如. 一个博客入口可以链接到每月索引页面。

      Note: 虽然能够识别奇异文档,并不正确,必须避免出现.
      <a>, <area>, <link>None.
      author定义一个超链接到一个描述作者信息的页面或者提供一个方法联系作者。

      Note: 这个方法可能是mailto:邮箱链接, 但不推荐这样,这样可能导致机器人发送大量的垃圾邮件到这个邮箱. 这种情况下,最好带一个包含联系方法的页面.。

      <a>, <area> or<link> 标签的rev属性上,虽然能够识别 made,但并不正确,应该用rel 属性替换.
      <a>, <area>, <link>None.
      bookmark表明这个链接是一个固定链接,对于最近的<article> 祖先标签. 如果没有,则表最近的section标签
      bookmark允许标识一个包括多个文档的页面,例如每月汇总的博客页面,或者博客集合。
      <a>, <area><link>
      canonical

      来自维基百科: Canonical_link_element
      规范链接元素是一个HTML元素,它通过指定web页面的“规范”或“首选”版本作为搜索引擎优化的一部分,帮助网站管理员防止重复的内容问题。

      <link>   <a>, <area>, <form>
      dns-prefetch提示浏览器该资源需要在用户点击链接之前进行DNS查询和协议握手.<link><a>, <area>
      external表明这个链接,是一个相对于当前网站的外部资源。点击这个链接会离开当前网站。<a>, <area><link>
      first 
      表明这个链接是当前页面资源序列中的第一个

      Note: 其它选项last, prev, next.

      虽然能够识别beginstart但并不正确,应该避免使用。
      <a>, <area>, <link>None.
      help
      • 如果是一个<a> 或者 <area>标签, help表明这个链接,链接到一个关于父亲标签和它的后代的进一步帮助资源;
      • 如果是一个<link>标签,help表明这个链接,链接到一个关于整个页面的进一步帮助资源.
      <a>, <area>, <link>None.
      icon

      定义一个在用户界面上代表这个页面的资源,通常是一个图标(包括声音和图像)

      media, type and sizes 属性允许浏览器选择其上下文中最合适的图标.如果多种资源符合条件,浏览器会选择最后一个。

      在树型序列中,由于这些属性只是提示, 并且这这些资源在进一步检查时可能是不适合的,浏览器可能选择另一个适合的.

      Note: 苹果iOS不支持此链接类型, 也不支持 sizes属性, 就像其他移动端浏览器一样,为了Web Clip或者启动点位符选择一个页面图标。分别可使用不是标准方法的apple-touch-iconapple-touch-startup-image 替代.

      在之前,经常可以看到shortcut,但他不是标准的,应该不再使用

      <link><a>, <area>
      import     HTML Imports

      index 已废弃 HTML5

      表明这个页面是一个等级体系的一部分,这个超链接指向该体系的最顶层资源。

      如果存在一个或几个 up链接,那么up链接的数目就是当前页面在这个等级体系里的深度。

      <a>, <area>, <link>None.
      last

      表明该超链接指向当前页面所在序列中的最后资源。

      注意:该序列中其他相关链接资源的link的type值是first, prev, next。

      尽管同义词end可以识别,但它还是错误的,必须避免使用。

      <a>, <area>, <link>None.
      license

      表示超链接指向描述许可信息的文档。 如果不在<head>元素内,则该标准不会区分应用于文档特定部分或整个文档的超链接。 仅页面上的数据可以表明这一点。

      注意:虽然可以识别,但是同义词版权是不正确的,必须避免。

      <a>, <area>, <link>None.
      manifest表示链接到的文件是 Web App Manifest.<link><a>, <area>
      modulepreload

      更早和更高优先级的加载模块脚本

      <link>   <a>, <area>,
      <form>
      next

      表明该超链接指向的是当前页面所在序列中的下一个资源。

      注意:该序列中其他相关链接资源的link的type值是first, prev, last。

      <a>, <area>, <link>None.
      nofollow表示本文档的作者不想宣传链接的文档,例如,它是不受控的,它是一个坏的例子或如果它们有商业关系(销售环节)。nofollow主要是被一些使用人气排名技术的搜索引擎所使用。<a>, <area><link>

      noopener

      指示浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限-通过在打开的窗口中不设置Window.opener属性(返回null)。

      当打开不受信任的链接时,这特别有用,以确保它们无法通过Window.opener属性来篡改原始文档(有关更多详细信息,请参阅 About rel=noopener),同时仍提供 Referer HTTP标头(除非也使用noreferrer)。

      请注意,使用noopener时,在决定是否打开新窗口/选项卡方面,除_top_self_parent 以外的非空目标名称都被视为_blank 。

      <a>, <area><link>
      noreferrer

      阻止浏览器导航到另一个页面时,通过Referer:HTTP header将该页面地址或任何其他值作为Referrer发送。
      (在Firefox 37之前的Firefox中,此功能仅在页面中找到的链接中有效。在UI中单击的链接(例如通过上下文菜单“在新选项卡中打开”)被忽略了)。

      <a>, <area><link>
      opener 恢复带有target="_blank"的链接上的隐式rel="noopener"添加(请参阅相关的HMTL规范讨论, WebKit change和Firefox bug discussion)。<a>, <area>,
      <form>
      <link>
      pingback
       

      定义一个外部资源URI,以便在对该网页发表评论或引用时调用。 在 Pingback 1.0 规范中定义了用于进行此类调用的协议。

      注意:如果还存在X-Pingback:HTTP标头,则此标头优先于具有这种链接类型的<link>元素

      <link><a>, <area>

      preconnect

      向浏览器提供提示,建议浏览器提前打开与链接网站的连接,而不会泄露任何私人信息或下载任何内容,以便在跟随链接时可以更快地获取链接内容。<link><a>, <area>
      prefetch提示浏览器提前加载链接的资源,因为它可能会被用户请求。

      建议浏览器提前获取链接的资源,因为它很可能会被用户请求。 从Firefox 44开始,考虑了crossorigin属性的值,从而可以进行匿名预取。

      注意:Link Prefetch FAQ详细说明了可以预取的链接以及替代方法。

      <a> 未实现,
      <area> 未实现,
      <link>
      None.
      preload

      告诉浏览器下载资源,因为在当前导航期间稍后将需要该资源。有关详细信息,请参见 Preloading content with rel="preload"

      <link>   <a>, <area>,
      <form>
      prerender建议浏览器事先获取链接的资源,并建议将预取的内容显示在屏幕外,以便在需要时可以将其快速呈现给用户。<link><a>, <area>
      prev

      指示超链接指向当前页面所在序列的优先资源。

      注意:与按相同顺序链接资源有关的其他链接类型是firstlastnext

      尽管认识到,以前的滑膜肌病是不正确的,必须避免。

      <a>, <area>, <link>None.
      search

      表示超链接引用了一个文档,该文档的接口专门设计用于在此文档或站点及其资源中进行搜索。

      如果将type属性设置为application/opensearchdescription+xml,则该资源是 OpenSearch 插件,可以轻松将其添加到Firefox或Internet Explorer等某些浏览器的界面中。

      <a>, <area>, <link>None.
      shortlink

      shortlink 规范
      来自维基百科: 
      URL shortening
      一些网站创建短链接,使通过即时消息共享链接更容易。

      <link>None.
      sidebar  已废弃 Gecko 63

      表示超链接指向的资源更适合于辅助浏览上下文,如侧边栏。 没有此类上下文的浏览器将忽略此关键字。

      虽然它曾经是HTML规范的一部分,但已从规范中删除,仅由Firefox 63之前的Firefox版本实现。

      <a>, <area>, <link><form>
      stylesheet

      定义要用作样式表的外部资源。如果没有设置 type,在进一步检查之前,浏览器应该假定它是 text/css 样式表。

      如果与 alternate 关键字结合使用,则定义一个 可选样式表 ;在这种情况下,title 属性必须出现,而不能是空字符串。

      <link><a>, <area>
      tag

      指示超链接引用了描述适用于该文档的标签的文档。

      注意:不应在标签云的链接成员上设置此链接类型,因为这些链接对象不适用于单个文档,而不适用于一组页面。

      <a>, <area><link>.
      up
       

      指示页面是层次结构的一部分,并且超链接指向该结构的更高级别的资源。

      上行链接类型的数量表示当前页面和链接资源之间的深度差。

      <a>, <area>, <link>None.
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录