<cite>-引用来源

<cite> 标签在 HTML 中用于标记作品的标题或引用来源，通常表示对书籍、文章、电影、音乐等创作内容的引用。它不会直接影响页面样式，但能为语义化结构和搜索引擎提供明确的信息。

<cite> 标签的基本用法

<cite> 是一个行内元素，默认样式为斜体。它的核心作用是标识引用内容的来源名称。例如：

<p>我最喜欢的小说是<cite>红楼梦</cite>，作者曹雪芹。</p>

浏览器渲染效果为：
我最喜欢的小说是红楼梦，作者曹雪芹。

与其他标签的配合使用

与 <blockquote> 结合

<cite> 常与 <blockquote> 配合使用，标注引用块的来源：

<blockquote>
  <p>生存还是毁灭，这是一个问题。</p>
  <footer>——<cite>莎士比亚《哈姆雷特》</cite></footer>
</blockquote>

与 <q> 结合

对于短引用，可以嵌套在 <q> 标签内：

<p>正如<cite>爱因斯坦</cite>所说：<q>想象力比知识更重要。</q></p>

语义化的重要性

虽然用 <i> 或 CSS 也能实现斜体效果，但 <cite> 的独特价值在于：

1. 机器可读性：帮助搜索引擎识别作品名称
2. 无障碍访问：屏幕阅读器会特别处理引用来源
3. 代码可维护性：明确标注内容类型

错误示例：

<!-- 不推荐：仅用斜体样式 -->
<p>参考自<i>CSS权威指南</i></p>

正确做法：

<p>参考自<cite>CSS权威指南</cite></p>

实际应用场景

学术论文引用

<p>根据<cite>《Web内容无障碍指南(WCAG)2.1》</cite>的要求...</p>

影视作品提及

<div class="movie">
  <img src="inception.jpg" alt="">
  <p>剧照来自电影<cite>盗梦空间</cite></p>
</div>

音乐专辑引用

<ul>
  <li><cite>The Dark Side of the Moon</cite> - Pink Floyd</li>
  <li><cite>Thriller</cite> - Michael Jackson</li>
</ul>

样式自定义示例

虽然默认是斜体，但可以通过 CSS 修改样式：

cite {
  font-style: normal;
  color: #6a737d;
  border-left: 3px solid #dfe2e5;
  padding-left: 10px;
}

特殊注意事项

1. 不要用于作者姓名：应使用 <address> 或普通文本

   <!-- 错误 -->
   <p>作者：<cite>鲁迅</cite></p>
   
   <!-- 正确 -->
   <p>作者：鲁迅</p>
   

2. 嵌套规则：可以包含其他行内元素

   <p>参见<cite><a href="#">HTML规范</a></cite></p>
   

3. 多语言支持：对于非拉丁语系作品名称同样适用

   <p>日本古典文学<cite>源氏物語</cite></p>
   

与其他技术的结合

微数据标注

<p>
  <span itemscope itemtype="http://schema.org/Book">
    书名：<cite itemprop="name">JavaScript高级程序设计</cite>
  </span>
</p>

React 中的使用

function BookReference() {
  return (
    <p>
      当前阅读：<cite>React设计模式与最佳实践</cite>
    </p>
  )
}

浏览器兼容性与历史

<cite> 标签自 HTML 2.0 起就存在，所有现代浏览器完全支持。早期规范允许用于标注作者，HTML5 后明确限定仅用于作品标题。

常见误区辨析

1. 与 <dfn> 混淆：定义术语使用 <dfn>，引用作品用 <cite>
2. 过度使用：仅对正式出版物使用，普通提及无需标签
3. 样式依赖：避免仅因需要斜体效果而使用此标签