HTML 缩写标签-html教程-PHP中文网

HTML 缩写标签的语法

实现 HTML 缩写标签的示例

示例#5

要记住的重要要点

结论

首页

web前端

html教程

HTML 缩写标签

王林

Sep 04, 2024 pm 04:26 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 5 具有有趣的功能，可以使用最少的代码编写 HTML 网页变得更简单。它提供了一组丰富的有趣标签来设计网页元素。一个这样的标签很有用，它被称为。标签。这个<缩写>标签用于一次性定义和显示缩写。 HTML abbr 标签将允许我们定义缩写词或首字母缩略词的完整形式，浏览器通常会在网页上显示字母的简短版本，但将鼠标悬停在这些缩写上时，浏览器将显示完整形式的自动出现该缩写词。

HTML 缩写标签的语法

;标签通常与

一起使用。属性。由于标题标签用于定义文档的标题，因此当与 <abbr> 一起使用时，标题将被定义为文档的标题。标签成为一个属性并对其具有特殊含义。标题将包含人类可读的标题或缩写词的完整形式。标签在悬停时向用户显示完整的表单，并简化定义描述。这些信息对于浏览器、搜索引擎和翻译系统等辅助系统更有用。以下是 abbr 标签的语法， <ul> <li><strong>正常缩写标签：</strong></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr> PFA </abbr></pre><div class="contentsignin">登录后复制</div></div> <p>这只会显示简单的文本，没有任何意义。假设我们要使用上面缩写的指定完整形式，即 PFA，则 </p> <title>使用属性， <ul> <li><strong>带标题标签的缩写标签：</strong></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr title = "Please Find Attached" > PFA </abbr></pre><div class="contentsignin">登录后复制</div></div> <p>在这里，我们将显示标题定义为短格式，但同时，我们使用 <abbr> 定义了它的完整形式。标签以及 <title>标签。标签成对出现，因此总会有一个结束符 </abbr>标签可用。

属性：正如我们在语法中看到的，标题标签与一起使用时，会显示标题标签。标签成为一个属性并为其分配特殊功能。否则，没有更多特定标签可与一起使用。标签，但是这个标签 ;支持 HTML 中默认提供的全局属性和事件属性。

实现 HTML 缩写标签的示例

下面是实现 HTML 缩写标签的示例：

示例#1

在此示例中，我们可以看到没有标题标签的简单缩写。

代码：

<!DOCTYPE html>
<html>
<head>
<title> abbr tag in HTML </title>
<style>
body {
text-align: left ;
}
</style>
</head>
<body>
<abbr > PFA </abbr>
</body>
</html>

登录后复制

输出： 将是如下简单文本，

HTML 缩写标签

示例#2

在此示例中，我们可以看到带有标题标签的缩写。

代码：




 abbr tag in HTML 



<abbr title = "Please Find Attached" > PFA </abbr>

登录后复制

输出： 将是带有点下划线的首字母缩略词。

HTML 缩写标签

如果我们尝试将鼠标悬停在其上，它将显示我们以与工具提示类似的方式给出的标题。

示例 #3

在这里，我们使用 CSS 样式元素字体样式作为上的斜体。标签。

代码：




 abbr tag in HTML 



 while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

登录后复制

输出：

HTML 缩写标签

示例#4

让我们在上使用更多 CSS 样式元素。标签。

代码：




 abbr tag in HTML 



 while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

登录后复制

输出：

HTML 缩写标签

在这里，我们使用 CSS 样式元素将首字母缩略词设置为粗体和红色。

示例#5

让我们修改同一示例以添加更多样式和设计。

代码：




 abbr tag in HTML 



 while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

登录后复制

输出：

HTML 缩写标签

在上面的每个示例中，尝试将鼠标悬停在我们使用的首字母缩略词（即 PFA）上方，并查看浏览器将如何显示我们分配给它的标题。

要记住的重要要点

;几乎所有浏览器都支持该标签，包括 Google Chrome、Internet Explorer、Safari、Firefox、Opera 等。所有浏览器产生的输出在某些情况下可能会有所不同，但结果是相同的。
由于没有可用的特定属性；标签，我们将在接下来的示例中看到如何对属性进行样式化（使用可用的全局属性）。显示此元素的默认样式是 display: inline，并且它可能因浏览器而异。
;标签可用于向用户提供完整的表单，或者在特定内容中定义，或者在设计文档样式的情况下。并不强制要求始终使用。标签。
;属性用于提供中指定首字母缩略词的完整信息或完整形式。标签。属性是可选的，它将用在的起始标记中。标签。
曾经有一个<缩写词> HTML 5 之前的标签用于定义缩写词或首字母缩略词，但它已从 HTML 5 中弃用，不应使用。