<q>用于行内短引用，自动加英文引号但中文环境不加；<blockquote>用于块级长引用，有缩进和边距，可嵌套<footer><cite>标明出处，语义不可混淆。
引文标签 <q> 和 <blockquote> 用法混淆
浏览器对引文的渲染差异，八成源于把 <q> 当成 <blockquote> 用，或反过来。前者是行内短引用，后者是块级长引用——语义不同，样式默认也不同。<q> 会自动加英文双引号（"..."），但中文环境不加，且不换行；<blockquote> 默认有缩进和上下边距，适合整段摘录。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一句话、几个词的引用，用
<q>；整段、多句、带出处的，用<blockquote> - 中文站点别依赖
<q>自动加引号，CSS 里显式加quotes: "“" "”" "‘" "’";才可靠 -
<blockquote>内部可以嵌套<footer>或<cite>标明来源，但<cite>只表示作品名，不是作者名
CSS quotes 属性在不同浏览器中失效
Chrome 和 Firefox 对 quotes 的支持较一致，Safari（尤其旧版）常忽略自定义引号，或只认英文引号对。根本原因是：该属性依赖系统语言设置 + 浏览器内置引号表，不是纯 CSS 控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
quotes前，先确保元素有content伪元素触发（比如<q>::before），否则不生效 - 写全四元组：
quotes: "“" "”" "‘" "’";，不能只写两个；IE 完全不支持，需降级为手动加“ - 若用
<blockquote>配合<footer>，别把作者名塞进<cite>——它只该放书名/文章名，否则语义错误，读屏器也会念错
引文嵌套时 <q> 的层级引号错乱
HTML 规范允许 <q> 嵌套，浏览器应按层级切换引号类型（外层用双，内层用单），但 Safari 和部分安卓 WebView 会全部用同一对引号，甚至漏掉内层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最多嵌套两层；三层以上建议改用
<span>+ 手动插入“/‘ - 用
getComputedStyle(el).quotes在控制台检查当前生效的引号值，验证是否被覆盖或重置 - 避免在 Flex/Grid 容器里直接对
<q>设display: block——这会让伪元素失效，引号消失
无障碍访问下引文信息丢失
屏幕阅读器对 <q> 和 <blockquote> 的播报逻辑不同：<q> 通常只读内容，不提示“引用”；<blockquote> 多数会播报“引用开始/结束”，但若没加 cite 属性或 <footer>，出处就完全不可达。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
<blockquote>必须配cite属性（URL）或内部<footer><cite>.../footer> - 短引用若需强调语义，可加
aria-label，例如<q aria-label="引用自《设计心理学》第42页">...</q> - 别用
title属性塞出处——它不被所有读屏器识别，且悬停才显示，移动端无效
引文格式真正难的不是加标签，而是让语义、样式、无障碍三者同步生效；任何一个环节断开，用户看到的就只是“一串带引号的文字”。
