17. 引用 blockquote 与 q

本节目标：学会用 blockquote 标记长引用、q 标记短引用，用 cite 标注引用来源。

blockquote：块级引用

<blockquote> 用于标记大段引用内容。浏览器通常会给它加缩进。

<blockquote>
  <p>编程不是关于打字，而是关于思考。</p>
</blockquote>

<blockquote> 是块级元素，里面可以放段落、标题等任何块级内容。

用 cite 属性标注来源

cite 属性指向引用的出处（URL），但浏览器不会显示它。

<blockquote cite="https://example.com/article">
  <p>简洁是智慧的灵魂。</p>
</blockquote>

这个属性对搜索引擎和辅助技术有用。用户看不到，但机器能读到。

q：行内引用

<q> 用于短语级别的引用。大多数浏览器会自动在两边加上引号。

<p>正如莎士比亚所说，<q>简洁是智慧的灵魂</q>。</p>

<q> 是行内元素，像 <span> 一样嵌在段落中间。

不同语言的引号

浏览器会根据文档语言自动选择引号样式。中文文档通常显示「“」和”」，英文文档显示不同的引号。

cite 标签：标注作品标题

<cite> 不是 <blockquote> 的 cite 属性，而是一个独立的标签。它标记作品的标题——书名、文章名、电影名等。

<p>我最近在读<cite>JavaScript 高级程序设计</cite>，收获很大。</p>

浏览器默认把 <cite> 显示为斜体，但这只是默认样式，你可以用 CSS 改。

组合使用的完整例子

<blockquote cite="https://example.com/einstein-quote">
  <p>想象力比知识更重要。因为知识是有限的，而想象力
  包围着整个世界。</p>
  <footer>
    ——阿尔伯特·爱因斯坦，
    <cite>《宇宙宗教》</cite>
  </footer>
</blockquote>

这个例子里：

<blockquote> 包裹整段引用
cite 属性指向原始出处的 URL
<cite> 标记文章标题
<footer> 标注引用信息的来源

figure 配合引用

更语义化的做法是用 <figure> 包裹引用：

<figure>
  <blockquote>
    <p>Stay hungry, stay foolish.</p>
  </blockquote>
  <figcaption>——史蒂夫·乔布斯</figcaption>
</figure>

<figure> 表示一个独立的内容单元，<figcaption> 是它的标题或说明。

短引用 vs 长引用怎么选

简单判断：

一句话以内的引用 → <q>
多行、多段落的引用 → <blockquote>
作品标题 → <cite>

小结

<blockquote> 标记大段引用，是块级元素，自带缩进
<blockquote> 的 cite 属性指向引用出处的 URL
<q> 标记短语级引用，浏览器自动加引号
<cite> 标记作品标题，是独立标签不是属性
用 <figure> + <figcaption> 可以让引用结构更完整