HTML DOM Anchor rel 和 rev 属性（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：超链接的“隐藏语言”——探索 HTML DOM Anchor 的 rel 和 rev 属性

在网页开发中，超链接（Anchor）是连接不同页面或资源的核心工具。但你是否知道，每个链接还可以携带额外的“元信息”，帮助浏览器、搜索引擎和开发者理解链接的含义？今天，我们将深入探讨 HTML 中的 rel 和 rev 属性，这两个看似不起眼的标签，实则是超链接的“导航员”和“身份标识”。无论是优化 SEO，还是构建更智能的网页交互，掌握它们都将为你的开发之路增添一份“隐形的翅膀”。

一、基础概念：超链接的“元数据”与 DOM 的关系

1.1 超链接的“隐藏属性”

超链接的基本语法是 <a href="目标URL">文本</a>，但通过添加属性，可以为链接赋予更多含义。例如：

<a href="https://example.com" rel="nofollow">跳转到示例网站</a>

这里的 rel="nofollow" 就是通过 rel 属性告诉搜索引擎“不要跟踪此链接”，防止权重传递。

1.2 DOM 操作的桥梁

在浏览器中，HTML 元素通过 Document Object Model（DOM） 以对象形式存在。开发者可以通过 JavaScript 操作 rel 和 rev 属性，例如动态修改链接的元数据。

document.querySelector("a").rel = "external"; // 将 rel 属性设为 "external"

1.3 rel 与 rev 的核心作用

• rel：定义当前页面与目标页面的关系（从当前页面指向目标页面）。
• rev：定义目标页面与当前页面的关系（从目标页面指向当前页面）。
  可以想象成：
• rel 是“我指向你，我是你的……”
• rev 是“你是我的……，你指向我”

二、深入 rel 属性：定义链接的“身份标签”

2.1 rel 的常见值与作用

以下是开发者最常使用的 rel 值及其含义：

形象比喻：

rel 就像快递单上的“备注”：

• “nofollow” = “请勿签收”
• “external” = “此包裹来自第三方”

2.2 rel 的高级用法：结合 JavaScript 实现动态行为

通过 DOM 操作 rel 属性，可以实现更灵活的功能。例如，根据用户行为动态标记链接：

function markExternalLinks() {
  const links = document.querySelectorAll("a");
  links.forEach(link => {
    if (link.hostname !== window.location.hostname) {
      link.rel += " external"; // 追加 "external" 标签
    }
  });
}
markExternalLinks();

此代码会自动为所有外部链接添加 rel="external"，帮助用户识别外部资源。

三、探索 rev 属性：反向关系的“镜像世界”

3.1 rev 的基本语法与挑战

rev 属性的语法与 rel 相似，但方向相反：

<a href="https://example.com" rev="made">此页面由示例网站制作</a>

这里的 rev="made" 表示“目标页面（示例网站）是当前页面的制作者”。

3.2 rev 的历史与现状

• 历史用途：早期用于描述网站间的“血缘关系”，如 rev="subsection" 表示当前页面是目标页面的子章节。
• 现代兼容性：HTML5 标准已不推荐使用 rev 属性，因其难以维护且易引发歧义。例如，若 A 页面对 B 页面设置 rev="child"，则 B 页面需对 A 设置 rel="child"，否则逻辑不一致。

3.3 替代方案：用 rel 构建双向关系

虽然 rev 逐渐被淘汰，但可通过 rel 的组合实现类似效果：

<!-- A 页面 -->
<a href="B页面URL" rel="parent">查看父页面</a>

<!-- B 页面 -->
<a href="A页面URL" rel="child">查看子页面</a>

通过 rel="parent" 和 rel="child"，明确双向关系，无需依赖 rev。

四、实战案例：构建一个“智能导航系统”

4.1 场景：博客文章的作者与来源

假设我们有一个博客页面，需要：

1. 标记作者链接；
2. 标记外部引用的资料来源；
3. 避免跟踪评论区的广告链接。

实现代码：

<!-- 作者链接 -->
<a href="/author/john" rel="author">作者：John Doe</a>

<!-- 外部引用 -->
<a href="https://research.org" rel="external">参考文献</a>

<!-- 评论区广告（nofollow） -->
<a href="https://ads.example" rel="nofollow">点击获取优惠</a>

4.2 动态增强：通过 JavaScript 添加 rel 标签

// 自动为所有外部链接添加 "external" 标签
document.querySelectorAll("a").forEach(link => {
  if (!link.hostname || link.hostname !== window.location.hostname) {
    link.setAttribute("rel", "external");
  }
});

此代码会遍历所有链接，为外部链接动态添加 rel="external"，无需手动维护。

五、最佳实践与注意事项

5.1 关键原则

1. 优先使用 rel：rev 属性因兼容性问题，建议仅在特殊需求下使用。
2. 保持语义清晰：选择与链接实际用途最匹配的 rel 值（如 author 而非模糊的 related）。
3. SEO 友好：对广告、用户评论等非权威内容添加 nofollow，避免 SEO 权重浪费。

5.2 常见误区

• 误区 1：认为 rel="external" 会自动在链接旁显示图标。
  真相：该属性仅是元数据，需通过 CSS 或 JavaScript 手动添加视觉提示（如图标）。

• 误区 2：过度依赖 rev 构建网站结构。
  建议：改用 rel 的双向组合或通过数据库管理页面关系。

六、常见问题解答

Q1：rel="nofollow" 是否完全阻止搜索引擎抓取？

A：并非完全阻止，而是告知搜索引擎“不要将此链接作为排名参考”。搜索引擎仍可能抓取页面，但不会传递权重。

Q2：如何检查页面中所有链接的 rel 属性？

A：使用开发者工具（如 Chrome DevTools）的“Elements”面板，逐个查看 <a> 标签的属性，或通过 JavaScript：

document.querySelectorAll("a").forEach(link => {
  console.log(link.rel);
});

结论：用“元数据”构建更智能的网页

通过理解 rel 和 rev 属性，开发者能够为超链接赋予“语义”和“意图”，让网页不仅是静态内容，而是可被解析、可被交互的“智能节点”。尽管 rev 因时代局限逐渐退场，但 rel 仍是 SEO、用户体验优化和前端逻辑中的重要工具。

在未来的开发中，不妨尝试为每个链接添加合适的 rel 标签，让代码不仅“能用”，更能“被理解”。毕竟，每一行 HTML 都是开发者与浏览器、搜索引擎之间的“对话”——而 rel，正是这场对话中最优雅的注解。

（全文约 1800 字）