![HTML Tutorial](/html/images/html-mini-logo.jpg)
- HTML 教程
- HTML - 首页
- HTML - 路线图
- HTML - 简介
- HTML - 历史与演变
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块
- HTML - 样式表
- HTML - 格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图片
- HTML - 图像地图
- HTML - 内联框架
- HTML - 短语元素
- HTML - 元标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表头和标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 邮件链接
- HTML 颜色名称和值
- HTML - 颜色名称
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 头部
- HTML - 头元素
- HTML - 添加 Favicon
- HTML - Javascript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - 使用 CSS 进行布局
- HTML - 响应式
- HTML - 符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 杂项
- HTML - 文档对象模型 (DOM)
- HTML - MathML
- HTML - 微数据
- HTML - IndexedDB
- HTML - Web 消息传递
- HTML - Web CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - 网页幻灯片
- HTML 工具
- HTML - Velocity Draw
- HTML - 二维码
- HTML - Modernizer
- HTML - 验证
- HTML - 颜色拾取器
- HTML 参考
- HTML - 速查表
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 码
- ASCII 表格查找
- HTML - 颜色名称
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- 语言 ISO 代码
- HTML - 字符编码
- HTML - 已弃用标签
- HTML 资源
- HTML - 快速指南
- HTML - 有用资源
- HTML - 颜色代码生成器
- HTML - 在线编辑器
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
广告