仅用于引用外部独立成文内容，误用会损害可访问性与SEO；cite属性不渲染，需手动添加标注出处；HTML5允许直接嵌入文本，XHTML则要求块级元素包裹；样式重置需清除默认margin，引号须用伪元素实现；无真实来源时滥用违背语义。
blockquote 不是“加个缩进的引用”就完事
它只该用于明确引用外部独立成文的内容，比如摘录规范文档、论文段落、公开讲话原文。如果只是想把一段话视觉上突出，或写个内部提示/备注，<blockquote></blockquote> 语义错误——用 <div> 加 class 或 <code><aside></aside> 更合适。误用会干扰屏幕阅读器判断、降低 SEO 有效性，甚至让辅助技术把普通说明当成他人观点朗读。
cite 属性不显示文字，也别指望浏览器渲染它
cite 属性只接受完整 URL（如 cite="https://example.com/doc#section2"），且所有主流浏览器都**不渲染其值**。它纯粹是给爬虫和机器阅读的元数据。真要让用户看到来源信息，必须手动加：<footer><cite>《JavaScript 高级程序设计》第4版，p.127</cite></footer>。漏掉这步，引用就等于没标出处。
HTML5 下必须嵌套块级元素？不一定，但 XHTML 严格要求
在纯 HTML5 页面中，<blockquote>直接写文本</blockquote> 是合法的；但如果你的页面声明了 或需通过 XHTML 验证，则内部**必须包含块级元素**，比如：<code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或 <div></div>。常见错误是直接写 <blockquote>文字</blockquote> 然后 XHTML 验证失败，却找不到原因。
样式重置时容易忽略 margin 和 quotes
浏览器默认会给 <blockquote></blockquote> 加左右 margin（通常是 40px），还可能应用斜体。重置时注意：
- 用
margin: 0;清除缩进，否则和周围布局打架 -
<blockquote></blockquote>本身不控制引号样式，quotesCSS 属性只对<q></q>生效 - 若需自定义引号（如中文「」），得用
::before/::after伪元素手动加
最常被跳过的其实是语义校验：贴一段自己写的“引用”，却没外部来源，还硬塞 cite——这时候标签不是在帮忙，是在撒谎。
立即学习“前端免费学习笔记（深入）”；
