<kbd> 标签的意义何在？
Posted
技术标签:
【中文标题】<kbd> 标签的意义何在？【英文标题】：What is the point of the <kbd> tag? 【发布时间】：2019-08-23 01:20:09 【问题描述】：我刚刚第一次遇到<kbd> 标签，除了默认文本为等宽字体外，它似乎没有做任何事情，这可以通过使用 CSS 将字体简单地更改为等宽字体来完成。 <kbd> 标签是否有一些使其实用的底层逻辑，类似于 <time> 标签如何将代码转换为机器可读？
我通常看到通过<span> 标记完成的文本更改，并且似乎<kbd> 标记显示的输出与带有font-family: monospace 的<span> 标记完全相同。如果<kbd> 标记只是更改字体，它的意义何在？我在 SO 和其他网站上搜索了解释，但除了字体更改之外，没有发现任何其他内容。
span
font-family: monospace;
<p>Please press <span>Ctrl</span> + <kbd>Shift</kbd>.【问题讨论】：
developer.mozilla.org/en-US/docs/Web/html/Element/kbd 我已经阅读了 MDN，它们的所有 3 个用例都只是将文本设置为具有font-family: monospace 的样式（用于演示计算机输入）。仅仅为样式 1 CSS 属性设置标签似乎不太实用，这就是我问这个问题的原因。它似乎不是互联网上一个很好的文档标签。
所有元素都有其视觉显示以外的原因（毕竟，网络本来就是让那些看不见的人也可以访问的）。
风格它使包含在其中的文本成为等宽，但它的价值在于它的语义。您可以对许多其他标签说同样的话。例如。 <h1>。重点是什么？它所做的一切就是让文本变大。但就像<kbd> 一样，价值在于语义。
我想我很难理解为什么它需要一个单独的标签。 h1 标签非常常用，这就是为什么我知道即使没有必要也有标签。 kbd 标签似乎是非常间接的。
【参考方案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://***.com/questions/1550019/how-to-hijack-the-caps-lock-key-for-cut-copy\-paste-keyboard-operations 只是我的2美分！请保留零钱！
【讨论】：
以上是关于<kbd> 标签的意义何在？的主要内容，如果未能解决你的问题，请参考以下文章