🔍
推荐阅读
关于本站
前端面试题

直击面试考点
HTML

教程
CSS

教程
JavaScript

教程
TypeScript

教程
jQuery

教程
React

教程
Vue.js

教程
Angular

教程
Node.js

教程
Deno

教程
Npm

教程
Bootstrap

教程
Git

教程
Webpack

教程
微信小程序

专题
VSCode

教程
Charles

教程
Markdown

教程
Github

专题介绍
正则表达式

教程
Gulp.js

教程
web3.js

教程
Linux

教程
ad ad ad ad
阿西河前端教程
首页 朱安邦的博客 安邦聊前端
⬆

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 属性),
    • 或者是以上这些的集合.
<p>（译注：<font color="#000000"><font>link的alternate定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而alternate则让用户可选择替换的样式。但这个替换操作需要 浏览器支持，但很多浏览器比如IE都是不支持的。</font></font></p>

<p align="left"><font color="#000000"><font>所以使用到替换样式的网页，一般都用一些样式表切换的JS，让用户可以自由切换界面样式。这个应该大家都见过，一些网站会给网页定义多种配色。 稍高阶的一些，还可以利用 JS弄成随时间变化样式的，比如白天的时候显示成明色，晚上的时候显示成暗色。</font></font>）</p>
<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.

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

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

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

<p>在树型序列中，由于这些属性只是提示, 并且这这些资源在进一步检查时可能是不适合的,浏览器可能选择另一个适合的.<br>
 <br>
 <strong>Note:</strong> 苹果iOS不支持此链接类型, 也不支持 <code>sizes</code>属性, 就像其他移动端浏览器一样，为了Web Clip或者启动点位符选择一个页面图标。分别可使用不是标准方法的<a class="external" href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4" rel="noopener"><code>apple-touch-icon</code> 和<a class="external" href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6" rel="noopener"><code>apple-touch-startup-image</code> 替代.<br>
 <br>
 <code><font face="Open Sans, Arial, sans-serif">在之前，经常可以看到</font>shortcut</code>,但他不是标准的，<strong>应该不再使用</strong>。</p>
<link> <a>, <area>
import      HTML Imports

index 已废弃 HTML5

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

<p>如果存在一个或几个 <code>up</code>链接，那么<code>up</code>链接的数目就是当前页面在这个等级体系里的深度。</p>
<a>, <area>, <link> None.
last

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

<p><strong>注意：</strong>该序列中其他相关链接资源的link的type值是<code>first</code>, <code>prev</code>, <code>next。</code></p>

<p>尽管同义词<code>end</code>可以识别，但它还是错误的，必须避免使用。</p>
<a>, <area>, <link> None.
license

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

<p>注意：虽然可以识别，但是同义词版权是不正确的，必须避免。</p>
<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）。

<p>请注意，使用<code>noopener</code>时，在决定是否打开新窗口/选项卡方面，除<code>_top</code>，<code>_self</code>和<code>_parent</code>&nbsp;以外的非空目标名称都被视为<code>_blank</code>&nbsp;。</p>
<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 规范中定义了用于进行此类调用的协议。

<p>注意：如果还存在X-Pingback：HTTP标头，则此标头优先于具有这种链接类型的<code>&lt;link&gt;</code>元素</p>
<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

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

<p>注意：与按相同顺序链接资源有关的其他链接类型是<code>first</code>，<code>last</code>，<code>next</code>。</p>

<p>尽管认识到，以前的滑膜肌病是不正确的，必须避免。</p>
<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

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

<p>虽然它曾经是HTML规范的一部分，但已从规范中删除，仅由Firefox 63之前的Firefox版本实现。</p>
<a>, <area>, <link> <form>
stylesheet

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

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

 <link> <a>, <area>
tag

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

<p><strong>注意</strong>：不应在标签云的链接成员上设置此链接类型，因为这些链接对象不适用于单个文档，而不适用于一组页面。</p>
<a>, <area> <link>.
up
 

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

<p>上行链接类型的数量表示当前页面和链接资源之间的深度差。</p>
<a>, <area>, <link> None.

AXIHE / 精选资源

浏览全部教程

面试题

HTML面试题 CSS面试题 JavaScript面试题 jQuery面试题 Vue.js面试题 React面试题 算法面试题 AJAX/HTTP面试题 Babel面试题 BootStrap面试题 Electron面试题 Gulp面试题 Node.js面试题 前端经验相关面试题 前端综合面试题 Webpack面试题 微信小程序面试题

学习网站

Can I use 博客园 CSDN CSS Tricks 极客时间 freeCodecamp GitHub 慕课网 JavaScriptWeekly 脚本之家 极客学院 jstips 掘金 LeetCode lintcode MDN 牛客网 程序员客栈 菜鸟教程 SegmentFault Stack Overflow 开发者头条 w3cplus w3cschool w3school Hacker News

前端培训
自己甄别

饥人谷 尚学堂 珠峰培训 智能社 妙味课堂 京程一灯 爱前端 易莱胜 千锋教育 黑马程序员 达内培训 开课吧 蜗牛学院 尚硅谷 不凡学院 爱创课堂 杭州和盈 六星教育 渡一教育 金渡教育 术叶科技/崛学 妙思维JS++ 扣丁学堂 软谋教育 杰越学院 马士兵教育 青盟科技&唯创网讯 小码哥教育 职坐标 动脑学院 源码时代 云知梦 太阁网络学院 米修在线 米斯特吴 腾讯NEXT学院 我们俩文化教育 职通教育 享学课堂 谦太祥和 小滴课堂

前端书籍

CSS权威指南 CSS揭秘 精通CSS Head First HTML 与 CSS JavaScript高级程序设计 JavaScript权威指南 JavaScript忍者秘籍 你不知道的JavaScript JavaScript语言精粹 学习JavaScript数据结构与算法 正则表达式必知必会 锋利的jQuery 深入浅出Node.js Node.js实战 Node.js:来一打C++扩展 图解HTTP Linux命令行与shell脚本编程大全 Electron跨平台开发实战

关于朱安邦

我叫 朱安邦，阿西河的站长，在杭州。

以前是一名平面设计师，后来开始接接触前端开发，主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术，欢迎大家关注我的 Bilibili。

关注我: Github / 知乎

于2021年离开前端领域，目前重心放在研究区块链上面了

我叫朱安邦，阿西河的站长

目前在杭州从事区块链周边的开发工作，机械专业，以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术，自学期间几乎从未出过家门，最终找到了满意的前端工作。更多>

于2021年离开前端领域，目前从事区块链方面工作了

关于我: Twitter / Github / Bilibili

最新文章

安邦聊前端的视频