<q>仅用于标记嵌入式短引用，需配合lang属性确保引号样式和屏幕阅读器正确识别；误用（如包裹大段文字、无来源引用）会损害可访问性和SEO。
HTML 没有 <q> 短引文标签的“高级用法”——它就是个语义化包裹器，用错地方反而会破坏可访问性和 SEO。
什么时候该用 <q> 而不是 <span> 或直接打引号
只在需要明确标记「嵌入式短引用」时才用：<q> 表示一段文字是引用自别处、且未单独成段（即不适用 <blockquote>）。浏览器默认会给它加双引号（CSS 可改），屏幕阅读器会读出“引号开始”“引号结束”。
常见错误现象：<q> 套大段文字、套标题、套带链接的整句、甚至套自己写的“金句”——这些都不是引用，纯属滥用。
- ✅ 正确场景：文章正文中插入一句别人说的话，比如“她说
<q>明天必须上线</q>”，且上下文已说明“她”是谁、出处在哪</li> <li>❌ 错误场景：独立卡片上写“客户评价：<code><q>太好用了！</q>”，没注明来源；或用 <code><q>
包裹整个引用段落（该用<blockquote>） - ⚠️ 注意：如果引用内容本身含引号（如单引号），
<q>的嵌套行为不可靠，IE 和部分旧 Safari 不支持<q><q>自动切换引号样式
<q> 的引号样式和浏览器兼容性差异
不同浏览器默认用的引号不一样：<q> 在英文环境通常渲染为 “double”，中文环境可能是 「中文书名号」或 “英文双引号”，取决于 lang 属性和系统 locale。不能指望它自动适配中文引号。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：按
lang="zh"用「」，lang="en"用 “” - Safari（macOS）：依赖系统语言设置，有时忽略
lang - Firefox：基本遵循
lang，但对lang="zh-CN"和lang="zh"处理略有不同 - 关键点：别靠它做视觉设计，要用 CSS 控制引号，例如
q::before { content: '“'; }，否则上线后引号乱码或缺失
为什么 <q> 经常被忽略或误配 lang 属性
很多开发者以为加了 <q> 就自动“语义正确”，却漏掉关键配套：<q> 必须配合有效的 lang 属性才能让引号和语音朗读准确。没有 lang，屏幕阅读器可能读成“quote start”，而不是“中文引号开始”。
- ✅ 正确写法：
<q lang="zh">这个功能很稳定</q>或<html lang="zh">全局声明后子元素继承 - ❌ 常见坑：
<q>这个功能很稳定</q>（无 lang）、<q lang="zh-CN">…</q>（部分老浏览器不识别 -CN 后缀）、<q lang="zh">…</q>但页面<html>标签 lang 是 en - 性能影响几乎为零，但可访问性影响直接：JAWS/NVDA 读错引号类型，会导致听障用户误解语气或结构
真正麻烦的是混合语言引用——比如中文正文里插一句英文原话，这时得嵌套 <q lang="en"> 并确保父容器 lang="zh"，否则引号和语音全乱。这种细节，调试时很难一眼发现。
