link tag

 

link tag最常用來讀取外部資源,如

<head>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/bebusneuebold" type="text/css" />
</head>

link tag可用的屬性有rel、media、href、type、sizes,各說明如下

 

一、rel

rel屬性值是必須要被指定,其用來指出該外部資源與此Html document的關係,

下表列出rel可用的值之說明。

Value Description
alternate Provides a link to an alternate version of the document (i.e. print page, translated or mirror).
Example: <link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">
author Provides a link to the author of the document
dns-prefetch Specifies that the browser should preemptively perform DNS resolution for the target resource's origin
help Provides a link to a help document. Example: <link rel="help" href="/help/">
icon Imports an icon to represent the document.
Example: <link rel="icon" href="/favicon.ico" type="image/x-icon">
license Provides a link to copyright information for the document
next Provides a link to the next document in the series
pingback Provides the address of the pingback server that handles pingbacks to the current document
preconnect Specifies that the browser should preemptively connect to the target resource's origin.
prefetch Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation
preload Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the "as" attribute (and the priority associated with that destination).
prev Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
search Provides a link to a resource that can be used to search through the current document and its related pages.
stylesheet Imports a style sheet

下圖是有關部份rel屬性值的用法,請參考

 

二、media

用來指定所讀取外部資源是要應用在何目標,

最常使用的值為all、print、screen、speech,

更詳細部份請參考HTML <link> media Attribute

 

三、href

用來指定讀取外部資源的網址。

 

四、type

用來指定讀取外部資源的文件型態,如 "text/css"

請參考IANA Media Types

 

五、sizes

用來指定讀取外部資源的icon圖示大小,注意,只在 rel="icon" 時,sizes屬性值才有效。

 

參考資料:

HTML <link> Tag

DNS Prefetching

Media queries解說與max-width、min-width用法

meta tag