HTML `<kbd>` 标签

在文章帖子和评论中的 Markdown 编辑器中添加了 <kbd> 标签支持... #1761

用包裹键盘命令文本<kbd>。非常适合在文档中使用！它语义更准确，并且允许您针对它应用一些漂亮的样式。您也可以将此标签用于其他用户输入，例如语音输入或文本输入设备 🙌

HTML

<kbd>Ctrl</kbd>

CSS

kbd {
  border: 1px solid lime;
  border-radius: 5px;
  padding: 5px;
}

输出

ctrl

没有任何样式时它看起来是这样的：

<kbd>Ctrl</kbd>

<p>Ctrl</p>

输出

看得出来，它看起来很朴素😅。它只有monspace字体。如果你用开发工具打开它，你会看到以下内容：

/* Default Style */
kbd {
  font-family: monospace;
}

不过我发现了一件有趣的事情。如果你使用<kbd>GitHub 或 Dev.to 的 Markdown 标准，它看起来和我的代码片段里的风格非常相似。这能让你README文件更有活力 💃 这也是为什么要使用正确的 HTML 标签 😆 的原因

这在写文档的时候超级有用。我记得以前我总是直接用<code>标签，然后套用某种类来设置样式。但在谷歌搜索之后，我发现了一个更符合语义的解决方案。<kbd>所以谷歌是程序员最好的朋友😂

❌ 糟糕

To copy text, you can use the keyboard shortcut:

<code>Ctrl</code> + <code>c</code>

✅ 好

To copy text, you can use the keyboard shortcut:

<kbd>Ctrl</kbd> + <kbd>c</kbd>

我之前提到过我常用这个<code>标签。我们来看看它的作用。

从你的浏览器来看，默认样式可能没什么区别。它们都使用了monospacefont-family。但从语义上来说，它们的标识不同。

<kbd>：指示用户通过键盘、语音输入或任何其他文本输入设备输入的文本。

<code>：表示计算机代码的短片段的文本。

💬 接下来我还应该介绍哪些 HTML5 标签？😀

字段集

@percy_burton：最近学习了更多关于 fieldset 的知识。我以为它只是用来设置单选按钮或复选框的，但我觉得它可以用来对任何相关的表单项进行分组。而且对可访问性也很有用 😀

@JelteHomminga：将整个字段设置为禁用很有用，而不是对每个输入单独执行此操作

—

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook |博客| SamanthaMing.com