diff --git a/TODO1/do-you-know-about-the-keyboard-tag-in-html.md b/TODO1/do-you-know-about-the-keyboard-tag-in-html.md index 5fadfc6da73..ba5b279f4e9 100644 --- a/TODO1/do-you-know-about-the-keyboard-tag-in-html.md +++ b/TODO1/do-you-know-about-the-keyboard-tag-in-html.md @@ -2,42 +2,42 @@ > * 原文作者:[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) -> * 译者: -> * 校对者: +> * 译者:[IAMSHENSH](https://github.com/IAMSHENSH) +> * 校对者:[QinRoc](https://github.com/QinRoc) -# Do You Know About the Keyboard Tag in HTML? +# 您知道 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) +![图片来源于 [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 `\` 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 `\` tag is especially well suited to documentation. +HTML5 的 `\` 标签用于展示键盘输入。使用此标签包装键盘指令文本,将会在语义上提供更准确的结果,也能让您定位,以便能对其应用一些很棒的样式。而且 `\` 标签特别适合用在文档中。 -Let’s see it in action. +让我们来看看它的实际效果。 ## HTML -#### With the \ tag +#### 使用 \ 标签 ```html Ctrl+Alt+Del ``` -![With the \ tag](https://cdn-images-1.medium.com/max/2000/1*cOX2zkr7t8lqhi1cAs-y-w.png) +![使用 \ 标签](https://cdn-images-1.medium.com/max/2000/1*cOX2zkr7t8lqhi1cAs-y-w.png) -#### Without the \ tag +#### 不使用 \ 标签 -Just for comparison, this is how it would look without the `\` tag: +对比一下,没有使用 `\` 标签是这样的: ```html

Ctrl+Alt+Del

``` -![Without the \ tag](https://cdn-images-1.medium.com/max/2000/1*78xmgPdM1W93VAPMxWUegg.png) +![不使用 \ 标签](https://cdn-images-1.medium.com/max/2000/1*78xmgPdM1W93VAPMxWUegg.png) ## CSS -With the \ 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 { @@ -47,19 +47,19 @@ border: 1px solid teal; } ``` -![With added styling](https://cdn-images-1.medium.com/max/2000/1*YeOd2I5BjpmHf1gqvy8SOA.png) +![加上样式](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 `\` tag. Then why was `\` created? +使用 `\` 标签也可以产生同样的效果。那为什么要创建 `\` 呢? -The answer lies in semantics. `\` is used for displaying short snippets/fragments of code, and the `\` use case lies in indicating keyboard inputs. +答案在于语义上的区别。`\` 用于显示简短的代码片段,而 `\` 用于表示键盘输入。 -Thanks for your time! +感谢您花时间读完本文! > 如果发现译文存在错误或其他需要改进的地方,欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。