q标签不会自动加引号，必须显式设置css quotes四元组（如"“""”""‘""’"）并正确声明lang="zh"，否则中文页面中引号常不显示；cite属性仅影响seo与无障碍，不渲染视觉内容。

q 标签不会自动加引号，除非你显式配置 quotes 并设对 lang 属性；否则在中文页面里大概率“看不见引号”。

为什么 q 标签默认不显示引号

浏览器本应通过 ::before 和 ::after 插入引号，但 HTML 规范只要求它查系统语言对应的引号表——而多数中文系统（包括 Windows/macOS 中文环境）根本没配双引号/单引号映射。结果就是 content: open-quote 渲染为空字符串。

• 不是 bug，是规范行为
• getComputedStyle(document.querySelector('q')).quotes 返回空或 "\"\" \"\"" 就说明没生效
• IE 完全不支持 quotes，必须降级为手动写“引号”

怎样让 q 稳定显示中文引号

必须同时满足两个条件：CSS 显式声明 quotes，HTML 正确标注 lang。

• q { quotes: "“" "”" "‘" "’"; } —— 四元组写法不能省，只写两个 Safari 可能 fallback 到英文引号或干脆不渲染
• <q lang="zh-CN">设计以人为本</q> —— lang 必须匹配 CSS 中的引号层级规则，zh-HK 或 zh-TW 需另配
• 避免父容器设 quotes: none，否则子 q 会被重置，得显式再声明一遍

q 嵌套时引号层级失效怎么办

理论上外层双、内层单，但 Safari 和部分安卓 WebView 实现不完整，常把所有嵌套都渲染成同一对引号，甚至跳过内层。

• 最多安全嵌套两层；三层以上建议改用手动插入“/‘
• 别在 q 上直接加 font-style: italic，可能干扰伪元素继承
• Flex 或 Grid 容器里若给 q 设 display: block，会破坏伪元素上下文，引号消失

cite 属性到底有没有用

cite 不渲染任何视觉内容，但它影响 SEO 和读屏器识别，这点容易被忽略。

• <q cite="https://example.com/book#p42">少即是多</q> 是合法写法，URL 应指向具体锚点，而非首页
• 别用 title 替代 cite：移动端不触发、读屏器不一定播报、无 SEO 价值
• 如果出处需要视觉呈现（比如书名），应该用 <footer><cite>《简约法则》</cite></footer>，而不是塞进 cite 属性

真正麻烦的不是写法，而是引号样式依赖系统语言 + CSS + HTML 三者协同；任一环节错位，就只剩干巴巴的文字——这时候反而不如直接手打“引号”来得可靠。