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

打印页面

上一个

下一个