一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情

HTML是web开发中的基础语言，我们了解到在工作中使用正确的标签是多么重要。然而，实际上，有很多不同的标签可以实现我们想要的效果。其中一些肯定会为我们节省一两行代码，并在正确使用时提供更加优雅的解决方案！下面是本文收集的12个知道的人不多但非常有用的标签。

1. Abbreviation

当把光标悬停在缩写上时，会在一个单独的框中自动给出缩写的解释。这有助于保持文本简洁，同时用户仍然可以访问缩写的解释。

2. Metadata

meta标签声明网页的信息，元数据告诉浏览器如何解析网站的内容、关键字和描述、作者是谁等等。实际上，我们对元数据了解得越多，它似乎就越重要。

details标签使得我们可以制作一个可以折叠的标题，点击之后会显示更多的信息，既可以保持网页外观简洁，又可以完整地解释概念。与 <summary>(标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

当想要以图形方式显示某物状态的方法时，meter标签是一个简单的解决方案。meter标签会生成一个填充到设置的级别的条形图，可以很好地展示座位可用性或库存级别等信息
注意： 不能作为一个进度条来使用，进度条<progress>标签。

与上面的meter标签类似，进度标签用于以图形方式显示度量。主要区别在于，不能设置最小参数，因为进度条假定所有进度都从0%开始。与meter标记一样，结果是一个条形图，当与label标签结合时，它会有显示进度项目的标题。

address标签定义了联系信息，这些信息可以是电子邮件地址、物理地址、社交媒体等。默认情况下，文本以斜体显示，浏览器总是在其前后添加一个换行符，清晰列出详细联系信息。

即Keyboard Input Element(键盘输入元素)。表示键盘按键的语义元素，常用于网页上对快捷键、按键说明的场景。

默认情况下，它将产生一个行内元素，以浏览器的默认 monospace 字体显示，这可能看起来并不令人印象深刻，但是，只需使用几行CSS，就可以实现更优雅的显示，从而快速格式化所有的键盘快捷键。

时间标签定义一个特定的时间或日期。它有一个datetime属性，可用于将时间转换为机器可读的格式。这非常有用，因为它允许浏览器提供日期提醒或指向用户的日历链接。 <time>标签有三个部分： 1.机器可读的时间戳； 2.人类可读的内容； 3.可选的 pubdate 标记。

当创建包含一长串选项的表单时，这个optgroup标签非常有用。它允许你将下拉列表分成几个组，并添加一些顺序和类别，否则导航将会变得非常混乱。

这些标记可用于在网页中显示标记。默认情况下，大多数浏览器将通过在文本下划线来设置样式，并通过在文本中添加删除线来设置~~样式。不过，我们可以使用CSS来调整这一点，并创建自己的自定义标记格式。~~

template标记用于在页面加载时保存对用户隐藏的一些HTML内容的容器。如果您希望稍后使用JavaScript呈现某些内容，这一点尤其有用。

blockquote标记指定从另一个源的块引用的节。对于较长的文本部分，这可以很好的替代，因为浏览器通常会将文本缩进默认值，以突出显示它是引用，并将其与段落主体分开。