html5中link标签rel有哪些链接类型?有什么作用?以及如何使用呢?

发表于:
来源:阿酷技术学习
作者:阿酷

我们经常在写html时,在head中引入css,像这样:

<link href="{{ settings.STATIC_URL }}css/mm-min.css?{{common_config.css_version.mm}}" onerror="handle404Error(this,'{{ publicss.BASEURL }}/static/css/mm-min.css?{{common_config.css_version.mm}}')" rel="stylesheet">

在这个例子里,我们用到了rel='stylesheet'.

我们工作中常用到的还有:当我们写一个PC页面的时候,我们要告诉搜索引擎,这个页面还要一个移动版本要这样写:

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://mobile_url">

移动网页上还要写上:

<link rel="canonical" href="http://pc_url">

在移动页面上添加快捷方式到主屏幕,对于android的chrome,这样写:

<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon72x72@2x.png">

ios的safari:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{publicss.SITE_NAME}}"/>
<link rel="apple-touch-icon-precomposed" href="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon72x72@2x.png">

win8 ie:

<meta name="msapplication-TileImage" content="{{ settings.STATIC_URL }}ico/app-{{publicss.SIMPLE}}-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">

shortcut,浏览器访问的时候,左边那个小图标

<link rel="shortcut icon" href="{{ settings.STATIC_URL }}ico/{{publicss.SIMPLE}}-favicon32x32.png">

除了以上几个常用得以外,我查了一下

  • alternate 文档的替代版本(比如打印页、翻译或镜像)
  • author
  • bookmark
  • canonical
  • dns-prefetch
  • external
  • help
  • icon
  • license
  • modulepreload
  • nofollow
  • noopener
  • noreferrer
  • opener
  • pingback
  • preconnect
  • prefetch
  • preload
  • prerender
  • search
  • stylesheet 文档的外部样式表。
  • tag 表示引用文档表示的标记应用于当前文档
  • next 集合中的下一个文档。
  • prev 集合中的上一个文档。
  • start 集合中的第一个文档。
Link typeEffect on...body-okBrief description
linkaandareaform
alternateHyperlinknot allowed·Gives alternate representations of the current document.
canonicalHyperlinknot allowed·Gives the preferred URL for the current document.
authorHyperlinknot allowed·Gives a link to the author of the current document or article.
bookmarknot allowedHyperlinknot allowed·Gives the permalink for the nearest ancestor section.
dns-prefetchExternal Resourcenot allowedYesSpecifies that the user agent should preemptively perform DNS resolution for the target resource'sorigin.
externalnot allowedAnnotation·Indicates that the referenced document is not part of the same site as the current document.
helpHyperlink·Provides a link to context-sensitive help.
iconExternal Resourcenot allowed·Imports an icon to represent the current document.
modulepreloadExternal Resourcenot allowedYesSpecifies that the user agent must preemptivelyfetch the module scriptand store it in the document'smodule mapfor later evaluation. Optionally, the module's dependencies can be fetched as well.
licenseHyperlink·Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
nextHyperlink·Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.
nofollownot allowedAnnotation·Indicates that the current document's original author or publisher does not endorse the referenced document.
noopenernot allowedAnnotation·Creates atop-level browsing contextthat is not anauxiliary browsing contextif the hyperlink would create either of those to begin with (i.e., has an appropriatetargetattribute value).
noreferrernot allowedAnnotation·No `Referer` (sic) header will be included. Additionally, has the same effect asnoopener.
openernot allowedAnnotation·Creates anauxiliary browsing contextif the hyperlink would otherwise create atop-level browsing contextthat is not anauxiliary browsing context(i.e., has "_blank" astargetattribute value).
pingbackExternal Resourcenot allowedYesGives the address of the pingback server that handles pingbacks to the current document.
preconnectExternal Resourcenot allowedYesSpecifies that the user agent should preemptively connect to the target resource'sorigin.
prefetchExternal Resourcenot allowedYesSpecifies that the user agent should preemptivelyfetchand cache the target resource as it is likely to be required for a followupnavigation.
preloadExternal Resourcenot allowedYesSpecifies that the user agent must preemptivelyfetchand cache the target resource for currentnavigationaccording to thepotential destinationgiven by theasattribute (and thepriorityassociated with thecorrespondingdestination).
prerenderExternal Resourcenot allowedYesSpecifies that the user agent should preemptivelyfetchthe target resource and process it in a way that helps deliver a faster response in the future.
prevHyperlink·Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
searchHyperlink·Gives a link to a resource that can be used to search through the current document and its related pages.
stylesheetExternal Resourcenot allowedYesImports a style sheet.
tagnot allowedHyperlinknot allowed·Gives a tag (identified by the given address) that applies to the current document.

 

link标签是用来标签定义文档与外部资源的关系。其中,rel定义当前文档与被链接文档之间的关系;rev定义被链接文档与当前文档之间的关系。
rel就是relationship的缩写,rev则是rel的反向描述,非必需属性。

关于link标签的学习,可能参考以下链接:

https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

https://html.spec.whatwg.org/multipage/links.html#linkTypes

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions