HTML 的 `<cite>` `<q>` `<blockquote>` 引用标签怎么选

结论：引用一句短话用 <q>，引用独立成段的内容用 <blockquote>，标注书名、文章名、歌名这类「作品标题」用 <cite>。三者不是三选一的替代关系，<cite> 通常嵌套在另外两个里面，而署名必须写在 <blockquote> 外面。

<q>、<blockquote>、<cite> 有什么区别？

结论：三者的区别在「引用内容的长度」和「引用的是内容还是作品名」，而不是视觉上的引号或缩进。

• <q>（quote，行内引用）：短语级元素，只能出现在段落内部，用来引一句短话。
• <blockquote>（块引用）：流内容元素，独占一个或多个段落，用来引一段完整的话。
• <cite>（citation，作品标题）：短语级元素，用来标记被引用作品的标题，不是用来标记说话人的。

判断方法只有两步：先看这段引用是否要独立成段——是就用 <blockquote>，否就用 <q>；再看有没有提到作品名——有就再套一个 <cite>。

引用很短的一句话，用 <q> 还是手写引号？

结论：用 <q>，并且不要在 <q> 里面再手写引号，否则页面上会出现双引号。

<p>他在会上只说了一句：<q>这个方案先不要上线</q>。</p>

浏览器（Chrome、Firefox、Safari）会通过 CSS 的 ::before { content: open-quote } 和 ::after { content: close-quote } 自动补上引号，不需要你手动写 "。想换成中文引号，用 quotes 属性自定义：

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

注意点：很多 CSS reset 里带 q:before, q:after { content: '' }，会把引号清掉，排查「<q> 不显示引号」时先查这一条。另外部分屏幕阅读器不会朗读自动生成的引号，如果这句话的边界对理解至关重要，可以在 <q> 外层用文字补充说明来源。

引用一整段话，<blockquote> 怎么写才规范？

结论：<blockquote> 只包被引用的正文，署名、出处、链接一律放在它外面。

<figure>
  <blockquote cite="https://example.com/interview">
    <p>过早优化是万恶之源。</p>
  </blockquote>
  <figcaption>——某工程师，<cite>《一次架构复盘》</cite></figcaption>
</figure>

三个硬性要求：

1. cite 属性的值必须是一个合法 URL，不能写成「某某书第 3 页」这种文字。浏览器默认不显示它，它只作为元数据供爬虫、阅读器使用。
2. 署名不能放进 <blockquote> 内部。HTML 规范明确要求引用来源信息放在元素之外，放里面会被当成被引用内容的一部分。
3. <blockquote> 不是缩进工具。它默认有 margin: 1em 40px 的左右外边距，如果只是想让段落缩进，应该用 CSS 调 margin / padding，别拿它凑版式——这属于 HTML4 时代的历史用法。

嵌套引用时，<blockquote> 里可以再放 <blockquote>，<q> 里也可以再放 <q>，引号层级由 quotes 属性的第 3、4 组值控制。

<cite> 到底写作者名还是作品名？

结论：按 HTML5 及现行 HTML 标准，<cite> 标记的是作品标题，不是人名，人名请用普通文本或 <span>。

<p>推荐读 <cite>《重构》</cite>，作者是 Martin Fowler。</p>

这是最容易被写错的一点：HTML5 之前 <cite> 常被用来标人名，HTML5 把语义收紧为「作品的标题」，包括书、文章、歌曲、电影、画作、网页标题。浏览器默认把它渲染成斜体，但斜体只是默认样式，不是它的用途。

cite 属性和 <cite> 元素是一回事吗？

结论：不是，只是名字相同。

记住一句：元素管「看得见的标题」，属性管「看不见的出处链接」。

一句话选择流程

短句 → <q>；整段 → <blockquote>；作品名 → <cite>；三者可组合，署名永远在 <blockquote> 外；<q> 内不手写引号；cite 属性只放 URL。按这套规则写，页面语义清晰，也能被搜索引擎和 AI 抓取工具正确解析出引用来源。