专用于标记完整摘录的外部引用内容，必须包裹段落等流内容，推荐搭配 标注来源，不可用于样式装饰或内部直接放置纯文本。
<blockquote></blockquote> 不是用来“加个缩进”或“让文字变灰”的视觉装饰工具，它明确表示一段**独立、完整、来自外部的引用内容**。用错场景或嵌套不当，会破坏语义、影响 SEO 和屏幕阅读器体验。
什么时候必须用 <blockquote></blockquote> 而不是 <p></p> 或 <div>
<p>核心判断标准：这段文字是否**完整摘录自他人、其他文档、书籍、网页或公开言论**，且你未做实质性改写？</p>
<ul>
<li>✅ 适合：<code><blockquote></blockquote> 引用《设计心理学》里的一整段原文；引用 GitHub issue 中某位 contributor 的完整回复；引用新闻稿中某句关键表态
<blockquote></blockquote> 包裹你自己写的总结句（该用 <p></p>）；包裹一句没注明来源的“名言”（属误导性引用）；包裹带图标、按钮等交互元素的“卡片式引用”（该用 <aside></aside> + CSS）<q></q>，而非 <blockquote></blockquote>
<blockquote></blockquote> 必须配 <cite></cite> 吗？怎么写才合规
HTML 规范不要求 <cite></cite> 子元素，但**不加来源信息等于弱化引用可信度，也违反可访问性基本要求**。屏幕阅读器常会将 <cite></cite> 内容作为引用上下文播报。
- ✅ 推荐写法：
<blockquote> <p>好的设计是看不见的设计。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <footer><cite>— Don Norman, <em>The Design of Everyday Things</em></cite></footer> </blockquote> - ❌ 常见错误：
<blockquote cite="https://example.com">...</blockquote>——cite属性仅作元数据，不渲染、不被屏幕阅读器朗读，不能替代可视的来源标注 - ?
<footer></footer>在<blockquote></blockquote>内是合法且语义清晰的容器，比用<p class="source"></p>更准确
嵌套结构与常见陷阱
<blockquote></blockquote> 是块级元素，内部可包含段落、列表甚至标题，但**不能直接放纯文本或行内元素（如 <strong></strong>）作为子节点**——这会导致 HTML 验证失败，部分浏览器解析异常。
- ✅ 正确：
<blockquote> <p>第一段引用内容。</p> <p>第二段引用内容。</p> </blockquote> - ❌ 错误：
<blockquote>直接写在这里的文字<strong>加粗部分</strong> </blockquote>—— 缺少包裹的<p></p>或其它流内容容器 - ⚠️ 深层嵌套风险：连续多层
<blockquote></blockquote>（如引文里再引文）会让结构难维护，建议用<blockquote></blockquote>+<blockquote></blockquote>并配合 CSS 缩进区分层级，而非靠嵌套表达逻辑
真正容易被忽略的点是：很多人把 <blockquote></blockquote> 当成“样式开关”，却忘了它本质是**内容关系声明**。一旦脱离引用语境滥用，不仅语义失效，后续想用 CSS 或 JS 做引用相关自动化处理（比如提取所有引用生成参考文献列表）就完全不可靠了。
