什么是HTML中的块引用（blockquote）|极客笔记

什么是HTML中的块引用（blockquote）

在HTML中，块引用（blockquote）是一种元素，用于引用其他来源的文本。它通常用于引用外部来源的文本，例如书籍、文章或其他网页内容。通过使用块引用，可以清晰地将引用的文本与其他内容区分开来，并显示出该文本是引用的来源。

块引用的语法

在HTML中，块引用由<blockquote>标签表示。以下是块引用的基本语法：

<blockquote>
    引用的文本内容在这里。
</blockquote>

块引用标签内的文本内容将会被显示为引用样式，通常是缩进的样式，以便区分出引用文本。

示例代码

下面是一个简单的示例代码，演示如何在HTML中使用块引用：

<!DOCTYPE html>
<html>
<head>
    <title>块引用示例</title>
</head>
<body>
    <h1>HTML块引用示例</h1>
    <p>以下是一段引用的文字：</p>
    <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget elementum quam, id tempor ligula.
    </blockquote>
</body>
</html>

Output:

什么是HTML中的块引用（blockquote）

在这个示例中，<blockquote>标签将“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”这段文本显示为引用样式。

块引用的嵌套

块引用可以嵌套在其他块引用中，以便引用多个来源的文本。在这种情况下，外部的块引用将包含内部块引用的全部内容。

示例代码

下面是一个示例代码，演示如何在HTML中嵌套块引用：

<!DOCTYPE html>
<html>
<head>
    <title>嵌套块引用示例</title>
</head>
<body>
    <h1>HTML嵌套块引用示例</h1>
    <blockquote>
        <p>这是外部块引用的内容。</p>

        <blockquote>
            <p>这是内部嵌套的块引用内容。</p>
        </blockquote>
    </blockquote>
</body>
</html>

Output:

什么是HTML中的块引用（blockquote）

在这个示例中，内部的块引用被包含在外部块引用中，并且两个块引用的内容都会显示为引用样式。

块引用的cite属性

块引用元素还可以使用cite属性指定引用的来源。这个属性的值通常是一个URL，指向引用文本的原始来源。

示例代码

以下是一个示例代码，演示如何在HTML中使用cite属性：

<!DOCTYPE html>
<html>
<head>
    <title>cite属性示例</title>
</head>
<body>
    <h1>HTML cite属性示例</h1>
    <blockquote cite="https://www.how2html.com">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </blockquote>
</body>
</html>

Output:

什么是HTML中的块引用（blockquote）
在这个示例中，<blockquote>元素使用cite属性指定了引用文本的来源URL。

添加引用信息

除了使用cite属性外，还可以在块引用中添加引用信息，以便清楚地标识引用来源。我们可以使用<footer>标签来添加引用信息。

示例代码

以下是一个示例代码，演示如何在块引用中添加引用信息：

<!DOCTYPE html>
<html>
<head>
    <title>引用信息示例</title>
</head>
<body>
    <h1>HTML引用信息示例</h1>
    <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <footer>引用来源：how2html.com</footer>
    </blockquote>
</body>
</html>

Output:

什么是HTML中的块引用（blockquote）

在这个示例中，<footer>标签用于添加引用来源信息“引用来源：how2html.com”。

自定义块引用样式

可以使用CSS样式表来自定义块引用的外观。例如，可以更改块引用的字体颜色、背景颜色、边框样式等。

示例代码

以下是一个示例代码，演示如何使用CSS来自定义块引用的外观：

<!DOCTYPE html>
<html>
<head>
    <title>自定义块引用样式示例</title>
    <style>
        blockquote {
            background-color: #f9f9f9;
            border-left: 5px solid #ccc;
            padding: 10px 20px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>HTML自定义块引用样式示例</h1>
    <blockquote>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </blockquote>
</body>
</html>

Output:

什么是HTML中的块引用（blockquote）