应使用 引用独立成段、语义完整且需视觉脱离上下文的长文本，如整段演讲或书摘；而 仅适用于嵌入句中、不打断行文流的短引用。
什么时候该用 <blockquote></blockquote> 而不是 <q></q>
看引用是否「独立成段」：如果这段话在原文里是单独一段、有完整语义、需要视觉上脱离上下文（比如摘录整段演讲、书摘、评论），就用 <blockquote></blockquote>；如果它嵌在你自己的句子里，像「他说：马上到
」这样不打断行文流，就用 <q></q>。
常见错误现象：
- 把三行诗用
<q></q>包裹——浏览器可能只加一对引号，甚至不渲染，屏幕阅读器会把它读成一句怪话 - 在段落中间硬塞
<blockquote></blockquote>——破坏行内流，导致布局错位或换行异常 - 用
<div> + 手动加引号模拟引用——语义丢失，SEO 和无障碍支持归零 <h3> <code>cite属性到底怎么写才有效cite只能写在<blockquote></blockquote>或<q></q>开始标签里，且必须是完整 URL（含https://），不能是作者名、书名或相对路径。正确写法示例：
<blockquote cite="https://example.com/2023/speech"> 想象力比知识更重要。 </blockquote> <p>爱因斯坦说：<q cite="https://example.com/2023/speech">想象力比知识更重要</q>。</p>
容易踩的坑：
-
cite="爱因斯坦《相对论》"—— 无效，浏览器忽略，辅助技术无法识别来源 -
<cite>《相对论》</cite>放在<blockquote></blockquote>外面当“作者栏”——语义断裂，cite属性没绑定到引用本身 - 多个引用共用一个
cite值却没拆分标签——搜索引擎无法区分哪段话对应哪个来源
浏览器对
<q></q>加引号的行为不可靠Chrome/Firefox 默认给
<q></q>加英文双引号（"..."），但中文环境通常不自动加中文引号（「」或“”），也不保证嵌套层级正确（如<q><q>嵌套</q></q>可能只加一层）。实际建议：
- 不要依赖浏览器自动加引号来呈现中文内容，用 CSS 的
quotes属性显式控制：
q { quotes: "“" "”" "‘" "’"; } q q { quotes: "‘" "’" "“" "”"; }-
<blockquote></blockquote>不加引号，只靠缩进和边距体现引用关系，所以样式更可控 - 若需完全统一引号风格，宁可用
<span class="quote"></span>+ CSS，也别强行让<q></q>承担中文排版任务
嵌套规则和语义冲突点
<blockquote></blockquote>里可以合法嵌<q></q>（比如大段引文中某句再引别人），但反过来绝对不行：<q><blockquote>...</blockquote></q>是 HTML 语法错误，验证器直接报错。另一个常被忽略的细节：
-
<blockquote></blockquote>必须包含块级内容（如<p></p>），XHTML strict 或现代 HTML 验证下，直接写<blockquote>文字</blockquote>可能被警告或重排 -
<q></q>内部不能放<p></p>、<div> 等块级元素，否则解析失败或渲染异常 <li>引文里的换行、缩进、段间距，应由 CSS 控制，而非靠标签“看起来像”——语义和表现必须分离</li> <p>最复杂的点往往不在选哪个标签，而在是否意识到：浏览器渲染只是副产品，真正的价值是让机器（搜索引擎、读屏软件、爬虫）准确理解“这段文字不是我写的，是引用的”。一旦混淆 <code><q></q>和<blockquote></blockquote>的语义边界，后续所有无障碍、SEO、结构化数据都跟着偏移。
-
