PHP小码农

Appearance

cite 引用来源 ​

<cite> 标签用于标记作品的标题，如书籍、文章、电影、歌曲等。它表示内容的参考来源，浏览器默认以斜体渲染。注意：<cite> 只用于作品标题，不用于人名。

前置知识

阅读本节前，建议先了解：abbr 缩写

基础概念 ​

<cite> 的语义是"引用一个作品的标题"。这个作品可以是书籍、文章、电影、歌曲、绘画、歌剧、游戏等。HTML5 规范明确指出 <cite> 不应用于标记人物名称。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>cite 示例</title>
</head>
<body>
  <p>他在 <cite>《三体》</cite> 中提出了宇宙社会学的概念。</p>
  <p>根据 <cite>MDN Web 文档</cite> 的说明，HTML5 引入了语义化标签。</p>
  <p>这首歌改编自 <cite>《月亮代表我的心》</cite>。</p>
</body>
</html>

详细说明 ​

cite 的默认样式 ​

属性默认值（Chrome）
displayinline
font-styleitalic

cite 的典型用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>cite 典型用法</title>
</head>
<body>
  <h1>cite 标签的使用场景</h1>

  <!-- 书籍 -->
  <p>推荐阅读 <cite>《JavaScript 高级程序设计》</cite>。</p>

  <!-- 文章 -->
  <p>这篇论文发表在 <cite>Nature</cite> 期刊上。</p>

  <!-- 电影 -->
  <p><cite>《肖申克的救赎》</cite> 是影史上最伟大的电影之一。</p>

  <!-- 音乐 -->
  <p>这首曲子出自 <cite>《四季》</cite>。</p>

  <!-- 学术论文 -->
  <p>详细分析见 <cite>《深度学习》</cite> 第 6 章。</p>
</body>
</html>

cite 不用于人名 ​

html
<!-- 错误：cite 不应标记人名 -->
<p>据 <cite>张三</cite> 报道，项目进展顺利。</p>

<!-- 正确：人名不需要特殊标签，或用 b 标记 -->
<p>据 <b>张三</b> 报道，项目进展顺利。</p>

<!-- cite 与 blockquote 的 footer 配合使用 -->
<blockquote>
  <p>学而不思则罔，思而不学则殆。</p>
  <footer>—— 孔子，<cite>《论语》</cite></footer>
</blockquote>

cite 与 blockquote cite 属性的区别 ​

  • <cite> 标签：在页面上可见，标记作品标题
  • blockquote 的 cite 属性：不可见，提供来源 URL
html
<blockquote cite="https://example.com/article">
  <p>引用内容。</p>
  <footer>作者，<cite>文章标题</cite></footer>
</blockquote>

实战示例 ​

书评页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>书评</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: serif; line-height: 1.8; }
    cite { font-style: italic; }
  </style>
</head>
<body>
  <h1>《人类简史》读后感</h1>
  <p>读完尤瓦尔·赫拉利的 <cite>《人类简史：从动物到上帝》</cite>，我对人类历史有了全新的认识。这本书从认知革命、农业革命到科学革命，系统地梳理了人类发展的历程。</p>
  <p>作者在书中提出的许多观点发人深省，尤其是关于"虚构故事"在人类社会中作用的论述，让人对语言和文化的力量有了更深刻的理解。</p>
</body>
</html>

注意事项 ​

  • <cite> 只用于作品标题，不用于人名
  • 不要将 <cite> 与 blockquote 的 cite 属性混淆
  • 中文作品名称可以用书名号包裹

最佳实践 ​

  1. 用于作品标题：书籍、文章、电影、歌曲等
  2. 配合 blockquote 使用：在引用的 footer 中标注来源作品
  3. 注意中英文格式：中文用书名号，外文用斜体

下一节

继续学习：dfn 定义术语

参考链接 ​