让你的 HTML 代码脱颖而出！试试这 11 个你可能错过的 HTML 标签吧！
我知道我经常提到 HTML，但说实话，我必须说它是一种非常棒的标记语言，很适合用来学习编程。虽然它不像其他语言那样遵循很多标准，比如结尾要加分号，但它仍然是一个很好的入门语言，能教会你正确的语法和逻辑。
如果你不了解 HTML 的工作原理，那你来这里干什么？简单来说：如果我们把网页比作一个人，HTML 就像是支撑整个身体的骨架。JavaScript 就像是让身体运转的器官，而 CSS 就像是头发、眼睛颜色和衣服。元素则是 HTML 告诉它该做什么的方式。
例如，如果我想要一个标题，我会放一个H1`<h1>` 标签H2；如果我想要一个副标题，我会放一个 `<p>`p标签。如果我想要一个段落，我会放一个 `<p>` 元素。如果我想要把所有这些元素组合在一起，我会把它们包裹在一个 `<div>`div元素中，以此类推。
我们可以看到，除了文本之外，还有更多具体的标签。div例如，`<div>` 标签可以创建一个类似方框的结构。其他标签，例如 `<a>`strong和 `<b> em`，不仅可以改变文本的外观，还能告诉网站它们的含义——例如，它们应该被强调或比其他文本更重要。
然而，还有一些 HTML 标签鲜为人知。它们是什么呢？让我们一起来看看。
1.abbr标签
也称为缩写标签，用于显示首字母缩略词或缩写词的含义。使用方法很简单，只需将单词或首字母缩略词包裹在abbr标签内，并添加一个title属性即可。
- 标签
<abbr>上印有“WHO”的缩写。 - 该
title属性指定了“WHO”的含义：“世界卫生组织”。 - 当您将光标悬停在“WHO”上时，会显示其完整含义（“世界卫生组织”）作为工具提示。
该title属性适用于所有元素，但在此示例中，请键入缩写或简称的含义。现在，当您将鼠标悬停在该缩写上时，它会显示您设置的标题。这对于按钮或图标来说非常有用，可以提高可访问性。但是，请注意移动设备用户——他们无法将鼠标悬停在对象上。
2.code标签
这对于向用户传递代码块非常有用。虽然你可以使用 CSS 和一个普通的p元素让它看起来像一个代码块，但既然code标签就是为此而设计的，为什么还要这样做呢？
将要转换的字符串用代码标签包裹起来，浏览器会自动将其显示为等宽字体。然后，您可以使用 CSS 使其更加美观。
3.kbd标签
也称为键盘标签，它与 <div>code标签非常相似。将指定的键盘按键放在 <div>kbd标签内，浏览器会自动以等宽字体显示它们。使用 CSS 可以使其看起来像键盘按钮。
4. datalist+option标签
这些功能非常适合用来展示推荐内容或选项菜单。比你想象的要简单得多！
- 创建一个
input带有输入标签的元素，供用户输入内容。 - 给它添加
list属性并命名。 datalist使用标签创建元素datalist，并将其id属性设置为列表属性的名称。- 在 <head> 标签内
datalist，添加option用于推荐的标签。使用value属性设置选项。
现在，当用户开始输入时，会根据输入的字母弹出选项。
5.dialog标签
这个标签可以快速简便地创建弹出窗口或模态框。只需dialog使用 dialog 标签创建一个框，并在其中添加内容即可。添加open属性后，对话框就会显示。您可以使用简单的 JavaScript 代码对其进行进一步控制。
6. details+summary标签
这些工具非常适合创建无需 CSS 或 JavaScript 的原生下拉菜单。
- 使用
details标签创建容器。 - 在里面添加一个
summary可点击标题的标签。 - 将任何内容放入
details标签内，点击即可切换可见性。
这对于常见问题解答部分尤其有用。
7.time标签
虽然这个标签在视觉上作用不大，但它允许浏览器和搜索引擎读取时间值。将时间time值包裹在时间标签内可以提升搜索引擎优化效果。
8. ruby++标签rtrp
这些用于 Ruby 符号，常见于亚洲排版中。它们会在单词或字符上方显示小字。
- 将文本包裹在
ruby标签内。 - 使用
rt标签显示较小的文本。 - 添加
rp标签，以支持不支持 Ruby 语法的浏览器。
9.progress标签
这个标签progress无需CSS即可创建一个工具栏。
- 使用
progress标签。 - 添加
max最大值属性。 - 使用
value当前值的属性。
杆子会自动调节。
10.meter标签
与标签类似progress，该meter标签代表一个尺度。
- 添加范围
min、max值和值属性，分别用于表示范围和当前值。 - 使用
low、high和optimum属性设置阈值，以改变条形的颜色。
11. fieldset+legend标签
这些标签用于创建一个框，以便对对象进行分组。
- 使用
fieldset标签创建容器。 - 添加标题标签
legend。图例会自动定位在框的边缘。
结尾
如果你今天学到了新东西，请狠狠地点击点赞按钮告诉我！如果你喜欢这类内容，欢迎订阅。我会发布关于编程、Web开发以及我学习编程历程的视频。
今天的隐藏HTML标签列表就到这里。非常感谢您阅读到最后，我们下期再见！拜拜！
别忘了在以下平台关注我：
LinkedIn | Medium | Bluesky