We use <kbd> tag to define keyboard input. It is a phrase tag that is used to identify text that represents user keyboard input. The content inside is displayed in the default monospace font by most browsers. We can override the font using style sheet.
Syntax
<kbd> Keyboard text…
Example 1
Following is the example using the <kbd> tag in HTML −
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Open a new file using the keyboard shortcut
<kbd>Ctrl</kbd> + <kbd>N</kbd>
</p>
<p>Press<kbd>Ctrl </kbd> + <kdb>C </kdb>to copy text from the file.</p>
<p>Press<kbd>Ctrl </kbd> + <kdb>P </kdb>to paste text to the file.</p>
</body>
</html>
Example 2
的中文翻译为：示例2
这个标签可以在HTML文档中使用，如下所示 −
<html>
<body>
<p>Two special keys in keyboard are:<kbd>ctrl</kbd>, <kbd>alt</kbd>.</p>
</body>
</html>
Example 3
我们还可以在HTML文档中为键盘值添加样式。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
kbd {
border-radius: 2px;
padding: 2px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>
Open a new file using the keyboard shortcut
<kbd>Ctrl</kbd> + <kbd>N</kbd>
</p>
<p>Press<kbd>Ctrl </kbd> + <kdb>C </kdb>to copy text from the file.</p>
<p>Press<kbd>Ctrl </kbd> + <kdb>P </kdb>to paste text to the file.</p>
</body>
</html>
