跳到主要内容

UI 组件 · 文字

引用

Blockquote

也叫:引用块、引文、块引用、Quote、Pull Quote、Block Quote

文章里引用别人的话或其他来源的一段内容:左边一条竖线、整段缩进,文字颜色稍浅,末尾注明出处。

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

怎么跟 AI 说

改成你的业务内容再发

统一文章正文里引用的样式:用 blockquote 标签,左侧 3px 浅灰竖线(#D1D5DB),左内边距 16px,上下外边距 20px,文字 16px、颜色 #4B5563、行高 1.75,不用斜体。出处放在 figcaption 里另起一行,14px 灰色,前面加「——」。另外做一个摘句样式:文字 22px、居中,上方一个 40px 的浅灰大引号,上下各留 32px,一篇长文里最多用一两次。不要用 blockquote 做普通的缩进或提示框。

发给

01判断

你的内容是这样吗?

对照两列,确认引用是不是你要找的。

符合这些情况,用引用

  • 文章、报告里引用别人的原话、访谈内容或其他资料的片段
  • 邮件、论坛回复里保留被回复的原文
  • 长文里把一句关键的话放大成摘句,打断大段文字、突出重点

是这些情况,换成别的

  • 作者自己给的「注意」「提示」,用警告提示,带图标和颜色

  • 官网上展示客户的推荐语,用客户评价卡片,带头像和公司

  • 只是想让一段文字缩进或变灰,直接改样式,不要用引用标签

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

02避坑

常见坏用法

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

  1. 01

    为了让段落缩进好看就套上 blockquote,读屏软件把作者自己的话读成了「引用」

  2. 02

    引用没有出处,读者不知道是谁说的,也不知道可不可信

  3. 03

    一页里大段大段都是引用,竖线连成一片,分不清哪些是作者自己的观点

03识别

怎么认出它

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

结构

由一段缩进的引文(左侧常有竖线,文字颜色较浅或用斜体)和一行出处组成;摘句则是放大居中的一句话加大号引号。

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

识别特征

  1. 1正文中间一段缩进的文字,左侧有一条竖线
  2. 2文字颜色比正文浅一些,或者是斜体
  3. 3下面一行小字以「——」开头,写着说话的人和出处

04解释

详细解释

引用用来把「别人说的话」和作者自己的正文分开:名人名言、用户访谈的原话、另一篇文章的片段、邮件回复里保留的原文。HTML 里用 blockquote 标签,常见样式是左侧一条 3~4px 的竖线、整段缩进、文字颜色稍浅或用斜体,下面一行「—— 张三,某公司 CTO」写出处(放在 cite 或 figcaption 里)。杂志风的页面还会做「摘句」(Pull Quote):把正文里的一句话放大、居中,配上大号引号,当作视觉重点。

它和 警告提示 容易混,因为文档站常把「注意」「提示」也画成左侧一条竖线的色块:警告提示是作者自己给的提醒,有图标、用颜色区分轻重;引用是别人的原话,不表示任何状态。它和 客户评价 的区别:客户评价是官网上一张张卡片,带头像、姓名、公司和星级,用来证明产品好用;引用只是正文里的一段引文。

只在真的引用别人时才用 blockquote,不要为了让一段话缩进好看就套上它。出处写清楚是谁、在哪里说的;原文太长就截取关键句。引用和上下正文之间留出段落间距,竖线用浅灰或品牌色的浅色,别比正文还抢眼。

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

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

  • blockquote
  • .blockquote
  • figure:has(> blockquote)
类名关键词

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

  • blockquote
  • block-quote
  • quote
  • quote-block
  • pull-quote
  • pullquote
  • quotation
组件名

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

  • Blockquote
  • BlockQuote
  • Quote
  • PullQuote
语义标签和角色

弱信号,要和其他线索一起才算识别出来。

  • <blockquote>
优先级
2 · 同一层有多条命中时,优先级高的胜出
版本
v2 · 更新于 2026/09/30