首页 > HTML5+CSS > HTML5学习 > HTML5中的rel属性
2019
07-24

HTML5中的rel属性

rel 属性规定当前文档与被链接的url(使用href=""指定)之间的关系

仅<link>标签中使用的rel值:

    stylesheet:调用外部样式表,用于链接css样式表
    icon:指定标题栏,地址栏,收藏栏小图标,rel="shortcut icon" 为了兼容IE,必须包含shortcut才会在IE下显示,IE只支持ico格式
    canonical:指明网址的规范版本,用于让搜索引擎知道当前网站中的重复或相似网页中,哪一个页面才是站长想让其抓取与收录的。
    author:文档作者,一般指向作者的主页  
    alternate:备选的源(比如:打印页, 译本和镜像)
    home:站点的主页
    start:当前文档的第一页<
    archives:集合的目录
    toc:集合的目录
    head:集合中的顶级文档 
    first:集合中的首个文档
    next:集合中的下一个文档
    prev:集合中的前一个文档
    last:集合中最后的文档
    search:文档的搜索工具   
    copyright:当前文档的版权或隐私页面网站底部版权  
    help:帮助文档
    bookmark:用作书签的永久URL列表标题
    tag:当前文档标签(关键词)页
    friend:赞助友情链接

其他几个常见的非link标签使用的值:

nofollow:未认可的页面,加上这个标签后就不会传递权重,在很大程度上抑制博客或论坛的垃圾留言。

nofollow有两种用法:

    1.用于meta元标签:<meta name="robots" content="nofollow" />,告诉爬虫该页面所有链接都无需追踪
    2.用于a标签:<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪

noopener:用于在a标签中的rel属性的值,一般搭配target="_blank"同时使用,使子页面不能获取到window.opener。因为a标签中target="_blank"有一个安全漏洞:新的页面可以通过window.opener访问您的窗口对象,如使用window.opener.location=newURL将您的页面导航至不同的网址

noreferrer:页面跳转时,浏览器不发送Referer字段,<a>、<area>和<form>标签的rel属性可以使用这个属性

PS:实测在chrome中仅使用noreferrer(前提是使用了target="_blank")在子页面不能获取document.referrer,同时获取window.opener也返回null,但是仅使用noopener则只获取不到window.opener。

Referrer Policy:

rel属性只能定制单个元素的Referer行为,而且选择比较少,只能发送或不发送。W3C为此制定了更强大的 Referrer Policy。

Referrer Policy 可以设定8个值。

    (1)no-referrer:不发送Referer字段。
    (2)no-referrer-when-downgrade:如果从HTTPS链接到HTTP,不发送Referer字段,其他情况发送。这是浏览器的默认行为
    (3)same-origin:链接到同源网址(协议+域名+端口都相同)时发送,否则不发送
    (4)origin:一律只发送源信息(协议+域名+端口)
    (5)strict-origin:如果从HTTPS链接到HTTP,不发送Referer字段,其他情况只发送源信息
    (6)origin-when-cross-origin:同源时,发送完整的Referer字段,跨域时发送源信息
    (7)strict-origin-when-cross-origin:同源时,发送完整的Referer字段;跨域时,如果HTTPS链接到HTTP不发送Referer字段,否则发送源信息。
    (8)unsafe-url:Referer字段包含源信息、路径和查询字符串,不包含锚点、用户名和密码。

Referrer Policy 有多种使用方法。

    (1)HTTP 头信息
    服务器发送网页的时候,通过 HTTP 头信息的Referrer-Policy告诉浏览器。
    Referrer-Policy: origin
    (2)<meta>标签
    也可以使用<meta>标签,在网页头部设置。
    <meta name="referrer" content="origin">
    (3)referrerpolicy属性
    <a>、<area>、<img>、<iframe>和<link>标签,可以设置referrerpolicy 属性。
    <a href="..." referrerpolicy="origin" target="_blank">xxx</a>
最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。