<cite>-引用来源

<cite> 标签在 HTML 中用于标记作品的标题或引用来源，通常表示对书籍、文章、电影、音乐等创作内容的引用。它不会自动添加引号或斜体样式，但可以通过 CSS 自定义外观。

<cite> 标签的基本用法

<cite> 是一个行内元素，用于包裹引用内容的来源。例如，引用一本书或一篇文章时，可以用它标注作者或作品名称：

<p>我最喜欢的小说是<cite>《三体》</cite>，作者是刘慈欣。</p>

浏览器默认会将 <cite> 的内容渲染为斜体，但实际效果可能因浏览器而异。可以通过 CSS 修改样式：

cite {
  font-style: normal;
  color: #666;
}

<cite> 与 <blockquote> 的配合使用

<cite> 通常与 <blockquote>（块级引用）一起使用，以明确标注引用的来源。例如：

<blockquote>
  <p>Stay hungry, stay foolish.</p>
  <footer>— <cite>Steve Jobs</cite>, Stanford Commencement Speech (2005)</footer>
</blockquote>

在这个例子中，<cite> 用于标注引用来源（Steve Jobs），而 <footer> 提供了额外的上下文信息。

<cite> 的语义化作用

HTML5 强调语义化，<cite> 的作用不仅仅是样式上的斜体，更重要的是明确内容的引用关系。例如：

<p>在<cite>《JavaScript高级程序设计》</cite>中，作者详细讲解了闭包的概念。</p>

搜索引擎和屏幕阅读器会识别 <cite>，从而更好地理解页面结构。

错误用法与注意事项

1. 不要用 <cite> 包裹作者名
   虽然有些旧示例可能这样用，但 HTML5 规范明确表示 <cite> 应用于作品标题，而非人名：

   <!-- 不推荐 -->
   <p>这句话出自<cite>鲁迅</cite>。</p>
   
   <!-- 推荐 -->
   <p>这句话出自鲁迅的<cite>《狂人日记》</cite>。</p>
   

2. 避免嵌套其他交互元素
   <cite> 是行内元素，不应包裹按钮、链接等可交互内容：

   <!-- 错误示例 -->
   <cite><a href="#">点击查看来源</a></cite>
   

实际应用示例

示例 1：引用电影

<p>我最喜欢的电影是<cite>《肖申克的救赎》</cite>，它讲述了希望与自由的故事。</p>

示例 2：学术论文引用

<p>根据<cite>《人工智能的未来》</cite>（作者：李开复）的观点，AI 将深刻改变社会。</p>

示例 3：音乐专辑

<p>专辑<cite>《The Dark Side of the Moon》</cite>是 Pink Floyd 的代表作之一。</p>

与其他标签的对比

• <q>：用于短句引用，自动添加引号。
• <blockquote>：用于长段落引用，默认缩进。
• <cite>：仅标注来源，不包含引用内容本身。

例如：

<blockquote>
  <p>To be or not to be, that is the question.</p>
  <footer>— <cite>William Shakespeare</cite>, <cite>《哈姆雷特》</cite></footer>
</blockquote>

浏览器兼容性与样式调整

所有现代浏览器均支持 <cite>，但默认样式可能不同。可以通过 CSS 统一风格：

cite {
  font-style: italic;
  font-family: Georgia, serif;
  color: #333;
}

如果需要更复杂的样式，可以结合 ::before 和 ::after 伪元素：

cite::before {
  content: "“";
}

cite::after {
  content: "”";
}

进阶用法：结合微数据

<cite> 可以与 Schema.org 的微数据结合，增强 SEO：

<p>
  这句话出自
  <span itemscope itemtype="https://schema.org/Book">
    <cite itemprop="name">《人类简史》</cite>
  </span>，
  作者是<span itemprop="author">尤瓦尔·赫拉利</span>。
</p>