<a href="https://www.baidu.com" rel="noopener noreferrer">百度一下</a> <a href="https://www.google.com" rel="nofollow noreferrer noopener">Google</a>
例如，在上述代码中，大家给第一个链接添加了rel属性，并设置为“noopener noreferrer”，这告诉浏览器建立链接的时候要使用“noopener noreferrer”这种关系，这个关系指的是在通过a标签链接到其他网站时，为了安全起见，要添加noopener和noreferrer属性。
第二个链接的rel属性中包含了三个值，“nofollow noreferrer noopener”，其中nofollow表示告诉搜索引擎不要将这个链接计入SEO的流量统计，而noreferrer和noopener的作用同第一个链接。
需要注意的是，rel属性的取值是区分大小写的，不同的取值对应的语义也是不同的。常见的rel属性取值包括：
alternate：指向当前文档的替代版本 author：当前文档作者的联系方式 bookmark：将当前文档加入书签 external：指向非同域名下的资源 help：提供当前文档所属网站或程序的帮助信息 license：指向当前文档相关的许可证信息 nofollow：告诉搜索引擎不要将该链接计入SEO流量统计 noreferrer：在通过a标签链接到其他网站时，为了安全起见，要跳过referrer信息 noopener：避免钓鱼攻击，确保新打开窗口的脚本无法访问原始窗口的对象 prev/next：指示文档是当前序列中的前一个/后一个 search：提供当前文档的搜索功能
总的来说，rel属性在CSS中扮演着非常重要的角色。通过理解rel属性的取值和对应的语义，可以使大家更好地理解链接与资源之间的关系，从而更好地编写出语义化结构清晰的页面。