必须用 blockquote 包裹 pre+code 仅当代码确系引用外部来源（如 mdn、rfc、开源库 readme）并需声明出处；自写示例、教学代码等不得使用，否则造成语义错误、屏幕阅读器误读、seo 失真及样式失控。
单独用 blockquote 包裹代码片段是语义错误，直接导致屏幕阅读器误读、SEO 信息失真、样式不可控；真正合规的做法是把 precode 嵌套在 blockquote 内部，并严格区分「引用来源」和「被引用的代码内容」。
什么时候必须用 blockquote 包住 pre+code
仅当这段代码是从外部文档、规范、API 手册或他人仓库中直接摘录，且你明确想声明「这不是我写的，而是引自某处」时才适用。比如：
- 引用 MDN 上关于
fetch()的示例代码 - 摘录 RFC 文档里的 HTTP 请求头格式
- 转述某开源库 README 中的配置片段
如果代码是你自己写的示例、教学演示或伪代码，blockquote 就不该出现——哪怕加了 cite 属性也掩盖不了语义矛盾。
正确嵌套结构：blockquote > pre > code
顺序不能颠倒，层级不能跳过。常见错误是写成 blockquotecode（缺 pre）或 preblockquotecode（blockquote 在中间，破坏语义流）。
标准写法如下：
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">
<pre class="brush:php;toolbar:false;"><code class="js">fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));</code>
注意三点：
-
cite属性值必须是有效 URL，不能是空字符串或相对路径如"./mdn.html" -
footer是可见的，用于人类阅读；cite是机器可读的，两者互补不重复 -
class="js"必须写在code上，不是pre或blockquote，否则 Prism.js / Highlight.js 不会触发高亮
HTML 实体转义和语法高亮的双重校验
嵌套后容易忽略两个硬性约束：一是代码里的 、<code>>、& 仍需手动转义；二是高亮库只认 code 的 class，不认 blockquote 的任何属性。
例如，你想展示一段 HTML 片段：
<blockquote cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element">
<pre class="brush:php;toolbar:false;"><code class="html"><code>console.log("hello");</code></code>
这里 < 和 > 是必须的——漏掉一个，浏览器就会尝试解析 <code> 标签，导致 DOM 截断甚至页面错乱。
同时，如果你把 class="html" 错写成 class="htm" 或 lang="html"，Prism.js 就会当作纯文本处理，关键词全灰。
样式与可访问性的隐藏冲突
给 blockquote 加背景色、边框或左缩进时，别忘了它默认已有上下外边距和左缩进。直接叠加 CSS 容易造成视觉过载或移动端排版挤压。
更关键的是：屏幕阅读器对 blockquote 有固定播报逻辑（如“引用开始”“引用结束”），如果里面塞的是可执行代码，用户听到的是「引用开始，function greet…」，而非「代码块开始，JavaScript 代码」——语义层就断了。
所以建议：
- 用
class控制样式，不要修改blockquote全局 margin/padding - 确保
pre内部有overflow-x: auto，防止长代码行撑破容器 - 别在
blockquote上加role="code"或aria-label——它已有原生语义，覆盖反而干扰辅助技术
真正难的从来不是怎么写标签，而是每次敲下 <blockquote></blockquote> 前，先问一句：这段代码，我真的在引用别人的东西吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
