html - <kbd> 标签有什么意义?

标签 html css

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

我通常会看到通过 <span> 完成的文本更改标签,它出现了 <kbd>标记显示与 <span> 完全相同的输出用 font-family: monospace 标记. <kbd> 有什么意义?标签如果它只是改变字体?我已经在 SO 和其他网站上搜索了解释,但除了字体的变化之外没有找到任何东西。

span {
  font-family: monospace;
}
<p>Please press <span>Ctrl</span> + <kbd>Shift</kbd>.

最佳答案

kbd标签与其说是用于样式的标签,不如说是语义标签。默认情况下,UA 使用等宽字体来设置样式,但其目的是为了

represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). ref

MDN您还可以阅读的页面:

The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

关于html - <kbd> 标签有什么意义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55462510/

相关文章:

javascript - 将自定义 html/css 背景插入到 Wordpress

html - ie8 利润率最高的错误

css - 每次发生 translateY 动画时渲染图像。仅在 Chrome 中

javascript - 隐藏滚动条并改为添加箭头

jquery - 使用 jQuery 将 2 个 DIV(登录链接和购物车)移动到最后一个列表项

css - 如何将夹在两个绝对 div 之间的 div 居中?

javascript - 我无法在 phonegap 中连接多个页面

html - 如何减少表格html中td之间的空间?

css - 合并 mixins 中的选择器

html - 对齐一个盒子,在底部而不是顶部