<abbr> 标签在 HTML 中

引言

在本文中，我们将学习 HTML5 提供的 abbr 标签。我们将使用 <abbr> 标签来表示缩写或首字母缩略词。借助 abbr 标签，我们可以提供 title 属性以及缩写或首字母缩略词的完整解释。

语法

使用下面的语法，我们可以在 HTML 程序中实现 abbr 标签。

此外，我们还必须确保 title 属性包含 <strong>abbr</strong> 标签中写入的缩写或首字母缩略词的完整描述，仅此而已。

让我们通过一个例子来理解这一点。

示例 1

HTML

输出

说明

在上面的代码中，我们创建了 WTJ 的缩写。当用户将鼠标悬停在该单词上时，将显示完整描述。

标签属性

在 HTML 中，abbr 标签支持所有全局属性和全局事件。

1. HTML 中的全局属性

在 HTML 中，我们可以在所有标签中使用所有属性，这些属性称为全局属性。

• 全局属性的一些示例是 HTML 中的 ID 和 Class。
• 我们也可以在 abbr 标签中使用 title，因为 title 是一个全局属性。

2. HTML 中的事件属性

我们可以在 HTML 中使用事件，这些事件可以触发所有函数的操作。当用户单击按钮时，将开始触发某些操作。

• 事件是所有全局属性的子集。
• 让我们看一些将在 HTML 中使用的事件示例。

窗口事件： onload, onresize, ononline, onmessage。

键盘事件： onkeypress, onkeydown, onkeyup。

鼠标事件： onclick, onmousedown, onmouseup, onwheel, onmouseover, onmouseout。

<abbr> 标签的用途是什么？

我们不必每次都为缩写或首字母缩略词使用 abbr 标签。有几种情况可以使用 abbr 标签。让我们看看其中一些场景。

• 当需要提供 HTML 页面正常流程之外使用的缩写或首字母缩略词的完整解释或定义时，我们可以使用 abbr 标签作为工具提示来展开缩写。
• abbr 标签在 HTML 中具有语义含义。因此，当需要缩写时，我们可以使用 abbr 标签。我们还可以将 CSS 样式应用于 abbr 标签内的缩写。
• 我们还可以使用 abbr 标签来定义 abbr 标签的 title 属性。如果存在技术术语，而我们不能普遍使用某些东西，那么我们可以在此时使用 abbr 标签。
• 我们还可以将 abbr 标签与 dfn 标签结合使用。在这里，我们使用 dfn 标签来为缩写或首字母缩略词的既定定义提供定义。

让我们通过一些程序来讨论 abbr 标签的一些示例。

示例 1：语义标记缩写

我们也可以在不提供任何缩写或定义的情况下使用 abbr 标签。

让我们通过一个程序来了解这一点。

代码

输出

说明

在上面的代码中，我们使用了 abbr 标签，它纯粹是出于语义目的。此标签告诉开发人员所写文本是一个缩写。

示例 2：abbr 也可以与 dfn 一起使用

在此示例中，我们使用 dfn 标签来帮助使用 abbr 标签，dfn 标签用于更正式地定义缩写或首字母缩略词。

让我们通过一个程序来了解这一点。

代码

输出

示例 3：样式化缩写

在此示例中，我们将使用 abbr 标签和 CSS，而不会影响 HTML 的任何其他部分。

HTML 代码

输出

说明

在上面的代码中，我们可以看到 CSS 效果正在为缩写词提供样式。

示例 4：提供完整解释

在此示例中，我们正在使用 title 属性来提供缩写的完整解释。

让我们通过一个例子来理解这一点。

HTML 代码

输出

说明

在上面的代码中，缩写是可见的，当您将鼠标悬停在缩写上时，您可以看到其完整解释。这是因为我们使用了 abbr 标签的 title 属性。