<q>标签不显示引号是因为浏览器未触发引号生成逻辑，核心原因在于lang属性缺失或不规范（须设为lang="zh"并声明在<html>根标签）以及CSS未显式定义四元组quotes属性（如q { quotes: "“" "”" "‘" "’"; }），二者缺一不可。
为什么<q>加了却没显示引号
不是代码写错了，是浏览器根本没触发引号生成逻辑。关键就两点：lang属性缺失或不规范，以及quotes CSS 未显式定义。
-
lang必须设为lang="zh"（不是zh-CN），且最好在<html>根标签上声明，子元素才能继承；IE 完全忽略后缀，zh-CN会导致它回退成英文引号 - Chrome/Firefox 默认不按
lang自动切中文引号，得手动写q { quotes: "“" "”" "‘" "’"; }——四元组缺一不可，Safari 少一个就会 fallback 成英文双引号 - 父容器若写了
quotes: none，子<q>也会失效，需单独重置
<q>和<blockquote>到底怎么选
别看都带引号，语义和使用场景完全不同。<q>只适用于嵌入段落中的简短引用，<blockquote>才是处理独立、成块、带换行的引用内容的标准方式。
- ✅ 正确用
<q>：<p>她强调：<q lang="zh">必须今天交付</q>，语气很坚定。</p>——不换行、不缩进、上下文已交代出处 - ❌ 错误用
<q>：包裹整段摘录、带换行的诗句、UI 卡片里的“客户好评”——这些该用<blockquote>或纯文本+CSS装饰 - ⚠️ 混合语言引用时，比如中文正文里插一句英文原话，得嵌套写
<q lang="en">，且确保父级<html lang="zh">，否则引号和读屏器语音全乱
cite属性要不要写？写了也不显示啊
cite属性确实不渲染任何可见内容，但它不是可有可无的装饰字段——它是语义链的关键一环。
-
cite值必须是有效 URL，例如cite="https://example.com/doc#sec2"；填空值、相对路径或非 URL 字符串（如cite="第3章"）会让 SEO 和读屏器失效 - JAWS/NVDA 会播报“引自 https://example.com/”，帮助听障用户定位原始上下文；省略
cite等于放弃一次明确标注出处的机会 - 别用
title或data-src替代——移动端不触发，读屏器不读，爬虫不抓
嵌套三层<q>为什么引号错乱
理论上<q>支持多层嵌套并自动切换引号层级，但实际中 Safari 和部分安卓 WebView 对第二层支持不完整，IE 则完全忽略嵌套逻辑。
立即学习“前端免费学习笔记（深入）”；
- 浏览器靠
quotes属性控制嵌套样式，默认quotes: "“" "”" "‘" "’";，所以第一层用“”，第二层切‘’，第三层又回到“”——但 IE 全部统一用双引号 - 超过两层嵌套时，引号层级容易混乱，且可读性下降；真有三层引用需求，不如拆开写：
<q>他说</q>“我看到<q>真奇怪</q>” - 如果一句话里同时出现“他说”和“她补充道”，又都用
<q>，读屏器无法区分说话人——这时该用<figure>配合<blockquote>结构化处理
<q>，而是判断它该不该出现在这里。语义错位比样式错位更难调试——屏幕阅读器不会报错，但会把“客户好评”读成“引自 unknown”，SEO 也不会警告，只是悄悄降权。 
