HTML 的 <q> 元素

1. 什么是 <q> 元素

<q> 元素用于标记行内短引用（short inline quotation），与块级引用 <blockquote> 相对。它适合在段落中引用一句话、一个短语或一段简短文字，浏览器通常会自动为 <q> 元素的内容加上引号。

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

浏览器渲染效果：

鲁迅曾说："世上本没有路，走的人多了，也便成了路。"

2. 核心属性：cite

<q> 元素支持 cite 属性，用于指明引用的来源 URL。该属性在视觉上不可见，但可以为搜索引擎、屏幕阅读器等工具提供语义信息。

<p>
  根据
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q">
    MDN 文档
  </q>
  的说明，q 元素用于表示行内引用。
</p>

3. 浏览器默认样式与引号

不同浏览器对 <q> 的默认样式略有差异，但主流浏览器都会自动添加引号。引号的样式（弯引号还是直引号）取决于页面声明的语言。

/* 浏览器默认样式大致如下 */
q {
  display: inline;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

3.1 嵌套引号

当 <q> 元素嵌套使用时，浏览器会自动切换引号层级，外层用双引号，内层用单引号：

<p>
  老师说：
  <q>
    学生问：
    <q>什么是语义化标签？</q>
    这是一个好问题。
  </q>
</p>

渲染效果：

老师说："学生问：'什么是语义化标签？' 这是一个好问题。"

4. 与 <blockquote> 的区别

<!-- q：行内引用 -->
<p>他感叹道：<q>今天天气真好！</q></p>

<!-- blockquote：块级引用 -->
<blockquote cite="https://example.com">
  <p>这是一段较长的引用内容，独立成段展示。</p>
</blockquote>

5. 实际应用示例

5.1 文章中的对话引用

<article>
  <h2>访谈实录</h2>
  <p>
    记者问：<q>您如何看待开源社区的发展？</q>
  </p>
  <p>
    受访者答：<q>开源让技术真正流动起来。</q>
  </p>
</article>

5.2 结合 CSS 自定义引号样式

q {
  color: #2c3e50;
  font-style: italic;
}

q::before {
  content: "「";
}

q::after {
  content: "」";
}

<p>设计师说：<q>少即是多。</q></p>

渲染效果：

设计师说：「少即是多。」

6. 注意事项

• <q> 适合短引用，长段落引用请使用 <blockquote>。
• 不要手动添加引号，否则在嵌套场景会出现重复引号。
• cite 属性只是语义标注，不会产生视觉变化。
• 引号样式受页面 lang 属性影响，中文页面默认使用中文引号。

7. 总结

<q> 元素是 HTML 中表达行内短引用的语义化标签，它让浏览器自动处理引号，配合 cite 属性还能标注引用来源。正确使用 <q> 能让你的页面结构更清晰、更符合无障碍标准。