<kbd> 标签的意义何在？答案

【问题标题】：What is the point of the <kbd> tag?<kbd> 标签的意义何在？
【发布时间】：2019-08-23 01:20:09
【问题描述】：

我刚刚第一次遇到<kbd> 标签，除了默认文本为等宽字体外，它似乎没有做任何事情，这可以通过使用 CSS 将字体简单地更改为等宽字体来完成。 <kbd> 标签是否有一些使其实用的底层逻辑，类似于 <time> 标签如何将代码转换为机器可读？

我通常看到通过<span> 标记完成的文本更改，并且似乎<kbd> 标记显示的输出与带有font-family: monospace 的<span> 标记完全相同。如果<kbd> 标记只是更改字体，它的意义何在？我在 SO 和其他网站上搜索了解释，但除了字体更改之外，没有发现任何其他内容。

span {
  font-family: monospace;
}

&lt;p&gt;Please press &lt;span&gt;Ctrl&lt;/span&gt; + &lt;kbd&gt;Shift&lt;/kbd&gt;.

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
我已经阅读了 MDN，它们的所有 3 个用例都只是将文本设置为具有 font-family: monospace 的样式（用于演示计算机输入）。仅仅为样式 1 CSS 属性设置标签似乎不太实用，这就是我问这个问题的原因。它似乎不是互联网上一个很好的文档标签。
所有元素都有其视觉显示以外的原因（毕竟，网络本来就是让那些看不见的人也可以访问的）。
风格它使包含在其中的文本成为等宽，但它的价值在于它的语义。您可以对许多其他标签说同样的话。例如。 <h1>。重点是什么？它所做的一切就是让文本变大。但就像<kbd> 一样，价值在于语义。
我想我很难理解为什么它需要一个单独的标签。 h1 标签非常常用，这就是为什么我知道即使没有必要也有标签。 kbd 标签似乎是非常间接的。

标签： html css

【解决方案1】：

kbd 标签更像是一个语义标签，而不是用于样式的标签。默认情况下，UA 使用等宽字体来设置样式，但其目的是

表示用户输入（通常是键盘输入，尽管它也可用于表示其他输入，例如语音命令）。 ^ref

在MDN页面您还可以阅读：

HTML 键盘输入元素 (<kbd>) 表示一段内联文本，表示来自键盘、语音输入或任何其他文本输入设备的文本用户输入。按照惯例，用户代理默认使用其默认的等宽字体呈现<kbd> 元素的内容，尽管这不是 HTML 标准的强制要求。

【讨论】：

有趣的是，MDN 将其描述为span。这个用例似乎太间接了，以至于它没有自己的标签，但我想这就是它的工作原理。我会认为它有更深层次的逻辑，因为它可以使用 1 个 CSS 属性轻松复制。感谢您的回复！
@Nick 关键是 HTML 和 CSS 是两个不同的世界，即使总是一起使用，我们确实可以使用 CSS 来复制常见标签的行为，但例如考虑一下屏幕阅读器，它将只需阅读 HTML 代码和语义标签，他们并不关心 CSS。同样的逻辑适用于 HTML 代码比 CSS 更感兴趣的搜索引擎。我们倾向于只考虑视觉效果，所以我们只使用 div span 并为它们设置样式，但代码将缺乏意义。

【解决方案2】：

它用于表示用户输入，通常来自键盘（用于教程、演练等）。它没有提供其他功能。

尽管在大多数用户代理样式表中，它只会将字体更改为您所发现的等宽字体，但您可以使用它以您想要的方式设置键盘或其他输入的样式，而无需使用带有类的 span。

【讨论】：

【解决方案3】：

经过大量研究和思考，我想出了这个答案。 kbd 标记只是许多无意义的平淡无奇的“空白板”标记中的另一个，可用于将 CSS 定义的属性挂在上面。另一个是 span 标签。我还要指出，由于显而易见的原因，kbd 标签是使用 CSS 将小矩形图像设置为看起来像键盘键的样式时最喜欢的标签，作为在纯文本中简单地键入 Shift 或 Ctrl 的一个很好的选择（请参阅https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts 的“wiki”上的数百个示例或任何有关堆栈溢出键的线程示例：-https://stackoverflow.com/questions/1550019/how-to-hijack-the-caps-lock-key-for-cut-copy\-paste-keyboard-operations 只是我的2美分！请保留零钱！

【讨论】：