链接类型

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

下面是链接类型及其在 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>
dns-prefetch Hints to the browser that a resources is needed allowing the browser to do a DNS lookup and protocol handshaking before a user clicks the link. <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>

index

Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the top level resource of that structure.

If one or several up link types are also present, the number of these up indicates the depth of the current page in the hierarchy.
<a>, <area>, <link> None.
last
Indicates that the hyperlink leads to the last resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, prev, next.

Although recognized, the synomyn end is incorrect and must be avoided.
<a>, <area>, <link> None.
license Indicates that the hyperlink leads to a document describing the licensing information. If not inside the <head> element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

Note: Although recognized, the synonym copyright is incorrect and must be avoided.
<a>, <area>, <link> None.
manifest Indicates that the linked file is a Web App Manifest. <link> <a>, <area>
next Indicates that the hyperlink leads to the next resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, prev, last.
<a>, <area>, <link> None.
nofollow 表示本文档的作者不想宣传链接的文档,例如,它是不受控的,它是一个坏的例子或如果它们有商业关系(销售环节)。nofollow主要是被一些使用人气排名技术的搜索引擎所使用。 <a>, <area> <link>
noopener

Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the Window.opener property (see About rel=noopener for more details), while still providing the Referer HTTP header (unless noreferrer is used as well).

Note that when noopener is used, nonempty target names other than _top_self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.

<a>, <area> <link>
noreferrer

阻止浏览器跳到另一个页面时,通过HTTP头,发送当前页面的名字或其他值,以及把当前页设为另一个页面的引用(另一个页面的referrer值 )。
(In Firefox this work only in links found in pages. Links clicked in the UI, like via the contextual menu, doesn't abide for this value)

<a>, <area> <link>
pingback
 
Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the Pingback 1.0 specification.

Note: if the X-Pingback: HTTP header is also present, this header has precedence over the <link> element with this link type
<link> <a>, <area>

preconnect

Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly. <link> <a>, <area>
prefetch Hints the browser to fetch in advance the linked resource, as it will likely be requested by the user.

Note: the Link Prefetch FAQ has details on which links can be prefetched and on alternative method
<a> 未实现,
<area> 未实现,
<link>
None.
prerender Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed. <link> <a>, <area>
prev Indicates that the hyperlink leads to the precedent resource of the sequence the current page is in.

Note: other link types related to linking resources in the same sequence are first, last, next.

Although recognized, the synomyn previous is incorrect and must be avoided.
<a>, <area>, <link> None.
search Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.
<a>, <area>, <link> None.
stylesheet Defines an external resource to be used as a stylesheet. If the type is not set, the browser should assume it is a text/css stylesheet until further inspection.

If used in combination with the alternate keyword, it defines an alternative style sheet; in that case the title attribute must be present and not be the empty string.
<link> <a>, <area>
sidebar
Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. Browsers, that don't have such a context will ignore this keyword. <a>, <area>, <link> None.
tag Indicates that the hyperlink reference a document describing a tag that applies to this document.

Note: this link type should not be set on links member of a tag cloud as these one does not apply to a single document but to a set of pages.
<a>, <area>, <link> None.
up
 
Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure.

The number of up link types indicates the depth difference between the current page and the linked resource.
<a>, <area>, <link> None.

Specifications

Specification Status Comment
Preload
preload
Working Draft Added preload.
Resource Hints
preconnect
Working Draft Added dns-prefetchpreconnect, and prerender values.
WHATWG HTML Living Standard
<link>
Living Standard No change since last snapshot (WHATWG HTML Living Standard)
HTML5
<link>
Recommendation Added tagstylesheetsearchprevprefetchnoreferrernofollownextlicenseiconhelpbookmarkauthor, and alternate.
HTML 4.01 Specification
<link>
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Alternative stylesheets ? 3.0 (1.9) ? (Yes) ?
prefetch ? ? ? ? ?
prerender ? ? ? ? ?
preconnect 46 39 (39) [1] 未实现 ? 未实现
dns-prefetch 46 3.0 (1.9) ? ? ?
preload 50.0 ? ? ? ?
noopener 49.0 52 (52) ? 36 ?
manifest 未实现 [2]        
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
Alternative stylesheets ? ? 4.0 (2.0) ? ? ? ?
prefetch 未实现 ? ? ? ? ? ?
prerender ? ? ? ? ? ? ?
preconnect 46 ? 39.0 (39)  ? ? ? 42.0 [1]
dns-prefetch 46 ? 1.0 (1.9) ? ? ? (Yes)
preload 未实现 50.0 ? ? ? ? 50.0
noopener 未实现 49.0 ? ? 32 ? 49.0
manifest 未实现 39.0         39.0

[1] Before Firefox 41, it didn't obey the crossorigin attribute.

[2] Since this is a mobile feature, desktop ignores it rather than throwing an error.

文档标签和贡献者