HTML 引用

原创

admin 4个月前 (08-07) 阅读数 23 #HTML

HTML 引用

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

这些引用标签有助于保持适当的格式和语义，增强网页上引用内容的呈现和意义。在网页中融入引用对于准确传达信息并为用户提供良好的阅读体验至关重要。

HTML 引用元素

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

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

短引用 (<q>)

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

语法

定义短引用的语法如下：

<q>要引用的内容</q>

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML 引用标签</title>
</head>
<body>
   <p>DLF 代表 <q>德里土地和金融</q></p>
   <p>德里土地和金融是印度最大的商业地产开发商之一。</p>
</body>
</html>

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML u 标签</title>
</head>
<body>
   <h1>欢迎来到 <q> 印度 </q> 小朋友们。</h1>
</body>
</html>

块级引用 (<blockquote>)

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

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

语法

定义块级引用的语法如下：

<blockquote>要引用的多行内容</blockquote>

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote 标签</title>
</head>
<body>
   <p>DLF 代表德里土地和金融</p>
   <blockquote>德里土地和金融是印度最大的商业地产开发商之一。它还从事发电、维护服务、酒店和娱乐活动、人寿保险和零售连锁店业务。其内部业务包括开发业务和租赁业务。公司的开发业务涉及住宅空间、精选商业办公室和商业综合体的销售。该公司拥有独特的商业模式，收益来自开发和租赁。</blockquote>
</body>
</html>

示例

以下是使用 "cite" 属性与 <blockquote> 标签的示例：

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote 标签</title>
</head>
<body>
   <h1>教程点</h1>
   <p>以下是来自教程点官方网站的引用</p>
   <blockquote cite="https://www.tutorialspoint.com">加入我们数百万忠实访问者，访问我们的免费文本库。从编程语言和网页开发到数据科学和网络安全，我们精心制作的教程将帮助您从头开始掌握任何技术或概念。</blockquote>
</body>
</html>

样式化引用 (<blockquote>)

您可以使用 CSS 样式化 <blockquote> 标签，使其根据网页主题具有更好的外观。

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

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote 标签</title>
   <style>
      blockquote {
         background-color: #006969;
         color: #fff;
         border: 1px solid #333;
         border-radius: 8px;
         font-weight: 500;
         padding: 8px;
      }
   </style>
</head>
<body>
   <h1>教程点</h1>
   <p>以下是来自教程点官方网站的引用</p>
   <blockquote cite="https://www.tutorialspoint.com">加入我们数百万忠实访问者，访问我们的免费文本库。从编程语言和网页开发到数据科学和网络安全，我们精心制作的教程将帮助您从头开始掌握任何技术或概念。</blockquote>
</body>
</html>

引用来源 (<cite>)

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

示例

以下是一个编码示例：

<!DOCTYPE html>
<html>
<head>
   <title>Cite 标签示例</title>
</head>
<body>
   <p>信息来源自 Strunk 和 White 的 <cite>The Elements of Style</cite>。</p>
</body>
</html>

在此示例中，'<cite>' 用于表示所引用书籍的标题。

联系信息 (<address>)

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

示例

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>Address 标签示例</title>
</head>
<body>
<address>
   联系我们：<a href="mailto:info@example.com">info@example.com</a><br>
   访问地址：123 主街，城市镇
</address>
</body>
</html>

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

双向覆盖 (<bdo>)

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

示例

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>双向覆盖示例</title>
</head>
<body>
   <p>这段文本将从左到右显示。</p>
   <p><bdo dir="rtl">这段文本将从右到左显示。</bdo></p>
</body>
</html>

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

缩写词 (<abbr>)

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

示例

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>缩写标签示例</title>
</head>
<body>
   <p>蒂姆·伯纳斯-李，一位英国科学家，于 1989 年发明了 <abbr title="World Wide Web">WWW</abbr>。</p>
</body>
</html>

在此示例中，<abbr> 用于将 "World Wide Web" 缩写为 "WWW"，而 'title' 属性提供了缩写的完整描述。