<q>-行内引用

<q> 标签是 HTML 中用于标记行内引用的元素，通常浏览器会默认为其添加引号。它适用于短引用，与 <blockquote> 的长引用形成对比。语义化使用 <q> 能提升代码可读性和 SEO 效果。

<q> 标签的基本语法

<q> 是一个行内元素，包裹需要引用的文本即可。浏览器会自动在内容前后添加引号（语言环境不同，引号样式可能不同）。例如：

<p>鲁迅曾说过：<q>世上本没有路，走的人多了，也便成了路。</q></p>

渲染效果：
鲁迅曾说过：<q>世上本没有路，走的人多了，也便成了路。</q>

与 <blockquote> 的区别

• <q>：短引用（行内），默认加引号，无段落间距。
• <blockquote>：长引用（块级），默认缩进，需手动添加引号。

示例对比：

<!-- q标签 -->
<p>文档中提到：<q>请勿在通电时拆卸设备</q>。</p>

<!-- blockquote标签 -->
<p>以下内容摘自用户手册：</p>
<blockquote>本产品防水等级为IP68，可在1.5米水深中停留30分钟。</blockquote>

语言与引号样式

通过 lang 属性可指定引号样式。中文默认使用直角引号「」，英文使用弯引号“”。例如：

<p lang="zh">孔子曰：<q>学而时习之。</q></p>
<p lang="en">Shakespeare said: <q>To be or not to be.</q></p>

自定义引号样式

用 CSS 的 quotes 属性可覆盖默认引号。例如实现法语样式的 « »：

<style>
  .french q { quotes: '«' '»'; }
</style>

<p class="french">拿破仑说过：<q>不想当将军的士兵不是好士兵。</q></p>

结合 cite 属性

为引用添加来源链接（不会显示在页面上，但有利于语义化和SEO）：

<p>爱因斯坦曾提出：<q cite="https://example.com/einstein">想象力比知识更重要。</q></p>

实际应用场景

场景1：对话中的引用

<p>客服回复：<q>您的订单已发货，预计<time datetime="2023-05-20">5月20日</time>送达。</q></p>

场景2：技术文档中的注意事项

<p>使用API时请注意：<q>每个用户每分钟限请求100次。</q></p>

场景3：多语言混合内容

<p>日语中的「<q lang="ja">頑張って</q>」相当于中文的<q>加油</q>。</p>

高级技巧：嵌套引用

<q> 支持嵌套，内层会自动切换引号样式：

<p>主编强调：<q>编辑部规定<q>所有稿件必须校对三遍</q>才能提交。</q></p>

渲染效果：
主编强调：<q>编辑部规定<q>所有稿件必须校对三遍</q>才能提交。</q>

无障碍访问建议

• 避免单独使用 <q> 标签，应配合上下文语句
• 对于屏幕阅读器用户，可在 CSS 中添加 ::before 和 ::after 的 aria-hidden 声明：

q::before, q::after {
  content: no-open-quote;
  aria-hidden: true;
}