引用标签

Frontend SELF ZH
第 4 级 , 课程 4
可用

4.1 元素 <blockquote>

在HTML中,有一些专门用于格式化引用的标签:<blockquote><cite><q>。 这些标签各自有其特定的用途,适用于不同类型的引用和来源说明。

标签 <blockquote> 用于显示较大块的引用文本。浏览器通常会在引用左侧添加缩进,以便从主文本中突出显示。

使用示例:

HTML
    
      <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

特点:

  • 是块级元素
  • 通常在左侧带有缩进
  • 可以包含其他块级和内联元素
  • 可以使用属性 cite 指定引用来源的URL

属性 cite:

标签 <blockquote> 中的 cite 属性用于指定引用的来源。虽然这个 属性在视觉上不可见,但它有助于保留引用的来源信息,对搜索引擎和其他自动文本处理系统有益。

带有 cite 属性的示例:

HTML
    
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
      </blockquote>
    
  

4.2 元素 <cite>

标签 <cite> 用于指明引用的来源或作品的名称,比如书籍、文章、电影等。 标签 <cite> 中的文本通常会以斜体显示。

使用示例:

HTML
    
      <p>引用来源: <cite>Franklin D. Roosevelt</cite></p>
    
  

特点:

  • 是内联元素
  • 通常以斜体显示
  • 用于指示引用来源或作品的名称

<blockquote> 和 <cite> 的示例:

HTML
    
      <blockquote  cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

4.3 元素 <q>

标签 <q> 用于突出文本中嵌入的简短引用。浏览器会自动在 <q> 标签内的文本周围添加引号。

使用示例:

HTML
    
      <p>正如阿尔伯特·爱因斯坦所说,<q>想象力比知识更重要</q>。</p>
    
  

特点:

  • 是内联元素
  • 自动在引用周围添加引号
  • 用于嵌入在主文本中的简短引用

<q> 的 cite 属性:

<q> 标签中,cite 属性也用于指定引用的来源 URL。

带有 cite 属性的示例:

HTML
    
      <p>正如阿尔伯特·爱因斯坦所说,<q cite="https://example.com/einstein-quote">想象力比知识更重要</q>。</p>
    
  

引用标签的组合使用

这些标签可以一起使用,以创建更有结构和信息量的内容。

HTML
    
      <h1>引用标签的使用示例</h1>
      <p>
        正如阿尔伯特·爱因斯坦所说,<q cite="https://example.com/einstein-quote">想象力比知识更重要</q>。
      </p>
      <blockquote cite="https://example.com/quote-source">
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>— Franklin D. Roosevelt</cite>
      </blockquote>
    
  

标签 <blockquote><cite><q> 对于在HTML中正确格式化引用非常重要。 这些标签不仅支持视觉上的引用突出显示,还具有语义意义,这对于搜索引擎和自动文本处理系统非常重要。

评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION