q标签默认不显示引号是因中文系统未配置引号表，需显式设置quotes属性（如q{quotes:"“""”""‘""’";}）并正确声明lang属性，否则Safari等可能失效；cite属性仅影响SEO和无障碍，不渲染内容。
q标签默认加引号但中文环境常不显示
q 是行内语义标签，浏览器本应通过 ::before 和 ::after 伪元素自动插入引号，但实际中——尤其是中文站点——经常“没引号”。这不是 bug，而是规范行为：HTML 标准只要求浏览器按系统语言和 lang 属性查引号表，而多数中文系统未配置默认引号对，导致 content: open-quote 渲染为空。
必须显式设置 quotes CSS 属性才能稳定生效：
q {
quotes: "“" "”" "‘" "’";
}
注意四元组写法，不能只写两个；否则 Safari 可能回退到英文双引号或干脆不渲染。
-
lang属性必须设对，比如<q lang="zh-CN">设计以人为本</q>，否则quotes不触发层级匹配 - IE 完全不支持
quotes，需降级为手动写“<span>设计以人为本</span>” - Flex 或 Grid 容器里若给
q设display: block，会破坏伪元素上下文，引号消失
嵌套q标签引号层级失效的常见原因
HTML 允许 q 嵌套，理论上外层用双引号、内层用单引号。但 Safari 和部分安卓 WebView 实现不完整，常把所有层级都渲染成同一对引号，甚至跳过内层。
立即学习“前端免费学习笔记（深入）”；
调试时可用控制台验证当前生效的引号：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
getComputedStyle(document.querySelector('q')).quotes
返回空字符串或 "\"\" \"\"" 就说明没生效。
- 最多嵌套两层，三层以上建议改用手动插入
“/‘ - 避免在
q上直接写font-style: italic等样式干扰伪元素继承 - 若父容器有
quotes: none，子q也会被重置，需显式重新声明
cite属性不显示但影响SEO和无障碍
cite 是 q 的合法属性，值为 URL，例如 <q cite="https://example.com/book#p42">少即是多</q>。它不会在页面上渲染任何内容，但对搜索引擎和读屏器有意义。
关键点：
- 别用
title替代cite：移动端不触发、读屏器不一定播报、无 SEO 价值 - URL 应指向具体出处（如锚点），而非首页；否则失去引用精度
- 若出处是书名/文章名，且需视觉呈现，应配合
<footer><cite>《简约法则》</cite></footer>，而不是塞进cite属性
q和blockquote混用导致样式和语义双崩坏
把整段话包进 q，或把一句话硬塞进 blockquote，是最常见的语义误用。前者让屏幕阅读器误判为“行内短引用”，后者触发块级默认缩进+边距，破坏行文流。
判断依据就一条：
- 是否打断当前句子结构？——是 →
blockquote；否 →q - 是否带明确出处（作者/书名/页码）且需独立排版？——是 →
blockquote+<footer> - 是否仅用于强调“这话不是我说的”？——是 →
q，哪怕只有两个字，如「他说：不行
」
真正难的不是选哪个标签，而是确保 lang、quotes、cite、伪元素、读屏器播报全部对齐——漏掉任一环，用户看到的就只是普通文字。
