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避坑
常见坏用法
看起来能用,其实会给用户添麻烦。
- 01
为了让段落缩进好看就套上 blockquote,读屏软件把作者自己的话读成了「引用」
- 02
引用没有出处,读者不知道是谁说的,也不知道可不可信
- 03
一页里大段大段都是引用,竖线连成一片,分不清哪些是作者自己的观点
03识别
怎么认出它
先看整体结构,再对照几个一眼能认出的特征。
结构
由一段缩进的引文(左侧常有竖线,文字颜色较浅或用斜体)和一行出处组成;摘句则是放大居中的一句话加大号引号。
组成部分点一下,在上面的线框里标出来
识别特征
- 1正文中间一段缩进的文字,左侧有一条竖线
- 2文字颜色比正文浅一些,或者是斜体
- 3下面一行小字以「——」开头,写着说话的人和出处
04解释
详细解释
引用用来把「别人说的话」和作者自己的正文分开:名人名言、用户访谈的原话、另一篇文章的片段、邮件回复里保留的原文。HTML 里用 blockquote 标签,常见样式是左侧一条 3~4px 的竖线、整段缩进、文字颜色稍浅或用斜体,下面一行「—— 张三,某公司 CTO」写出处(放在 cite 或 figcaption 里)。杂志风的页面还会做「摘句」(Pull Quote):把正文里的一句话放大、居中,配上大号引号,当作视觉重点。
它和 警告提示 容易混,因为文档站常把「注意」「提示」也画成左侧一条竖线的色块:警告提示是作者自己给的提醒,有图标、用颜色区分轻重;引用是别人的原话,不表示任何状态。它和 客户评价 的区别:客户评价是官网上一张张卡片,带头像、姓名、公司和星级,用来证明产品好用;引用只是正文里的一段引文。
只在真的引用别人时才用 blockquote,不要为了让一段话缩进好看就套上它。出处写清楚是谁、在哪里说的;原文太长就截取关键句。引用和上下正文之间留出段落间距,竖线用浅灰或品牌色的浅色,别比正文还抢眼。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-blockquote- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器(标签、ARIA role、常见组件库 class)。
blockquote.blockquotefigure:has(> blockquote)
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
blockquoteblock-quotequotequote-blockpull-quotepullquotequotation
- 组件名
React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。
BlockquoteBlockQuoteQuotePullQuote
- 语义标签和角色
弱信号,要和其他线索一起才算识别出来。
<blockquote>
- 优先级
- 2 · 同一层有多条命中时,优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30