<q>用于行内短引文，如对话或术语，需CSS补中文引号且不可含块级元素；<blockquote>用于独立长引用，可嵌套段落和cite，cite属性必须为有效URL以保障机器可读性。
<q> 和 <blockquote> 都表示引用，但语义、默认渲染和使用场景完全不同——不是“差不多能用”，而是“用错就破坏结构”。
什么时候该用 <q>？
<q> 是行内元素，只适合包裹一句话里的一小段引文，比如对话、术语、短句。
- 浏览器默认给它加英文双引号（
"..."），但中文环境通常不自动加，得靠 CSS 的quotes属性补上，比如quotes: "“" "”" "‘" "’"; - 它不能包整段文字，也不能包含
<p>、<div>等块级内容；否则会触发 HTML 验证警告，读屏器也会误读为“一句话里嵌套段落” -
cite属性可选，但值必须是有效 URL（如cite="https://example.com/doc"），不是作者名或书名；浏览器不显示它，但爬虫和辅助技术依赖这个链接定位原始出处
正确示例：<p>他说<q cite="https://example.com/speech">这件事必须今天解决</q>，然后转身离开了。</p>
什么时候必须用 <blockquote>？
<blockquote> 是块级元素，专用于独立成块的引用内容，比如摘录文章段落、他人长篇论述、代码文档节选。
立即学习“前端免费学习笔记（深入）”；
- 默认有上下外边距和左右缩进（各约 40px），视觉上自然与正文分离
- 内部可以合法包含多个
<p>、<footer>或<cite>，但<cite>只表示作品名（如《JavaScript高级程序设计》），不是作者名 -
cite属性在这里更关键——它不是装饰，而是机器可读的唯一来源标识；空值、纯文本、手写“张三说”都等于没写 - 不要把它当“缩进容器”滥用：没有引用语义却套
<blockquote>，会让读屏器跳过正常段落流，直接报“引用开始”，用户会困惑
正确示例：<blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote"><p>The <code><blockquote></code> element indicates that the enclosed text is an extended quotation.</p><footer><cite>MDN Web Docs</cite></footer></blockquote></blockquote>
常见错误现象和坑
这些不是“样式不对”，而是语义断裂，直接影响 SEO、无障碍访问和长期维护。
- 用
<q>包裹三行文字，甚至带换行符——浏览器可能渲染异常，读屏器会把换行当成语音停顿，导致断句错乱 - 在
<blockquote>里手写<p>——鲁迅《朝花夕拾》</p>而不用cite属性——搜索引擎无法关联原始文献，辅助技术无法跳转验证 - 嵌套多层
<blockquote>（如三层）——HTML 允许，但实际中超过一层就难区分谁引谁，建议拆成多个独立块并加标题说明 - 以为
<q>在 IE6/7 下加引号就安全——它根本不支持，且现代浏览器对中文引号渲染也不一致，必须用 CSS 控制
真正要记住的只有一条：引用不是为了加引号或缩进，而是告诉机器“这段话来自别处”。<q> 是“他说了一句”，<blockquote> 是“他写了整整一段”。选错标签，等于给数据贴错标签——后续所有自动化处理都会偏移。
