HTML - rel 属性_HTML 菜鸟教程

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 属性，我们应该在何处以及如何使用此属性！

在链接标签中使用 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>QikepuCom<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 属性作为图标

输出窗口显示一个超链接，单击该超链接后会显示 QikepuCom 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">
				 QikepuCom logo
	 </a>
</body>

</html>

阻止浏览器在表单提交时发送 HTTP 反向链接标头

输出窗口显示一个表单，提交后，浏览器不会发送 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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - readonly 属性 HTML - required 属性 >>