html代码翻译_[译]您知道 HTML 的键盘标签吗?
发布日期:2021-06-24 11:25:24
浏览次数:5
分类:技术文章
本文共 904 字,大约阅读时间需要 3 分钟。
- 原文地址:Do You Know About the Keyboard Tag in HTML?
- 原文作者:Ashay Mandwarya ️
- 译文出自:掘金翻译计划
- 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO1/do-you-know-about-the-keyboard-tag-in-html.md
- 译者:IAMSHENSH
- 校对者:QinRoc
您知道 HTML 的键盘标签吗?
使键盘指令有更好的文本格式
HTML5 的 <kbd>
标签用于展示键盘输入。使用此标签包装键盘指令文本,将会在语义上提供更准确的结果,也能让您定位,以便能对其应用一些很棒的样式。而且 <kbd>
标签特别适合用在文档中。
让我们来看看它的实际效果。
HTML
使用 标签
Ctrl+Alt+Del
不使用 标签
对比一下,没有使用 <kbd>
标签是这样的:
Ctrl+Alt+Del
CSS
只使用 标签,看起来差别不大。但通过加上一些样式,可以让它看起来像实际的键盘按钮,具有更逼真的效果。
kbd { border-radius: 5px;padding: 5px;border: 1px solid teal;}
如果您在控制台中查看该元素,您会发现它除了更改为等宽字体外,没有其他特别之处。
结论
使用 <code>
标签也可以产生同样的效果。那为什么要创建 <kbd>
呢?
答案在于语义上的区别。<code>
用于显示简短的代码片段,而 <kbd>
用于表示键盘输入。
感谢您花时间读完本文!
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
转载地址:https://blog.csdn.net/weixin_32497403/article/details/112091798 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月16日 16时39分49秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
vue 事件总线EventBus的概念、使用以及注意点
2019-04-27
JavaScript 用七种方式教你判断一个变量是否为数组类型
2019-04-27
黄家懿:河北高校邀请赛 -- 二手车交易价格预测决赛答辩
2019-04-27
如何利用pyecharts绘制酷炫的桑基图?
2019-04-27
王朝阳:河北高校邀请赛 -- 二手车交易价格预测决赛答辩
2019-04-27
Scratch等级考试(二级)模拟题
2019-04-27
如何在Jupyter Lab中显示pyecharts的图形?
2019-04-27
什么是Python之禅?
2019-04-27
【青少年编程】【Scratch】01 运动模块
2019-04-27
json的序列化与反序列化
2019-04-27
【第16周复盘】学习的飞轮
2021-06-30
如何利用pyecharts绘制炫酷的关系网络图?
2021-06-30
NCEPU:线下组队学习周报(007)
2021-06-30
LeetCode-LCP 18. 早餐组合(Goland实现)
2021-06-30
C++从入门到进阶近100本书推荐电子书pdf
2021-07-01
蓝桥杯 - [2014年第五届真题]分糖果(模拟)
2019-04-28
蓝桥杯 - [2013年第四届真题]大臣的旅费(DFS)
2019-04-28
蓝桥杯 - [2013年第四届真题]带分数(全排列)
2019-04-28
蓝桥杯 - [2013年第四届真题]幸运数(模拟)
2019-04-28
蓝桥杯 - [2013年第四届真题]横向打印二叉树(排序二叉树)
2019-04-28