跳到主要内容
Termlib

UI 组件 · 基础

链接

Link

也叫：超链接、文字链、Hyperlink、a 标签

点击后跳转到另一个页面、页面内某个位置或外部网址的文字，通常带颜色或下划线。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

表格里「订单号」一列做成链接，点击跳转到对应的订单详情页，用带 href 的 a 标签实现，不要用按钮加点击事件。链接用深灰色文字，悬停时出现下划线；外部链接在新标签页打开，文字后面加一个小的外链箭头图标。

发给

01判断

你的内容是这样吗？

对照两列，确认链接是不是你要找的。

符合这些情况，用链接

  • 点击后跳转到站内另一个页面，比如从列表进入详情
  • 正文段落里引用其他文章、文档或外部网站
  • 「忘记密码」「查看全部」「用户协议」这类不需要抢眼的辅助入口

是这些情况，换成别的

  • 点击后会提交、删除、保存数据时

    改用按钮

  • 点击后只是打开对话框或抽屉、不改变页面地址时

  • 页面上最重要的主操作，需要醒目的按钮样式引导点击时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用按钮加点击事件做页面跳转，用户没法右键在新标签页打开或复制链接

  2. 02

    用 a 标签却不写 href，只挂点击事件，键盘无法聚焦

  3. 03

    链接和普通文字颜色一样又没有下划线，用户看不出哪里能点

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一段可点击的文字组成，用颜色或下划线和普通文字区分，外部链接后面常跟一个小箭头图标。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1和周围正文颜色不同的文字，有时带下划线
  2. 2鼠标悬停时出现下划线或颜色变深，光标变成手形
  3. 3没有按钮那样的背景色和边框

04解释

详细解释

链接用来「去一个地方」：跳到站内另一个页面、页面里的某一节、外部网站，或者下载文件。在 HTML 里它就是带 href 的 <a> 标签，浏览器会自动支持右键在新标签页打开、复制链接地址、按住 Ctrl 点击等操作。

它和 按钮 的区别是：链接负责导航，按钮负责执行动作。两者样式可以互相模仿，但语义不能乱用，会跳页面的用链接，会提交数据、打开弹窗的用按钮。只有图标没有文字、点了执行动作的，属于 图标按钮。

链接常出现在正文段落、表格单元格、页脚，以及「查看全部」「忘记密码」这类辅助入口。跳到外部网站时，一般在新标签页打开，并加一个小箭头图标提示。

开发者信息
术语 ID
component-link
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • a[href]:not([role="button"]):not(.btn):not(.ant-btn):not([class*="Button-root"]):not(nav a, aside a, [role="menu"] a, [role="menubar"] a, [role="tablist"] a, [role="tree"] a, .breadcrumb a, .pagination a, [class*="menu" i] a, [class*="sidebar" i] a, a[class*="nav-" i], a[class*="navitem" i], a[class*="menu" i])
  • [role="link"]
  • a.ant-typography
  • .el-link
  • [class*="MuiLink-root"]
  • .arco-link
  • .t-link
  • .n-a
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • link
  • text-link
  • more-link
  • read-more
  • view-all
  • see-all
  • view-more
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Link
  • TextLink
  • RouterLink
  • NuxtLink
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 在文字中间
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30