让你的HTML脱颖而出：这11个你可能忽略的标签

我知道我经常思考HTML，说实话，我觉得它是一个非常棒的入门标记语言，帮助你快速适应编程。虽然它不像其他语言那样严格遵循语法规则，但仍然能够教会你正确的语法和逻辑。

如果你不懂 HTML 是怎么回事，你来这里干嘛？简单点说：如果我们把一个网页想象成一个人的话，HTML 就是支撑身体的骨架。JavaScript 就像身体里的器官，让身体运作起来，而 CSS 就像人的外观，包括头发、眼睛颜色和衣服。元素就是 HTML 告诉它该做什么的样子。

例如，如果我想用一个标题，我会使用一个H1，如果是子标题，我会用H2。如果我想加一个段落，我会使用一个p元素。如果我想将这些元素组合在一起，我会用一个div元素把它们包起来，等等。

我们可以看到，不仅仅是文本，还有更具体的标签。例如，div 标签会创建一个类似盒子的结构。而其他标签，如 strong 和 em，不仅改变文本的外观，还告诉网站它们具有某种特定的意义——要么需要强调，要么比其他文本更重要。
不过，还有一些不太为人知的 HTML 标签。它们是什么呢？让我们一起来看看吧。

也称为缩写标签，当您希望显示首字母缩略词或缩写的意思时使用它。使用它时，只需将单词或首字母缩略词用abbr标签包裹起来，并给它加上title属性。

• <abbr> 标签用来包裹缩写 "WHO"。

• title 属性指定了 "WHO" 代表的含义： "世界卫生组织"。

• 当你把鼠标悬停在 "WHO" 上时，会弹出一个提示框，内容为 "世界卫生组织"。

title属性适用于每一个元素，但在这种情况下，输入该首字母缩略词或缩写所代表的完整含义。现在，这在你将光标悬停在该缩写上时，会显示你设置的标题。这对于提高按钮或图标的可访问性非常有用。然而，要注意移动设备用户——他们无法将光标悬停在对象上，因此无法看到提示。

这对于给用户传输代码块极其有用。你可以用CSS和普通p元素让代码块看起来像代码，既然code标签就是为此设计的，为什么要那样做呢？

将你想变换的字符串用代码标签包裹，浏览器会自动以等宽字体显示。接着你可以用CSS让它看起来更漂亮。

[]

也叫键盘标签，它和 code 标签很像。用 kbd 标签包裹指定的键盘按键，浏览器会自动以等宽字体显示这些按键。可以用 CSS 让它看起来像键盘按钮。

这些对于展示推荐内容或选项列表特别有用。这比你想象的要简单得多！

• 创建一个 input 元素，使用 input 标签让用户可以在此输入内容。
• 给它添加 list 属性，并指定一个名称。
• 使用 datalist 标签创建一个 datalist 元素，并将它的 id 属性设置为 list 属性的名称。
• 在 datalist 内部，用 option 标签添加推荐选项，并用 value 属性设置选项的值。

现在，当用户开始输入时，会根据输入的字母弹出相关建议。

这是一张图片

使用这个标签可以快速简便地创建弹出或模态窗口。只需使用dialog标签创建一个对话框，并在其内部添加内容。当添加open属性时，对话框就会显示出来。你可以用简单的JavaScript进一步控制这个对话框。

这些非常适合用来创建无需本机CSS或JavaScript的下拉式菜单。

• 使用details标签来创建一个容器。
• 在容器内添加一个summary标签作为可点击的标题。
• 将任何内容放置在details标签内，点击时可切换显示内容。

在FAQ部分，这样的回答特别管用。

虽然从外观上看不出什么变化，但这个标签让浏览器和搜索引擎能够识别时间值。将 time 值包裹在时间标签里有助于提高 SEO。

用于Ruby注释，在亚洲字体中很常见。这些注释会在字或词的上方显示较小的文字。

• 用 ruby 标签包裹你的文字。
• 在 ruby 标签中使用 rt 标签来显示较小的文字。
• 添加 rp 标签，以便在不支持 Ruby 标记的浏览器上显示替代内容。

这个标签用来创建一个无CSS的进度条。

• 使用 progress 标签。
• 添加 max 属性来指定最大值。
• 使用 value 属性来表示当前进度。

它会自动调整。

在HTML中，类似于progress标签，meter标签也表示一个量表。

• 添加 min、max 以及 value 这三个属性来表示范围和当前值的属性。
• 使用 low、high 以及 optimum 属性用于改变条形图颜色的阈值。

1. fieldset + legend 标签

这些标记用来创建一个容器，以便分组对象。

Fieldset` 和 `legend` 标签示例" target="_blank" rel="nofollow" />

• 使用 fieldset 标签创建容器。
• 使用 legend 标签来添加标题。这个标题会自动定位在容器的边框内。

如果你今天学到了新东西，让我知道，那就给我点个大大的赞吧！如果你喜欢这种内容，记得订阅哦。我发编程、网页开发和我学编码旅程相关的视频。

今天我们要讲的隐藏HTML标签就到这里了。真的很感谢你能读到最后，下次见~拜拜~

别忘了在这些平台上关注我
领英 | 美阅 | Bluesky