HTML - rel 屬性

HTML rel 屬性指定當前文件與連結的文件或資源之間的關係。

此屬性僅在語法中存在 href 屬性時才使用。

語法

<link rel="value">

屬性值

alternate: 指定文件的備用連結（即列印頁面、翻譯或映象）。
author: 定義連結的作者。
dns-prefetch: 指定瀏覽器應該預先執行目標資源來源的 DNS 解析。
help: 指定指向幫助文件的連結。示例：<link rel="help" href="/help/">
icon: 在給定文件中匯入圖示。
license: 指定指向文件版權資訊的連結。
next: 提供系列中下一個文件的連結。
pingback: 提供 pingback 伺服器的地址。
prefetch: 指定目標應被快取。
preconnect: 指定目標應預先連線到源資源。
preload: 指定瀏覽器必須預先獲取和快取。
prerender: 指定瀏覽器應該載入。
prev: 指定選擇中的上一個文件。
search: 指定文件的搜尋工具。
stylesheet: 匯入樣式表。

應用於

以下列出的元素允許使用 HTML rel 屬性。

元素	描述
<a>	HTML <a> 標籤定義超連結。它用於從一個頁面連結到另一個頁面。
<area>	HTML <area> 標籤指定影像的區域，對映可以被點選或是有連結指向的活動區域。
<link>	HTML <link> 標籤指定當前文件與外部資源之間的關係。
<form>	HTML <form> 標籤用於透過表單收集網站上的使用者輸入。

HTML rel 屬性示例

以下示例將說明 HTML rel 屬性，我們應該在哪裡以及如何使用此屬性！

在 link 標籤中使用 rel 屬性匯入外部樣式表

下面的 rel.html 顯示應用了透過 rel.css 應用的 css 的文字

rel.html

<!DOCTYPE html>
<html>

<head>
   <title>HTML rel Attribute</title>
   <link rel="stylesheet" 
         type="text/css" 
         href="rel.css">
</head>

<body>
   <h3>HTML rel attribute</h3>
   <h1>tutorials <span>point</span></h1>
   <p>easy to learn!</p>
</body>

</html>

rel.css

這是一個外部 CSS 檔案 -

h3{
   background-color: yellow;
   font-style: italic;
}
h1{
   color:green;
}
span{
   color:black;
}
p{
   color:green;
}

在“area”標籤中使用 rel 屬性

以下程式碼顯示一個影像地圖。點選它後，會顯示另一張圖片。

<!DOCTYPE html>
<html>

<head>
   <title>HTML area rel attribute</title>
</head>

<body>
   <h1>HTML area rel attribute</h1>
   <p>Click on the below image to see another image!</p>
   <img src=
"/html/images/test.png"        
        height="130" 
        alt="earth" 
        usemap="#earthmap">
   <map name="earthmap">
      <area shape="rect" 
            coords="0,0,60,100" 
            alt="earth" 
            href=
"/images/html.gif" 
            rel="alternate">
   </map>
</body>

</html>

在“a”標籤中使用 rel 屬性作為圖示

輸出視窗顯示一個超連結，點選後會顯示 tutorialspoint 的 logo。

<!DOCTYPE html>
<html>

<head>
   <title>HTML rel Attribute in a tag</title>
</head>

<body>
   <h3>HTML rel attribute in "a" tag</h3>
   <a rel="icon" 
      href="/images/logo.png?v2">
         tutorialspoint logo
   </a>
</body>

</html>

阻止瀏覽器在表單提交時傳送 HTTP referrer 標頭

輸出視窗顯示一個表單，提交後，瀏覽器不會發送 http referrer 標頭。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Form rel Attribute</title>
</head>

<body>
   <h1>HTML Form rel Attribute</h1>
   <form rel="noreferrer" 
         action="/action_page.php">
      <input type="text" 
             name="firstname" 
             placeholder="Enter First Name"><br><br>
      <input type="text" 
             name="lastname" 
             placeholder="Enter Last Name"><br><br>
      <input type="submit" 
             value="SUBMIT" 
             class="btn">
   </form>
</body>

</html>

支援的瀏覽器

屬性
rel	是	是	是	是	是

html_attributes_reference.htm

列印頁面

上一個

下一個