HTML - 引用

HTML 引用允许您在网页内容中包含和格式化引用的文本。HTML 提供了诸如 <blockquote>、<q>、<cite>、<address>、<bdo> 和 <abbr> 等标签来构建和设置引用的样式。

这些引用标签有助于保持正确的格式和语义，增强网页上引用内容的呈现和含义。包含引用对于准确传达信息以及为用户提供井井有条的阅读体验至关重要。

HTML 引用元素

以下是用于在网页上插入和显示引用的引用元素

标签	描述
<q>	定义简短的内联引用。
<blockquote>	定义块级缩进引用。
<cite>	指定对创意作品（如书籍或文章）标题的引用。
<address>	定义联系信息。
<bdo>	覆盖文本方向。
<abbr>	定义缩写或首字母缩写。

短引用 (<q>)

<q>标签用于在 HTML 中定义短（或内联）引用，浏览器通常会在其周围添加引号。

语法

定义短引用的语法为：

<q>The content to be quoted</q>

示例

以下是显示网页上短（或内联）引用的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML Quotation tag</title>
</head>
<body>
   <p>DLF stands for <q>Delhi Land and Finance</q></p>
   <p>Delhi Land and Finance is one of the largest commercial real estate developer in India.</p>
</body>
</html>

示例

在下面的示例中，我们在<h1>标签内的特定文本上使用了<q>标签

<!DOCTYPE html>
<html>
<head>
   <title>HTML u tag</title>
</head>
<body>
   <h1>Welcome to <q> INDIA </q> Kids.</h1>
</body>
</html>

块级引用 (<blockquote>)

<blockquote>标签用于指示长引用。它只应包含其中的块级元素，而不仅仅是纯文本。它指定从其他来源引用的部分，并且只包含块级元素。

我们还可以在 <blockquote> 标签内使用 cite 属性以 URL 形式指示引用的来源。

语法

定义块级引用的语法为：

<blockquote>The multiple line content to be quoted </blockquote>

示例

以下是显示网页上块级引用的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <p>DLF stands for Delhi Land and Finance</p>
   <blockquote>Delhi Land and Finance is one of the largest commercial real estate developers in India. It is also engaged in the business of generation of power provision of maintenance services hospitality and recreational activities life insurance and retail chain outlets. Its internal business includes the development business and rental business. The development business of the Company is involved in the sale of residential spaces select commercial offices and commercial complexes. The company has a unique business model with earnings arising from development and rentals. </blockquote>
</body>
</html>

示例

以下是使用带 <blockquote> 标签的“cite”属性的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoint’s official website</p>
   <blockquote cite="https://tutorialspoint.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

引用样式 (<blockquote>)

您可以使用 CSS 为 <blockquote> 标签设置样式，使其更符合您的网页主题。

在下面的示例中，我们设置了一些 CSS 属性，例如背景颜色、边框、边框宽度和字体颜色，以使其更具吸引力

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
   <style>
      blockquote {
         background-color: #006969;
         color: #fff;
         border: 1px solid #333;
         border-radius: 8px;
         font-weight: 500;
         padding: 8px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoint’s official website</p>
   <blockquote cite="https://tutorialspoint.com">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

引用引用 (<cite>)

<cite>标签用于在内容中引用创意作品（如书籍、电影或歌曲）的标题。它为引用提供了语义含义。

示例

这是一个编码示例：

<!DOCTYPE html>
<html>
<head>
   <title>Cite Tag Example</title>
</head>
<body>
   <p>The information is sourced from <cite>The Elements of Style</cite> by Strunk and White.</p>
</body>
</html>

在这个例子中，'<cite>' 用于指示所引用书籍的标题。

联系信息 (<address>)

<address>标签用于定义文档作者或所有者的联系信息。它通常包括诸如电子邮件地址、物理地址或其他相关联系信息等详细信息。

示例

这是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>Address Tag Example</title>
</head>
<body>
<address>
   Contact us at: <a href="mailto:info@example.com">info@example.com</a><br>
   Visit us at: 123 Main Street, Cityville
</address>
</body>
</html>

在这个例子中，'<address>' 标签用于提供联系信息，包括电子邮件链接和物理地址。

双向覆盖 (<bdo>)

HTML 中的 <bdo> 标签，bdo 代表双向覆盖，用于覆盖当前文本方向。它通常用于需要更改默认文本方向的情况，例如显示从右到左的文本。

示例

这是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>Bi-Directional Override Example</title>
</head>
<body>
   <p>This text will go left to right.</p>
   <p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

在这个例子中，'<bdo>' 标签内的文本从右到左显示，覆盖了默认的从左到右的方向。

缩写 (<abbr>)

<abbr> 标签用于定义缩写或首字母缩写，即您可以为特定单词或句子的完整形式定义可选标题。

示例

这是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviation Tag Example</title>
</head>
<body>
   <p>Tim Berners-Lee, a British scientist, invented the <abbr title="World Wide Web">WWW</abbr> in 1989.</p>
</body>
</html>

在这个例子中，<abbr> 用于将“World Wide Web”缩写为“WWW”，而'title' 属性提供了缩写的完整描述。

打印页面