HTML 資源鏈接
2018-10-10 15:31 更新
HTML資源鏈接
link 元素在HTML文檔和之間創(chuàng)建關(guān)系外部資源，CSS樣式表或Javascript文件。
link 元素具有局部屬性: href，rel，hreflang，media，type，sizes 。
- href - 指定鏈路元素引用的資源的URL。
- hreflang - 指定鏈接資源的語言。
- media - 指定鏈接內(nèi)容用于的設(shè)備。
- rel - 指定文檔和鏈接資源之間的關(guān)系類型。
- sizes - 指定圖標(biāo)的大小。
- type - 指定鏈接資源的MIME類型，例如
text/css或image/x-icon.
sizes 屬性已在HTML5中添加，屬性 charset ， rev 和 target 在HTML5中已過時(shí)。
rel 屬性值決定瀏覽器如何處理link元素。以下列表顯示 rel 屬性的常見值。
- alternate - 指向文檔的替代版本的鏈接，例如翻譯成另一種語言的鏈接。
- author - 鏈接到文檔的作者。
- help - 與當(dāng)前文檔相關(guān)的幫助的鏈接。
- icon - 指定圖標(biāo)資源。
- license - 指向與當(dāng)前文檔相關(guān)聯(lián)的許可證的鏈接。
- pingback - 指定pingback服務(wù)器，允許當(dāng)其他網(wǎng)站鏈接到博客時(shí)自動(dòng)通知博客。
- prefetch - 預(yù)加載資源。
- stylesheet - 加載外部CSS樣式表。
例子
為了演示link元素，創(chuàng)建了一個(gè)名為 styles.css 的樣式表，其具有以下內(nèi)容。
a {
background-color: grey;
color: red;
padding: 0.5em;
}
要應(yīng)用這個(gè)樣式表，我們可以使用link元素，如下面的代碼所示。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>This is a test.</p> <a href="http://www.yjpub.cn">Visit www.yjpub.cn</a> </body> </html>
您可以使用多個(gè) link 元素來加載多個(gè)外部資源。外部樣式表可以在多個(gè)文檔中重用。
預(yù)加載資源
您可以要求瀏覽器預(yù)加載資源。
下面的代碼顯示了使用 link 元素來指定預(yù)加載。
<!DOCTYPE HTML> <html> <head> <link rel="prefetch" href="/page2.html" /> </head> <body> <p>This is a test.</p> <a href="http://www.yjpub.cn">Visit www.yjpub.cn</a> <a href="page2.html">Page 2</a> </body> </html>
上面的代碼將 rel 屬性設(shè)置為 prefetch，并指定HTML頁面 page2.html 被加載，期望用戶將使用此頁面。
以上內(nèi)容是否對(duì)您有幫助：
← HTML 樣式
更多建議：