<q>标签专用于语义化标记段落内简短、有明确出处的嵌入式引用，必须配合cite属性以保障可访问性与SEO，禁用块级元素嵌套，其引号由伪元素自动生成并依lang和quotes规则智能切换。
<q> 标签不是“加引号的快捷方式”，它只在语义正确、引用简短、有明确出处意图时才该用；滥用会导致屏幕阅读器误读、SEO 降权、IE 兼容性出错。
什么时候必须用 <q> 而不是手动打引号
只有当你需要向浏览器和辅助技术明确声明：“这段文字是来自别处的嵌入式短引用”，且它自然嵌在段落中（不换行、不缩进）时，<q> 才是必要选择。比如新闻稿里夹带一句受访者原话，或学术页面中穿插术语定义来源。
- ✅ 正确场景：
<p>爱因斯坦曾说：<q cite="https://example.com/einstein">想象力比知识更重要。</q>这句话常被误引为“知识就是力量”。</p> - ❌ 错误场景：整段摘录、带换行的诗句、无来源的格言、UI 中纯装饰性引号（如卡片标题旁的“”图标）——这些该用
<blockquote>、CSS 或直接字符 - ⚠️ 注意：
cite属性虽非必需，但省略后会丢失语义完整性；部分屏幕阅读器依赖它触发“引自…”提示
<q> 的引号从哪来？为什么中文页面看起来没引号
引号由浏览器内置 CSS 的 ::before 和 ::after 伪元素生成，默认值是 content: open-quote; 和 content: close-quote;，而引号样式取决于页面 lang 属性和浏览器对 quotes 属性的实现。
- Chrome/Firefox 会根据
<html lang="zh-CN">自动选用中文引号（“”），但 IE 完全忽略lang，一律用英文双引号 - 若页面未设
lang，或 CSS 中重置了quotes（如quotes: none;），<q>就不显示任何引号——这不是 bug，是规范行为 - 想强制中文引号又兼顾 IE？得手写 CSS：
q:before { content: "“"; } q:after { content: "”"; }，但会覆盖多层嵌套引用逻辑
<q> 嵌套时引号怎么变？为什么第二层变成单引号
浏览器通过 quotes 属性控制嵌套层级的引号配对，初始值通常是 quotes: "“" "”" "‘" "’";，所以第一层用“”，第二层自动切到‘’。
立即学习“前端免费学习笔记（深入）”；
- 示例：
<q>他说：<q>我昨天看到<q>真奇怪</q>这句话</q>，然后笑了。</q>→ 渲染为：“他说：‘我昨天看到“真奇怪”这句话’，然后笑了。” - 这个机制依赖浏览器支持，IE 完全不处理嵌套，所有层级都显示双引号
- 若想禁用嵌套变化（比如全部统一用「」），可覆写：
q { quotes: "「" "」"; } q q { quotes: "『" "』"; }
常见报错和兼容性陷阱
多数问题不是标签写错，而是语义误用或环境缺失导致渲染/可访问性失效。
-
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'q[cite]' is not a valid selector—— 实际是 selector 写法错误，cite是属性，应写成q[cite]，不是q.cite - Vue/React 中动态插入
<q>后引号不显示？检查是否漏传lang，或框架把<q>当作普通标签未激活语义解析（极少见，但 SSR 场景下可能） - SEO 工具警告“
<q>缺少 cite 属性”——这不是硬性错误，但 Google 搜索文档建议提供cite以增强内容可信度 - 最易忽略的一点：
<q>不能包裹<p>、<div>等块级元素，否则 HTML 验证失败；它只接受 phrasing content（文本、<em>、<strong>等）
