如何在 HTML 中新增資源引用?
在 HTML 中,<link> 標籤用於新增資源引用。link 定義了外部文件和當前文件之間的關係。
<link> 標籤也用於連結外部樣式表和為我們的網站新增 favicon,<link> 標籤包含屬性值。以下是 <link> 標籤在 HTML 中的用法 -
<link rel="stylesheet" href="styles.css">
<link> 標籤幾乎被所有瀏覽器支援,並且還支援全域性和事件屬性。
屬性
<link> 標籤的屬性如下所示 -
crossorigin - crossorigin 屬性的值為 anonymous 或 use-credentials,用於指定元素如何處理跨源請求。
href - href 屬性的值為 URL,用於指定連結文件的位置。
hreflang - hreflang 屬性的值為語言程式碼,用於指定連結文件中文字的語言。
media - media 屬性的值為媒體查詢,指定在什麼裝置上顯示連結文件。
referrerpolicy - referrerpolicy 屬性的值為 no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url,用於指定在獲取資源時使用哪個推薦來源。
rel - rel 屬性的值為 alternate、author、dns-prefetch、help、icon、license、next、pingback、preconnect、prefetch、preload、prerender、prev、search、stylesheet,用於指定當前文件和連結文件之間的關係。
sizes - size 屬性的值為 HeightxWidth,用於指定連結資源的大小。僅適用於 rel="icon"。
title - title 屬性用於定義首選或備用樣式表。
type - type 屬性使用媒體型別作為值,用於指定連結文件的媒體型別。
示例
在下面的示例中,我們嘗試在 HTML 中新增資源引用 -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag</title>
<link rel="stylesheet" href="stylenew.css">
</head>
<body>
<div id="contentinfo">
<h1>TutorialsPoint</h1>
<h2>Technical content</h2>
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
示例
以下是另一個在 HTML 中新增資源作為引用的示例。
<!DOCTYPE html> <html> <head> <title>HTML Link Tag</title> <link rel="stylesheet" type="text/css" href="stylenew.css" hreflang="en-us"> </head> <body> <h1>Tutorialspoint</h1> <h2>HTML Link Tag</h2> </body> </html>
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP