HTML 缩写标签

介绍

HTML <abbr> 标签用于定义缩写或首字母缩略词。

在本实验中，你将学习如何使用 HTML <abbr> 标签来指示网页文本中出现的缩写和首字母缩略词。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

添加标题

首先，创建一个名为 index.html 的 HTML 文档并声明文档类型（docType）。

在 index.html 文件中添加标题。

    <h1>Creating Abbreviations in HTML</h1>

添加内容

在 HTML 文件中添加一些文本内容。

    <p>Suppose we have an abbreviation like Mr. or Mrs. which are very common in our day to day life or we can have technical abbreviations like HTML, CSS or HTTP.</p>

使用 <abbr> 标签

使用 <abbr> 标签来定义缩写，并通过 title 属性提供缩写的完整解释。

    <p>Suppose we have an abbreviation like <abbr title="Mister">Mr.</abbr> or <abbr title="Misses">Mrs.</abbr> which are very common in our day to day life or we can have technical abbreviations like <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> or <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>

为 <abbr> 标签添加样式

为 <abbr> 标签添加样式，以改变缩写在网页上的显示方式。例如，我们可以添加一个虚线样式的下划线来指示缩写。

    <style>
        abbr {
            text-decoration: underline dotted;
        }
    </style>

保存文件并在浏览器中打开以查看结果。

总结

在本实验中，你学习了如何使用 HTML 的 <abbr> 标签在网页中创建缩写和首字母缩略词。你还学习了如何为单个 <abbr> 标签添加样式，以及如何使用全局的 class 属性为多个标签应用样式。