q标签是语义标记工具，用于标识简短嵌入式引用，如正文中的受访者原话，而非单纯加引号的快捷键。
q标签不是“加引号的快捷键”，而是语义标记工具
它只在你明确想告诉浏览器和读屏器“这段文字是来自别处的简短嵌入式引用”时才该用。比如正文里夹一句受访者原话：<p>她强调：<q lang="zh">必须今天交付</q>，语气很坚定。</p>。这不是为了视觉效果，而是为了让辅助技术能读出“引号开始”“引号结束”，让搜索引擎理解这是引用内容。
常见错误包括：用<q></q>包整段摘录、包带换行的诗句、包自己写的“金句”，甚至包一个独立卡片里的“客户好评”。这些场景该用<blockquote></blockquote>或纯文本+CSS装饰。
中文页面没引号？问题出在lang和quotes两个地方
多数中文站点写完<q>你好</q>却看不到“”，不是代码错了，是浏览器没触发引号生成逻辑。原因有两个：
-
lang属性缺失或写错：必须设lang="zh"（不是zh-CN，部分旧浏览器不认后缀），且最好声明在根标签上，让子元素继承 -
quotesCSS 未显式定义：Chrome/Firefox 默认不按lang自动切中文引号，得手动写q { quotes: "“" "”" "‘" "’"; }——注意是四元组，少一个 Safari 就可能回退成英文双引号 - 如果父容器写了
quotes: none，子<q></q>也会失效，需单独重置
cite属性不显示，但不能省
cite属性值必须是有效 URL，例如<q cite="https://example.com/doc#sec2">响应式设计应优先考虑触控体验</q>。它不会渲染任何文字，但影响三件事：
立即学习“前端免费学习笔记（深入）”；
- SEO：搜索引擎据此识别引用来源，提升内容可信度
- 可访问性：JAWS/NVDA 会播报“引自 https://example.com/...”，帮助听障用户定位原始上下文
- 语义完整性：省略
cite不算错误，但等于放弃一次明确标注出处的机会
别用title或data-src替代——移动端不触发，读屏器不读，爬虫不抓。
嵌套引用要小心，三层以上建议手动处理
理论上<q>他说<q>我看到<q>真奇怪</q></q></q>应渲染为“他说‘我看到“真奇怪”’”，但实际中：
- Safari 和部分安卓 WebView 对嵌套支持不完整，第二层可能仍显示双引号
- IE 完全忽略嵌套，所有层级都用同一对引号
- 超过两层嵌套时，引号层级容易混乱，且可读性下降
真有三层引用需求，不如拆开写：<q>他说</q>“我看到<q>真奇怪</q>”，或者直接用中文书名号手动包裹内层。
最常被忽略的是：q 的语义必须与上下文匹配。如果一句话里同时出现“他说”和“她补充道”，又都用<q></q>，读屏器无法区分说话人——这时该用<aside></aside>或<figure></figure>配合<blockquote></blockquote>结构化处理。
