HTML blockquote 标签

HTML blockquote 语法

在 HTML 中，blockquote 标签用于引用较长的文字内容，通常是段落级别的引用。它常用于引言、诗歌、评论、论文引用、歌词等需要强调出处的文字块。

语法：

<blockquote>
    引用的内容
</blockquote>

说明：

blockquote 是一个块级元素，它可以包含 p、ul 等其他元素。

blockquote 标签支持以下 2 个属性。

cite（可选）：指定引用的来源，它的值可以是 URL 或引用来源的描述文本。
lang（可选）：指定引用的语言。

注意: blockquote 是一个块级元素，用于引用较长的段落或多行文本。如果需要引用短语或行内文本，应该使用 q 标签。

HTML blockquote 摘要

属于	HTML 语义化
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML blockquote 示例

接下来，我们通过几个简单的例子来讲解一下 HTML blockquote 标签是如何使用的。

示例 1：blockquote 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>我非常喜欢《小王子》中的一句话：</p>
    <blockquote>只有用心灵才能看得清事物本质，真正重要的东西是肉眼无法看见的。</blockquote>
</body>
</html>

页面效果如下图所示。

HTML blockquote标签示例

示例 2：blockquote 标签的属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3>HTML blockquote tag</h3>
    <blockquote cite="https://en.wikipedia.org/wiki/Blockquote" lang="en">
        <p>A blockquote is a quotation that is indented from the normal text of a document or webpage.</p>
    </blockquote>
</body>
</html>

页面效果如下图所示。

HTML blockquote标签属性

分析：

对于 blockquote 标签来说，我们可以使用 cite 属性指定了引用来源（即 URL），也可以使用 lang 属性来指定引用语言。

blockquote、q 和 cite 的区别

blockquote、q、cite 这 3 个标签都是用于 “引用” 的标签，它们主要的区别在于语义和外观上：

blockquote：用于引用较长的段落文字，比如文章引言、诗歌、评论等。blockquote 是一个块级元素，并且会缩进引用文本。
q：用于引用简短的文本，比如文中插入他人的一句话、引用某人的观点或片段。q 是一个行内元素，它会使用英文双引号包裹引用文本。
cite：用于引用作品的标题（如书名、文章名、电影名）。cite 是一个行内元素，它会以斜体显示引用文本。

提示:

HTML5 标准规定：cite 不应用于标记作者的名字。
q 和 blockquote 可同时搭配 cite 来说明引用的出处。