全面掌握HTML文档结构中的q短引用标签-html教程-PHP中文网

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

标签不显示引号是因为浏览器未触发引号生成逻辑，核心原因在于lang属性缺失或不规范（须设为lang="zh"并声明在根标签）以及css未显式定义四元组quotes属性（如q { quotes: "“" "”" "‘" "’"; }），二者缺一不可。

全面掌握html文档结构中的q短引用标签

不是代码写错了，是浏览器根本没触发引号生成逻辑。关键就两点：lang属性缺失或不规范，以及quotes CSS 未显式定义。

lang必须设为lang="zh"（不是zh-CN），且最好在根标签上声明，子元素才能继承；IE 完全忽略后缀，zh-CN会导致它回退成英文引号
Chrome/Firefox 默认不按lang自动切中文引号，得手动写q { quotes: "“" "”" "‘" "’"; }——四元组缺一不可，Safari 少一个就会 fallback 成英文双引号
父容器若写了quotes: none，子<q></q>也会失效，需单独重置

别看都带引号，语义和使用场景完全不同。<q></q>只适用于嵌入段落中的简短引用，<blockquote></blockquote>才是处理独立、成块、带换行的引用内容的标准方式。

✅ 正确用<q></q>：<p></p>她强调：<q lang="zh"></q>必须今天交付，语气很坚定。——不换行、不缩进、上下文已交代出处
❌ 错误用<q></q>：包裹整段摘录、带换行的诗句、UI 卡片里的“客户好评”——这些该用<blockquote></blockquote>或纯文本+CSS装饰
⚠️ 混合语言引用时，比如中文正文里插一句英文原话，得嵌套写<q lang="en"></q>，且确保父级，否则引号和读屏器语音全乱

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></q>，读屏器无法区分说话人——这时该用<figure></figure>配合<blockquote></blockquote>结构化处理