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

下面是链接类型及其在 HTML 中的意义
链接类型 描述 支持的元素 不被支持的元素
  • 如果是<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>




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

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

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

<a>, <area> or<link> 标签的rev属性上,虽然能够识别 made,但并不正确,应该用rel 属性替换.
<a>, <area>, <link> None.
bookmark 表明这个链接是一个固定链接,对于最近的<article> 祖先标签. 如果没有,则表最近的section标签
<a>, <area> <link>
dns-prefetch 提示浏览器该资源需要在用户点击链接之前进行DNS查询和协议握手. <link> <a>, <area>
external 表明这个链接,是一个相对于当前网站的外部资源。点击这个链接会离开当前网站。 <a>, <area> <link>

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

<a>, <area>, <link> None.
  • 如果是一个<a> 或者 <area>标签, help表明这个链接,链接到一个关于父亲标签和它的后代的进一步帮助资源;
  • 如果是一个<link>标签,help表明这个链接,链接到一个关于整个页面的进一步帮助资源.
<a>, <area>, <link> None.


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

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

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


<link> <a>, <area>



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

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


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


<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 表示链接到的文件是 Web App Manifest. <link> <a>, <area>


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

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

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>

阻止浏览器跳到另一个页面时,通过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>
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>


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 提示浏览器提前加载链接的资源,因为它可能会被用户请求。

Note: the Link Prefetch FAQ has details on which links can be prefetched and on alternative method
<a> 未实现,
<area> 未实现,
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>
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>.
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.


Specification Status Comment
Candidate Recommendation Added preload.
Resource Hints
Working Draft Added dns-prefetchpreconnect, and prerender values.
HTML Living Standard
Living Standard No change since last snapshot (HTML Living Standard)
Recommendation Added tagstylesheetsearchprevprefetchnoreferrernofollownextlicenseiconhelpbookmarkauthor, and alternate.
HTML 4.01 Specification

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.


最后编辑者: mdnwebdocs-bot,