该用 时是行内短引用，必须嵌在 中且不换行；该用 时是块级独立引用，自带换行与外边距，支持多段并需配合 使用。
什么时候该用 <q></q> 而不是 <blockquote></blockquote>
只看长度不靠谱——关键在「是否打断当前段落流」。<q></q> 是行内元素，必须嵌在 <p></p> 里，且引用内容不能换行、不能分段；<blockquote></blockquote> 是块级元素，会强制前后换行、自带外边距，天然脱离上下文流。
常见错误现象：<q></q> 包了三行诗、<blockquote></blockquote> 塞进一句话还加 cite 属性——这俩都违背语义。
- 适合
<q></q>的场景：「useEffect 是副作用的入口
」这种插在句子中间的短引 - 适合
<blockquote></blockquote>的场景：从 MDN 抄下来的整段Array.prototype.map()说明，或论文中截取的结论段落 - 如果引用含多个自然段，必须用
<blockquote></blockquote>+ 多个<p></p>，不能塞进一个没分段的<blockquote></blockquote>
cite 属性为什么必须填 URL，且不能省略
cite 不是给人看的，是给爬虫、读屏器、SEO 工具提取来源的唯一标准。填空字符串、纯文本（如 cite="张三"）或无效链接（如 cite="https://"），等于主动放弃引用语义。
浏览器默认不渲染 cite 值，所以别指望它自动变成“来源：xxx”。要展示文字出处，得另加 <footer></footer> 或 <small></small>，但那和 cite 无关。
立即学习“前端免费学习笔记（深入）”；
- 网页来源：填完整 URL，如
cite="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map" - 纸质书：用 ISBN 链接，如
cite="https://isbnsearch.org/isbn/97875198XXXXX" - SSR 场景（Next.js / Vue SSR）：
cite必须服务端输出，JS 动态补上爬虫看不到
嵌套引用时容易踩的坑
<q></q> 嵌套超过两层，浏览器引号会错乱甚至丢失；<blockquote></blockquote> 嵌套三层以上，结构就难维护，读屏器可能朗读混乱。
HTML 规范没禁止嵌套，但实际中应避免。真正需要多级引用时，优先拆成多个独立 <blockquote></blockquote>，靠上下文或标题区分层级。
- 错误写法：
<blockquote cite="a"><blockquote cite="b"><blockquote cite="c">…</blockquote></blockquote></blockquote> - 推荐写法：单层
<blockquote></blockquote>+ 行内<q></q>标出被引关键词，比如「Knuth 说过早优化是万恶之源
」 -
<cite></cite>只用于作品标题（书名、文章名），不是人名；人名前不加<cite></cite>
别把引用标签当样式工具用
<blockquote></blockquote> 默认缩进、<q></q> 默认加英文双引号，但这只是浏览器默认样式，不是它们存在的理由。如果只是想缩进或加引号，用 CSS 更合适；硬套引用标签反而让辅助技术误判结构。
滥用后果：语义丢失、SEO 权重稀释、读屏器朗读逻辑错乱。尤其在无障碍场景下，错误使用会让视障用户完全无法分辨哪段是你的观点、哪段是他人引述。
- 想缩进？用
margin-left或padding - 想加中文引号？用 CSS 的
quotes属性覆盖<q></q>默认行为 - 别在
<blockquote></blockquote>里手动写「——张三《前端杂谈》」，出处必须走cite属性
