仅用于明确引用外部独立成文内容，误用会损害可访问性与SEO；cite属性不渲染，须用手动标注出处；HTML5允许直接嵌入文本，XHTML则要求块级元素包裹。

blockquote 不是用来“加缩进”或“让文字看起来像引用”的样式工具，它只该用在你**明确引用外部独立成文内容**的场景。用错会干扰屏幕阅读器、损害 SEO、甚至让辅助技术误读你的本意。

什么时候必须用 blockquote？

判断标准非常直接：这段文字是否来自别处，且你愿意为它标注来源？

• ✅ 正确：摘录 MDN 文档中一段说明、论文里的结论、公开演讲原文
• ❌ 错误：自己写的提示语、内部备注、无真实出处的“名人名言”、纯为了视觉区分而套用
• ⚠️ 注意：cite 属性值必须是完整 URL（如 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote），不能填书名、人名或 #section2 这类片段

blockquote 里为什么必须嵌套 p？

HTML5 允许

纯文本

，但实际开发中不建议这么写——问题不在语法合法性，而在可访问性和样式控制。

• 屏幕阅读器可能把多段文字连读成一段，无法识别自然停顿
• CSS 没法单独给第二段加 margin-top 或调整首行缩进
• 如果页面需通过 XHTML 验证（比如遗留系统），这种写法直接报错
• 正确结构是：

  第一段。

  第二段。

怎么让引用来源真正显示出来？

cite 属性浏览器完全不渲染，填了也等于没写。用户看到的“出处”，必须手动添加并包裹在语义正确的标签里。

• 用
  《JavaScript 高级程序设计》第4版，p.127
  —— cite 标签只用于作品标题，不是人名
• 别用 替代
  ，后者语义更准确，对辅助技术更友好
• 来源信息必须放在 blockquote 内部，不能写在外部或用注释代替
• 如果真没有外部来源，就别用 blockquote，改用
  加 CSS 控制

  样式重置最容易忽略的三个点

  浏览器默认给 blockquote 加的是 margin（左右各约 40px），不是 padding 或 text-indent。很多人调了半天没效果，是因为方向错了。

  • 清除缩进请用 blockquote { margin: 0; }，而不是 padding-left: 20px
  • 想加左侧竖线强调引用，推荐 blockquote { border-left: 3px solid #ccc; padding-left: 1rem; } —— RTL 页面下也安全
  • 引号不能靠 quotes CSS 属性自动加（它只对 生效），要用 ::before/::after 伪元素手动插入「」或 “”

  最常被跳过的其实是语义校验：贴一段自己写的“引用”，却没外部来源，还硬塞 cite —— 这时候标签不是在帮忙，是在撒谎。