Web学习网站

Appearance

<cite> 标签 ​

<cite> 标签用于定义作品的标题，如书籍、文章、电影、歌曲等的标题。

概述 ​

<cite> 标签是 HTML 中的语义化标签，用于标识作品的标题。它可以用于书籍、文章、电影、歌曲、报纸、期刊等作品的标题。

语法 ​

html
<cite>作品标题</cite>

基本用法 ​

书籍标题 ​

html
<p>我最近在读<cite>《百年孤独》</cite>这本书。</p>

电影标题 ​

html
<p>我最喜欢的电影是<cite>《肖申克的救赎》</cite>。</p>

实际示例 ​

参考文献列表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>cite 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .references {
      background-color: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
    }
    
    .references h2 {
      margin-top: 0;
      color: #333;
    }
    
    .reference-item {
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #eee;
    }
    
    .reference-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    cite {
      font-style: italic;
      color: #007bff;
    }
  </style>
</head>
<body>
  <h1>学术论文</h1>
  
  <p>根据相关研究<sup>[1]</sup>，人工智能技术在医疗领域的应用前景广阔。</p>
  
  <div class="references">
    <h2>参考文献</h2>
    
    <div class="reference-item">
      <p>[1] 张三. <cite>人工智能在医疗诊断中的应用研究</cite>[J]. 计算机科学, 2023, 40(3): 45-52.</p>
    </div>
    
    <div class="reference-item">
      <p>[2] 李四, 王五. <cite>深度学习算法优化</cite>[M]. 北京: 科学出版社, 2022.</p>
    </div>
    
    <div class="reference-item">
      <p>[3] 赵六. <cite>机器学习实战</cite>[EB/OL]. https://example.com/ml-practice, 2023-01-15.</p>
    </div>
  </div>
</body>
</html>

影视作品推荐 ​

html
<section>
  <h2>推荐作品</h2>
  
  <article>
    <h3>书籍推荐</h3>
    <ul>
      <li><cite>《1984》</cite> - 乔治·奥威尔的经典反乌托邦小说</li>
      <li><cite>《三体》</cite> - 刘慈欣的科幻巨作</li>
      <li><cite>《人类简史》</cite> - 尤瓦尔·赫拉利的历史学著作</li>
    </ul>
  </article>
  
  <article>
    <h3>电影推荐</h3>
    <ul>
      <li><cite>《盗梦空间》</cite> - 克里斯托弗·诺兰执导的科幻悬疑片</li>
      <li><cite>《阿甘正传》</cite> - 罗伯特·泽米吉斯执导的经典励志片</li>
      <li><cite>《千与千寻》</cite> - 宫崎骏执导的动画电影</li>
    </ul>
  </article>
  
  <article>
    <h3>音乐推荐</h3>
    <ul>
      <li><cite>《Bohemian Rhapsody》</cite> - Queen 乐队的经典作品</li>
      <li><cite>《Hotel California》</cite> - Eagles 乐队的代表作</li>
      <li><cite>《青花瓷》</cite> - 周杰伦的中国风歌曲</li>
    </ul>
  </article>
</section>

与相关标签的区别 ​

与 <q> 和 <blockquote> 的结合使用 ​

html
<!-- 引用作品中的一句话，并标明作品标题 -->
<blockquote>
  <p><q>生存还是毁灭，这是一个问题</q></p>
  <footer>— <cite>哈姆雷特</cite></footer>
</blockquote>

与普通文本的区别 ​

html
<!-- 普通文本 -->
<p>我读了《红楼梦》这本书。</p>

<!-- cite 标签：具有语义含义 -->
<p>我读了<cite>《红楼梦》</cite>这本书。</p>

样式化 ​

自定义作品标题样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 cite 样式 */
    cite {
      font-style: italic;
    }
    
    /* 书籍标题样式 */
    .book-title {
      font-style: italic;
      font-weight: bold;
      color: #28a745;
    }
    
    /* 电影标题样式 */
    .movie-title {
      font-style: italic;
      color: #dc3545;
      text-decoration: underline;
    }
    
    /* 音乐作品样式 */
    .music-title {
      font-style: normal;
      font-weight: bold;
      color: #007bff;
      quotes: """";
    }
    
    .music-title:before {
      content: "《";
    }
    
    .music-title:after {
      content: "》";
    }
  </style>
</head>
<body>
  <p>推荐书籍：<cite class="book-title">《三体》</cite></p>
  
  <p>推荐电影：<cite class="movie-title">《流浪地球》</cite></p>
  
  <p>推荐歌曲：<cite class="music-title">青花瓷</cite></p>
</body>
</html>

在不同语境中的使用 ​

学术引用 ​

html
<p>正如<cite>《经济学原理》</cite>中所述，供需关系是市场经济的基础。</p>

艺术评论 ​

html
<p>展览中<cite>《蒙娜丽莎》</cite>的微笑依然神秘动人。</p>

技术文档 ​

html
<p>更多详细信息请参考<cite>HTML5 规范</cite>。</p>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>根据<cite>《Web 内容无障碍指南》</cite>的建议，我们应该...</p>

最佳实践 ​

  1. 语义化使用：只在标识作品标题时使用 <cite> 标签
  2. 正确嵌套：可以在 <q> 或 <blockquote> 标签内使用 <cite> 标签
  3. 样式化：通过 CSS 为作品标题提供合适的样式
  4. 完整性：确保作品标题的完整性和准确性
  5. 一致性：在整个文档中保持引用格式的一致性

浏览器兼容性 ​

<cite> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <cite> 标签是内联元素
  2. 浏览器默认将其显示为斜体
  3. 主要用于标识作品的标题
  4. 不要用于人名，应使用其他适当的标签
  5. 可以与 <q> 和 <blockquote> 标签结合使用

相关标签 ​