Create do-you-know-about-the-keyboard-tag-in-html.md (#6917)

TODO1/do-you-know-about-the-keyboard-tag-in-html.md

@@ -0,0 +1,68 @@
+> * 原文地址：[Do You Know About the Keyboard Tag in HTML?](https://medium.com/better-programming/do-you-know-about-the-keyboard-tag-in-html-55bb3986f186)
+> * 原文作者：[Ashay Mandwarya 🖋️💻🍕](https://medium.com/@ashaymurceilago)
+> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
+> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/do-you-know-about-the-keyboard-tag-in-html.md](https://github.com/xitu/gold-miner/blob/master/TODO1/do-you-know-about-the-keyboard-tag-in-html.md)
+> * 译者：
+> * 校对者：
+
+# Do You Know About the Keyboard Tag in HTML?
+
+> Better text formatting for keyboard commands
+
+![Photo by [Florian Krumm](https://unsplash.com/@floriankrumm?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*f7nqmMC9F1xGB3im)
+
+The `\<kbd>` tag in HTML5 is used to provide keyboard input. Wrapping the keyboard command text with this tag will provide more semantically correct results and will also allow you to target so that you can apply some cool styling. Use of the `\<kbd>` tag is especially well suited to documentation.
+
+Let’s see it in action.
+
+## HTML
+
+#### With the \<kbd> tag
+
+```html
+<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
+```
+
+![With the \<kbd> tag](https://cdn-images-1.medium.com/max/2000/1*cOX2zkr7t8lqhi1cAs-y-w.png)
+
+#### Without the \<kbd> tag
+
+Just for comparison, this is how it would look without the `\<kbd>` tag:
+
+```html
+<p>Ctrl+Alt+Del</p>
+```
+
+![Without the \<kbd> tag](https://cdn-images-1.medium.com/max/2000/1*78xmgPdM1W93VAPMxWUegg.png)
+
+## CSS
+
+With the \<kbd> tag alone, it doesn’t look like much. But with some added styling, it can resemble the actual keyboard buttons, to give a more realistic feel:
+
+```css
+kbd {
+border-radius: 5px;
+padding: 5px;
+border: 1px solid teal;
+}
+```
+
+![With added styling](https://cdn-images-1.medium.com/max/2000/1*YeOd2I5BjpmHf1gqvy8SOA.png)
+
+If you look at the element in the console, you will see that it has nothing special about it, other than a monospace ****font change.
+
+![](https://cdn-images-1.medium.com/max/2000/1*m6FqgEvoA0T5zuIxkUAfGQ.png)
+
+## Conclusion
+
+The same effect can also be generated by using the `\<code>` tag. Then why was `\<kbd>` created?
+
+The answer lies in semantics. `\<code>` is used for displaying short snippets/fragments of code, and the `\<kbd>` use case lies in indicating keyboard inputs.
+
+Thanks for your time!
+
+> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。
+
+---
+
+> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。